UI update
This commit is contained in:
sairaj mote
parent
1926084bdb
commit
2c9ae34612
@ -1142,8 +1142,8 @@ ol[type="1"] {
|
|||||||
|
|
||||||
.room-tile__icon {
|
.room-tile__icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 8rem;
|
height: 6rem;
|
||||||
width: 8rem;
|
width: 6rem;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
@ -1152,6 +1152,11 @@ ol[type="1"] {
|
|||||||
fill: rgba(var(--text-color), 0.1);
|
fill: rgba(var(--text-color), 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.investors-icon {
|
||||||
|
height: 8rem;
|
||||||
|
width: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
.room-tile__title {
|
.room-tile__title {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
padding: 0.4rem 0.8rem;
|
padding: 0.4rem 0.8rem;
|
||||||
@ -1247,11 +1252,6 @@ ol[type="1"] {
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.room-shortcut {
|
|
||||||
padding: 0.5em 0.8rem;
|
|
||||||
border-radius: 0.3rem;
|
|
||||||
background-color: rgba(var(--text-color), 0.06);
|
|
||||||
}
|
|
||||||
.room-shortcut .room-tile__title {
|
.room-shortcut .room-tile__title {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
@ -1270,26 +1270,6 @@ ol[type="1"] {
|
|||||||
-webkit-tap-highlight-color: transparent;
|
-webkit-tap-highlight-color: transparent;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.grid .ext-link-tile::after, .ext-link-tile::before {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
border-radius: 50%;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
.ext-link-tile::before {
|
|
||||||
top: 5rem;
|
|
||||||
right: -2rem;
|
|
||||||
height: 4rem;
|
|
||||||
width: 4rem;
|
|
||||||
background-color: rgba(var(--text-color), 0.5);
|
|
||||||
}
|
|
||||||
.ext-link-tile::after {
|
|
||||||
top: -2rem;
|
|
||||||
right: -3rem;
|
|
||||||
height: 10rem;
|
|
||||||
width: 10rem;
|
|
||||||
background-color: rgba(var(--text-color), 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile__title {
|
.tile__title {
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
@ -1401,6 +1381,10 @@ ol[type="1"] {
|
|||||||
color: rgba(var(--text-color), 0.8);
|
color: rgba(var(--text-color), 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.graph-container {
|
||||||
|
margin: 1rem 0 4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 640px) {
|
@media only screen and (max-width: 640px) {
|
||||||
.hide-on-mobile {
|
.hide-on-mobile {
|
||||||
display: none;
|
display: none;
|
||||||
@ -1468,9 +1452,13 @@ ol[type="1"] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.room-tile__icon {
|
.room-tile__icon {
|
||||||
height: 2.5rem;
|
height: 4rem;
|
||||||
width: 2.5rem;
|
width: 4rem;
|
||||||
margin-bottom: 1rem;
|
}
|
||||||
|
|
||||||
|
.investors-icon {
|
||||||
|
height: 6rem;
|
||||||
|
width: 6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#hero_title {
|
#hero_title {
|
||||||
@ -1641,6 +1629,11 @@ ol[type="1"] {
|
|||||||
.features-grid {
|
.features-grid {
|
||||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.graph-container {
|
||||||
|
width: 80%;
|
||||||
|
justify-self: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media only screen and (min-width: 1280px) {
|
@media only screen and (min-width: 1280px) {
|
||||||
#home_page, .page,
|
#home_page, .page,
|
||||||
|
|||||||
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
@ -1032,8 +1032,8 @@ ol[type="1"]{
|
|||||||
}
|
}
|
||||||
.room-tile__icon{
|
.room-tile__icon{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 8rem;
|
height: 6rem;
|
||||||
width: 8rem;
|
width: 6rem;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
@ -1042,6 +1042,10 @@ ol[type="1"]{
|
|||||||
fill: rgba(var(--text-color), 0.1);
|
fill: rgba(var(--text-color), 0.1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.investors-icon{
|
||||||
|
height: 8rem;
|
||||||
|
width: 8rem;
|
||||||
|
}
|
||||||
.room-tile__title{
|
.room-tile__title{
|
||||||
// font-size: 1.2rem;
|
// font-size: 1.2rem;
|
||||||
// border-bottom: 1px solid;
|
// border-bottom: 1px solid;
|
||||||
@ -1137,9 +1141,6 @@ ol[type="1"]{
|
|||||||
}
|
}
|
||||||
|
|
||||||
.room-shortcut{
|
.room-shortcut{
|
||||||
padding: 0.5em 0.8rem;
|
|
||||||
border-radius: 0.3rem;
|
|
||||||
background-color: rgba(var(--text-color), 0.06);
|
|
||||||
.room-tile__title{
|
.room-tile__title{
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
@ -1158,28 +1159,6 @@ ol[type="1"]{
|
|||||||
box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.2);
|
box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.2);
|
||||||
-webkit-tap-highlight-color: transparent;
|
-webkit-tap-highlight-color: transparent;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
.grid
|
|
||||||
&::after,
|
|
||||||
&::before{
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
border-radius: 50%;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
&::before{
|
|
||||||
top: 5rem;
|
|
||||||
right: -2rem;
|
|
||||||
height: 4rem;
|
|
||||||
width: 4rem;
|
|
||||||
background-color: rgba(var(--text-color), 0.5);
|
|
||||||
}
|
|
||||||
&::after{
|
|
||||||
top: -2rem;
|
|
||||||
right: -3rem;
|
|
||||||
height: 10rem;
|
|
||||||
width: 10rem;
|
|
||||||
background-color: rgba(var(--text-color), 0.2);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.tile__title{
|
.tile__title{
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
@ -1284,6 +1263,9 @@ ol[type="1"]{
|
|||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
color: rgba(var(--text-color), 0.8);
|
color: rgba(var(--text-color), 0.8);
|
||||||
}
|
}
|
||||||
|
.graph-container{
|
||||||
|
margin: 1rem 0 4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 640px) {
|
@media only screen and (max-width: 640px) {
|
||||||
.hide-on-mobile{
|
.hide-on-mobile{
|
||||||
@ -1342,9 +1324,12 @@ ol[type="1"]{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.room-tile__icon{
|
.room-tile__icon{
|
||||||
height: 2.5rem;
|
height: 4rem;
|
||||||
width: 2.5rem;
|
width: 4rem;
|
||||||
margin-bottom: 1rem;
|
}
|
||||||
|
.investors-icon{
|
||||||
|
height: 6rem;
|
||||||
|
width: 6rem;
|
||||||
}
|
}
|
||||||
#hero_title{
|
#hero_title{
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
@ -1496,6 +1481,10 @@ ol[type="1"]{
|
|||||||
.features-grid{
|
.features-grid{
|
||||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||||
}
|
}
|
||||||
|
.graph-container{
|
||||||
|
width: 80%;
|
||||||
|
justify-self: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media only screen and (min-width: 1280px) {
|
@media only screen and (min-width: 1280px) {
|
||||||
#home_page, .page,
|
#home_page, .page,
|
||||||
|
|||||||
1
assets/illustrations/investors.svg
Normal file
1
assets/illustrations/investors.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg id="f4f25b2f-c031-4b25-9376-2f5094dcb7eb" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M14,14.23h0a4.36,4.36,0,0,1,4.36,4.12,19.55,19.55,0,0,1-1.12,6.43,8.16,8.16,0,0,1-3.55,2.42,8.16,8.16,0,0,1-3.52-2.42A19.5,19.5,0,0,1,9,18.24,4.31,4.31,0,0,1,10,15.42a4.86,4.86,0,0,1,3.61-1.19H14m0-2h-.32C6.69,12.23,7,18.3,7,18.3A21.51,21.51,0,0,0,8.3,25.62c.61,1.23,3.7,3.58,5.33,3.58h0c1.63,0,4.71-2.35,5.33-3.58a21.51,21.51,0,0,0,1.3-7.32h0A6.38,6.38,0,0,0,14,12.23Z"/><path d="M50.71,14.23h0a4.36,4.36,0,0,1,4.36,4.11,19.62,19.62,0,0,1-1.18,6.44A8.19,8.19,0,0,1,50.4,27.2a8.25,8.25,0,0,1-3.53-2.42,20,20,0,0,1-1.17-6.5v-.06a4.35,4.35,0,0,1,1-2.78,4.87,4.87,0,0,1,3.64-1.21h.32m0-2h-.32c-7,0-6.69,6.07-6.69,6.07a22.05,22.05,0,0,0,1.35,7.32c.62,1.23,3.7,3.58,5.34,3.58s4.72-2.35,5.33-3.58a21.76,21.76,0,0,0,1.35-7.32v0a6.36,6.36,0,0,0-6.35-6.05Z"/><path d="M32,11.9a6.51,6.51,0,0,1,7,6.25,27.22,27.22,0,0,1-1.66,9c-.67,1.19-4.1,3.65-5.36,3.65h-.19a11.61,11.61,0,0,1-5.15-3.62A27.19,27.19,0,0,1,25,18.1V18a6.62,6.62,0,0,1,1.64-4.32A7.18,7.18,0,0,1,32,11.9m0-2c-9.35,0-9,8.2-9,8.2A29.19,29.19,0,0,0,24.81,28c.83,1.66,5,4.82,7.2,4.82l0,0c2.2,0,6.37-3.16,7.19-4.82A29.05,29.05,0,0,0,41,18.11s-.32-8.2-9-8.2Z"/><path d="M37.72,36.28c2,2,4.82,3.18,7.58,4.31l2,.82a14.53,14.53,0,0,1,1.1,6.47A31.12,31.12,0,0,1,32.78,52.1H31.24a31.13,31.13,0,0,1-15.62-4.23,14.49,14.49,0,0,1,1.1-6.46l1.94-.82c2.77-1.13,5.6-2.3,7.58-4.3a14,14,0,0,0,5.2,2.65A1.81,1.81,0,0,0,32,39a2.22,2.22,0,0,0,.51-.06,14,14,0,0,0,5.25-2.67m.23-3A11.93,11.93,0,0,1,32,37,12,12,0,0,1,26,33.28c-1.77,3.32-6.18,4.57-10.34,6.4-1.69.71-3.1,9.88-1.12,9.88a33.06,33.06,0,0,0,16.69,4.53h1.54a33,33,0,0,0,16.64-4.52c2,0,.58-9.18-1.13-9.89-4.16-1.83-8.57-3.08-10.34-6.4Z"/><path d="M17.82,32.42a10,10,0,0,0,1.53,1.12c-1,.49-2.06.92-3,1.28l-.05,0,0,0c-.5.23-1,.44-1.5.65l-.74.32c-2.5,1-3.65,4.22-4.17,6.86A22.54,22.54,0,0,1,2,40a11,11,0,0,1,.7-4.06L4,35.4a18.53,18.53,0,0,0,5.43-3,10.89,10.89,0,0,0,3.67,1.78l.51.13.52-.13a10.87,10.87,0,0,0,3.7-1.79m.19-2.9a8.77,8.77,0,0,1-4.4,2.75,8.73,8.73,0,0,1-4.4-2.75C7.9,32,4.63,32.89,1.55,34.25c-1.26.52-2.3,7.31-.84,7.31a24.5,24.5,0,0,0,10.86,3.31c.34-3,1.31-6.38,3.27-7.2.75-.33,1.53-.65,2.29-1,2.49-1,4.85-2,6.22-3.44-2.27-.9-4.34-1.87-5.34-3.71Z"/><path d="M54.58,32.43a18.28,18.28,0,0,0,5.43,3l1.29.53a11.32,11.32,0,0,1,.7,4.12,22.58,22.58,0,0,1-7.85,2.68C53.67,40.28,52.56,37,50,35.9c-.8-.4-1.62-.74-2.35-1-1-.43-2-.85-3-1.31a9.45,9.45,0,0,0,1.53-1.13,10.93,10.93,0,0,0,3.66,1.78l.52.13.52-.13a11,11,0,0,0,3.67-1.78m.21-2.91a8.77,8.77,0,0,1-4.4,2.75A8.77,8.77,0,0,1,46,29.52c-1,1.84-3,2.81-5.32,3.75,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21A24.5,24.5,0,0,0,63.3,41.61c1.44,0,.4-6.84-.86-7.36-3.08-1.36-6.34-2.27-7.65-4.73Z"/></svg>
|
||||||
|
After Width: | Height: | Size: 2.7 KiB |
@ -48,23 +48,21 @@ window.addEventListener("online", () => {
|
|||||||
notify("We are back online.", "success");
|
notify("We are back online.", "success");
|
||||||
});
|
});
|
||||||
|
|
||||||
const themeSwitcher = getRef("theme_switcher");
|
if (getRef("theme_switcher")) {
|
||||||
|
|
||||||
if (themeSwitcher) {
|
|
||||||
if (localStorage.theme === "dark") {
|
if (localStorage.theme === "dark") {
|
||||||
nightlight();
|
nightlight();
|
||||||
themeSwitcher.checked = true;
|
getRef("theme_switcher").checked = true;
|
||||||
} else if (localStorage.theme === "light"){
|
} else if (localStorage.theme === "light"){
|
||||||
daylight();
|
daylight();
|
||||||
themeSwitcher.checked = false;
|
getRef("theme_switcher").checked = false;
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
if (window.matchMedia(`(prefers-color-scheme: dark)`).matches) {
|
if (window.matchMedia(`(prefers-color-scheme: dark)`).matches) {
|
||||||
nightlight();
|
nightlight();
|
||||||
themeSwitcher.checked = true;
|
getRef("theme_switcher").checked = true;
|
||||||
} else {
|
} else {
|
||||||
daylight();
|
daylight();
|
||||||
themeSwitcher.checked = false;
|
getRef("theme_switcher").checked = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -75,7 +73,7 @@ if (themeSwitcher) {
|
|||||||
function nightlight() {
|
function nightlight() {
|
||||||
document.body.setAttribute("data-theme", "dark");
|
document.body.setAttribute("data-theme", "dark");
|
||||||
}
|
}
|
||||||
themeSwitcher.addEventListener("change", function (e) {
|
getRef("theme_switcher").addEventListener("change", function (e) {
|
||||||
if (this.checked) {
|
if (this.checked) {
|
||||||
nightlight();
|
nightlight();
|
||||||
localStorage.setItem("theme", "dark");
|
localStorage.setItem("theme", "dark");
|
||||||
@ -266,13 +264,13 @@ const siteMap = [
|
|||||||
buyUrl: `purchase_room`,
|
buyUrl: `purchase_room`,
|
||||||
status: `We are servicing current customers only. A new Blockchain-based version of Bob's Fund will be available soon.`
|
status: `We are servicing current customers only. A new Blockchain-based version of Bob's Fund will be available soon.`
|
||||||
},
|
},
|
||||||
/* {
|
{
|
||||||
name: "Initial Coin Offering",
|
name: "Initial Coin Offering",
|
||||||
url: "ico",
|
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.`,
|
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`
|
buyUrl: `purchase_room`
|
||||||
}, */
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
/* {
|
/* {
|
||||||
|
|||||||
@ -114,7 +114,9 @@
|
|||||||
<h1 id="hero_title"></h1>
|
<h1 id="hero_title"></h1>
|
||||||
<section class="room-carousel">
|
<section class="room-carousel">
|
||||||
<section id="performance_room" class="grid room">
|
<section id="performance_room" class="grid room">
|
||||||
<canvas id="performance_graph"></canvas>
|
<section class="graph-container">
|
||||||
|
<canvas id="performance_graph"></canvas>
|
||||||
|
</section>
|
||||||
<p>Bitcoin bonds different series release timeline</p>
|
<p>Bitcoin bonds different series release timeline</p>
|
||||||
<ul id="bit_bond_series__container" class="timeline-container"></ul>
|
<ul id="bit_bond_series__container" class="timeline-container"></ul>
|
||||||
</section>
|
</section>
|
||||||
@ -426,7 +428,7 @@
|
|||||||
if (counter < 12) {
|
if (counter < 12) {
|
||||||
let BTC_base = btcPrices[dataPoint]['1a. open (USD)']
|
let BTC_base = btcPrices[dataPoint]['1a. open (USD)']
|
||||||
allBtcPrices.push(BTC_base)
|
allBtcPrices.push(BTC_base)
|
||||||
dates.push(dataPoint.split('-').join('/'))
|
dates.push(dataPoint.split('-').reverse().join('/'))
|
||||||
counter++
|
counter++
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
@ -451,39 +453,60 @@
|
|||||||
}
|
}
|
||||||
let ctx = getRef('performance_graph').getContext('2d');
|
let ctx = getRef('performance_graph').getContext('2d');
|
||||||
|
|
||||||
let gradientFill = ctx.createLinearGradient(200, 0, 200, 400);
|
let gradientFill
|
||||||
gradientFill.addColorStop(0, "rgba(128, 182, 244, 0.6)");
|
let lineColor
|
||||||
gradientFill.addColorStop(1, "transparent");
|
|
||||||
|
|
||||||
|
function selectGraphColors(){
|
||||||
|
gradientFill = ctx.createLinearGradient(200, 0, 200, 400);
|
||||||
|
let cssTextColor = getComputedStyle(document.body).getPropertyValue('--text-color')
|
||||||
|
gradientFill.addColorStop(0, `rgba(${cssTextColor}, 0.2)`);
|
||||||
|
gradientFill.addColorStop(1, "transparent");
|
||||||
|
lineColor = ctx.createLinearGradient(500, 0, 100, 0)
|
||||||
|
lineColor.addColorStop(0, "#80b6f4");
|
||||||
|
lineColor.addColorStop(1, "#f49080");
|
||||||
|
// lineColor = getComputedStyle(document.body).getPropertyValue('--secondary-text-color');
|
||||||
|
textColor = `rgba(${cssTextColor}, 0.8)`
|
||||||
|
}
|
||||||
|
selectGraphColors()
|
||||||
|
|
||||||
|
let myChart
|
||||||
async function renderGraph(obj) {
|
async function renderGraph(obj) {
|
||||||
await getData(obj)
|
await getData(obj)
|
||||||
|
|
||||||
let myChart = new Chart(ctx, {
|
myChart = new Chart(ctx, {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: {
|
data: {
|
||||||
labels: dates.reverse(),
|
labels: dates.reverse(),
|
||||||
datasets: [{
|
datasets: [{
|
||||||
label: `$${obj.BTC_base} series performace($)`,
|
label: `$${obj.BTC_base} series performace($)`,
|
||||||
data: historicalData.reverse(),
|
data: historicalData.reverse(),
|
||||||
borderColor: '#034baa',
|
borderColor: lineColor,
|
||||||
fill: true,
|
fill: true,
|
||||||
backgroundColor: gradientFill,
|
backgroundColor: gradientFill,
|
||||||
|
pointBackgroundColor: 'white',
|
||||||
|
pointRadius: 4,
|
||||||
|
pointHoverRadius: 6,
|
||||||
|
pointHoverBorderWidth: 4,
|
||||||
borderWidth: 4,
|
borderWidth: 4,
|
||||||
tension: 0.3
|
tension: 0.3,
|
||||||
|
color: textColor
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
responsive: true,
|
responsive: true,
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scales: {
|
scales: {
|
||||||
y: {
|
y: {
|
||||||
|
ticks: {
|
||||||
|
color: textColor
|
||||||
|
},
|
||||||
|
// display: false,
|
||||||
beginAtZero: true
|
beginAtZero: true
|
||||||
},
|
},
|
||||||
x: {
|
x: {
|
||||||
|
ticks: {
|
||||||
|
color: textColor
|
||||||
|
},
|
||||||
|
// display: false,
|
||||||
grid: {
|
grid: {
|
||||||
display: false
|
display: false
|
||||||
}
|
}
|
||||||
@ -492,6 +515,14 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
getRef("theme_switcher").addEventListener("change", function (e) {
|
||||||
|
selectGraphColors()
|
||||||
|
myChart.data.datasets[0].borderColor = lineColor
|
||||||
|
myChart.data.datasets[0].backgroundColor = gradientFill
|
||||||
|
myChart.options.scales.x.ticks.color = textColor;
|
||||||
|
myChart.options.scales.y.ticks.color = textColor;
|
||||||
|
myChart.update()
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -107,7 +107,9 @@
|
|||||||
<h1 id="hero_title"></h1>
|
<h1 id="hero_title"></h1>
|
||||||
<section class="room-carousel">
|
<section class="room-carousel">
|
||||||
<section id="performance_room" class="grid room">
|
<section id="performance_room" class="grid room">
|
||||||
<canvas id="performance_graph"></canvas>
|
<section class="graph-container">
|
||||||
|
<canvas id="performance_graph"></canvas>
|
||||||
|
</section>
|
||||||
<p>Bobs fund different fund release timeline</p>
|
<p>Bobs fund different fund release timeline</p>
|
||||||
<ul id="bobs_fund_timeline" class="timeline-container"></ul>
|
<ul id="bobs_fund_timeline" class="timeline-container"></ul>
|
||||||
</section>
|
</section>
|
||||||
@ -556,6 +558,7 @@
|
|||||||
USD_base,
|
USD_base,
|
||||||
amount: invested,
|
amount: invested,
|
||||||
fee: 0,
|
fee: 0,
|
||||||
|
release
|
||||||
}
|
}
|
||||||
renderGraph(obj)
|
renderGraph(obj)
|
||||||
const fundCard = create('div', {
|
const fundCard = create('div', {
|
||||||
@ -606,7 +609,7 @@
|
|||||||
if (counter < 12) {
|
if (counter < 12) {
|
||||||
let BTC_base = btcPrices[dataPoint]['1a. open (USD)']
|
let BTC_base = btcPrices[dataPoint]['1a. open (USD)']
|
||||||
allBtcPrices.push(BTC_base)
|
allBtcPrices.push(BTC_base)
|
||||||
dates.push(dataPoint.split('-').join('/'))
|
dates.push(dataPoint.split('-').reverse().join('/'))
|
||||||
counter++
|
counter++
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
@ -631,43 +634,62 @@
|
|||||||
}
|
}
|
||||||
let ctx = getRef('performance_graph').getContext('2d');
|
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");
|
|
||||||
|
|
||||||
|
let gradientFill
|
||||||
|
let lineColor
|
||||||
|
let textColor
|
||||||
|
|
||||||
|
function selectGraphColors(){
|
||||||
|
gradientFill = ctx.createLinearGradient(200, 0, 200, 400);
|
||||||
|
let cssTextColor = getComputedStyle(document.body).getPropertyValue('--text-color')
|
||||||
|
gradientFill.addColorStop(0, `rgba(${cssTextColor}, 0.2)`);
|
||||||
|
gradientFill.addColorStop(1, "transparent");
|
||||||
|
lineColor = ctx.createLinearGradient(500, 0, 100, 0)
|
||||||
|
lineColor.addColorStop(0, "#80b6f4");
|
||||||
|
lineColor.addColorStop(1, "#f49080");
|
||||||
|
// lineColor = getComputedStyle(document.body).getPropertyValue('--secondary-text-color');
|
||||||
|
textColor = `rgba(${cssTextColor}, 0.8)`
|
||||||
|
}
|
||||||
|
selectGraphColors()
|
||||||
|
|
||||||
|
let myChart
|
||||||
async function renderGraph(obj) {
|
async function renderGraph(obj) {
|
||||||
await getData(obj)
|
await getData(obj)
|
||||||
|
|
||||||
let myChart = new Chart(ctx, {
|
myChart = new Chart(ctx, {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: {
|
data: {
|
||||||
labels: dates.reverse(),
|
labels: dates.reverse(),
|
||||||
datasets: [{
|
datasets: [{
|
||||||
label: `Bob's fund performace($)`,
|
label: `${getFormatedTime(obj.release, true)} fund performace($)`,
|
||||||
data: historicalData.reverse(),
|
data: historicalData.reverse(),
|
||||||
borderColor: '#034baa',
|
borderColor: lineColor,
|
||||||
fill: true,
|
fill: true,
|
||||||
backgroundColor: gradientFill,
|
backgroundColor: gradientFill,
|
||||||
pointBackgroundColor: 'white',
|
pointBackgroundColor: 'white',
|
||||||
pointRadius: 4,
|
pointRadius: 4,
|
||||||
pointHoverRadius: 6,
|
pointHoverRadius: 6,
|
||||||
pointHoverBorderWidth: 4,
|
pointHoverBorderWidth: 4,
|
||||||
borderWidth: 2,
|
borderWidth: 4,
|
||||||
tension: 0.3
|
tension: 0.3,
|
||||||
|
color: textColor
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
responsive: true,
|
responsive: true,
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scales: {
|
scales: {
|
||||||
y: {
|
y: {
|
||||||
|
ticks: {
|
||||||
|
color: textColor
|
||||||
|
},
|
||||||
|
// display: false,
|
||||||
beginAtZero: true
|
beginAtZero: true
|
||||||
},
|
},
|
||||||
x: {
|
x: {
|
||||||
|
ticks: {
|
||||||
|
color: textColor
|
||||||
|
},
|
||||||
|
// display: false,
|
||||||
grid: {
|
grid: {
|
||||||
display: false
|
display: false
|
||||||
}
|
}
|
||||||
@ -676,6 +698,15 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getRef("theme_switcher").addEventListener("change", function (e) {
|
||||||
|
selectGraphColors()
|
||||||
|
myChart.data.datasets[0].borderColor = lineColor
|
||||||
|
myChart.data.datasets[0].backgroundColor = gradientFill
|
||||||
|
myChart.options.scales.x.ticks.color = textColor;
|
||||||
|
myChart.options.scales.y.ticks.color = textColor;
|
||||||
|
myChart.update()
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
2
ico.html
2
ico.html
@ -101,7 +101,7 @@
|
|||||||
<a class="room-tile room-tile--main" href="#investor_room">
|
<a class="room-tile room-tile--main" href="#investor_room">
|
||||||
<div class="tile-content">
|
<div class="tile-content">
|
||||||
<div class="grid flow-column gap-1 justify-start align-center">
|
<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>
|
<svg class="room-tile__icon investors-icon" id="f4f25b2f-c031-4b25-9376-2f5094dcb7eb" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M14,14.23h0a4.36,4.36,0,0,1,4.36,4.12,19.55,19.55,0,0,1-1.12,6.43,8.16,8.16,0,0,1-3.55,2.42,8.16,8.16,0,0,1-3.52-2.42A19.5,19.5,0,0,1,9,18.24,4.31,4.31,0,0,1,10,15.42a4.86,4.86,0,0,1,3.61-1.19H14m0-2h-.32C6.69,12.23,7,18.3,7,18.3A21.51,21.51,0,0,0,8.3,25.62c.61,1.23,3.7,3.58,5.33,3.58h0c1.63,0,4.71-2.35,5.33-3.58a21.51,21.51,0,0,0,1.3-7.32h0A6.38,6.38,0,0,0,14,12.23Z"/><path d="M50.71,14.23h0a4.36,4.36,0,0,1,4.36,4.11,19.62,19.62,0,0,1-1.18,6.44A8.19,8.19,0,0,1,50.4,27.2a8.25,8.25,0,0,1-3.53-2.42,20,20,0,0,1-1.17-6.5v-.06a4.35,4.35,0,0,1,1-2.78,4.87,4.87,0,0,1,3.64-1.21h.32m0-2h-.32c-7,0-6.69,6.07-6.69,6.07a22.05,22.05,0,0,0,1.35,7.32c.62,1.23,3.7,3.58,5.34,3.58s4.72-2.35,5.33-3.58a21.76,21.76,0,0,0,1.35-7.32v0a6.36,6.36,0,0,0-6.35-6.05Z"/><path d="M32,11.9a6.51,6.51,0,0,1,7,6.25,27.22,27.22,0,0,1-1.66,9c-.67,1.19-4.1,3.65-5.36,3.65h-.19a11.61,11.61,0,0,1-5.15-3.62A27.19,27.19,0,0,1,25,18.1V18a6.62,6.62,0,0,1,1.64-4.32A7.18,7.18,0,0,1,32,11.9m0-2c-9.35,0-9,8.2-9,8.2A29.19,29.19,0,0,0,24.81,28c.83,1.66,5,4.82,7.2,4.82l0,0c2.2,0,6.37-3.16,7.19-4.82A29.05,29.05,0,0,0,41,18.11s-.32-8.2-9-8.2Z"/><path d="M37.72,36.28c2,2,4.82,3.18,7.58,4.31l2,.82a14.53,14.53,0,0,1,1.1,6.47A31.12,31.12,0,0,1,32.78,52.1H31.24a31.13,31.13,0,0,1-15.62-4.23,14.49,14.49,0,0,1,1.1-6.46l1.94-.82c2.77-1.13,5.6-2.3,7.58-4.3a14,14,0,0,0,5.2,2.65A1.81,1.81,0,0,0,32,39a2.22,2.22,0,0,0,.51-.06,14,14,0,0,0,5.25-2.67m.23-3A11.93,11.93,0,0,1,32,37,12,12,0,0,1,26,33.28c-1.77,3.32-6.18,4.57-10.34,6.4-1.69.71-3.1,9.88-1.12,9.88a33.06,33.06,0,0,0,16.69,4.53h1.54a33,33,0,0,0,16.64-4.52c2,0,.58-9.18-1.13-9.89-4.16-1.83-8.57-3.08-10.34-6.4Z"/><path d="M17.82,32.42a10,10,0,0,0,1.53,1.12c-1,.49-2.06.92-3,1.28l-.05,0,0,0c-.5.23-1,.44-1.5.65l-.74.32c-2.5,1-3.65,4.22-4.17,6.86A22.54,22.54,0,0,1,2,40a11,11,0,0,1,.7-4.06L4,35.4a18.53,18.53,0,0,0,5.43-3,10.89,10.89,0,0,0,3.67,1.78l.51.13.52-.13a10.87,10.87,0,0,0,3.7-1.79m.19-2.9a8.77,8.77,0,0,1-4.4,2.75,8.73,8.73,0,0,1-4.4-2.75C7.9,32,4.63,32.89,1.55,34.25c-1.26.52-2.3,7.31-.84,7.31a24.5,24.5,0,0,0,10.86,3.31c.34-3,1.31-6.38,3.27-7.2.75-.33,1.53-.65,2.29-1,2.49-1,4.85-2,6.22-3.44-2.27-.9-4.34-1.87-5.34-3.71Z"/><path d="M54.58,32.43a18.28,18.28,0,0,0,5.43,3l1.29.53a11.32,11.32,0,0,1,.7,4.12,22.58,22.58,0,0,1-7.85,2.68C53.67,40.28,52.56,37,50,35.9c-.8-.4-1.62-.74-2.35-1-1-.43-2-.85-3-1.31a9.45,9.45,0,0,0,1.53-1.13,10.93,10.93,0,0,0,3.66,1.78l.52.13.52-.13a11,11,0,0,0,3.67-1.78m.21-2.91a8.77,8.77,0,0,1-4.4,2.75A8.77,8.77,0,0,1,46,29.52c-1,1.84-3,2.81-5.32,3.75,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21A24.5,24.5,0,0,0,63.3,41.61c1.44,0,.4-6.84-.86-7.36-3.08-1.36-6.34-2.27-7.65-4.73Z"/></svg>
|
||||||
<h4 class="room-tile__title">Investors</h4>
|
<h4 class="room-tile__title">Investors</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user