RanchiMall/ranchimall
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

major code refactoring

Browse Source
This commit is contained in:
sairaj mote 2022-12-09 20:17:51 +05:30
parent 2ff278ebb8
commit 8f2e3c195f
17 changed files with 2491 additions and 5613 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
assets/css/main.css
View File

@ -1,7 +1,6 @@
* :not(ol) { * :not(ol) {
padding: 0; padding: 0;
margin: 0; margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
font-family: "Roboto Slab", serif; font-family: "Roboto Slab", serif;
} }
@ -11,19 +10,19 @@
} }
body { body {
--accent-color: #E72C37; --accent-color: #e72c37;
--light-shade: rgba(var(--text-color), 0.06); --light-shade: rgba(var(--text-color), 0.06);
--text-color: 17, 17, 17; --text-color: 17, 17, 17;
--text-color-light: 100, 100, 100; --text-color-light: 100, 100, 100;
--foreground-color: 255, 255, 255; --foreground-color: 255, 255, 255;
--background-color: #F6f6f6; --background-color: #f6f6f6;
--error-color: red; --error-color: red;
--green: #007936; --green: #007936;
--banner-color: #1E88E5; --banner-color: #1e88e5;
--secondary-text-color: #034baa; --secondary-text-color: #034baa;
--font-weight-factor: 1; --font-weight-factor: 1;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
height: calc(100%); height: 100%;
background: var(--background-color); background: var(--background-color);
} }
@ -89,7 +88,8 @@ p {
} }
img { img {
object-fit: cover; -o-object-fit: cover;
object-fit: cover;
} }
a { a {
@ -171,6 +171,10 @@ ol[type="1"] {
display: flex; display: flex;
} }
.flex-wrap {
flex-wrap: wrap;
}
.grid { .grid {
display: grid; display: grid;
} }
@ -335,8 +339,6 @@ ol[type="1"] {
word-wrap: break-word; word-wrap: break-word;
-ms-word-break: break-all; -ms-word-break: break-all;
word-break: break-word; word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto; -webkit-hyphens: auto;
hyphens: auto; hyphens: auto;
} }
@ -350,8 +352,8 @@ ol[type="1"] {
} }
.icon { .icon {
width: 1.5rem; width: 1.2rem;
height: 1.5rem; height: 1.2rem;
fill: rgba(var(--text-color), 0.9); fill: rgba(var(--text-color), 0.9);
} }
@ -452,7 +454,7 @@ ol[type="1"] {
} }
#elevator_popup { #elevator_popup {
position: absolute; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0; top: 0;
@ -465,6 +467,7 @@ ol[type="1"] {
} }
.elevator__header { .elevator__header {
position: -webkit-sticky;
position: sticky; position: sticky;
top: 0; top: 0;
padding: 1.2rem 1.5rem; padding: 1.2rem 1.5rem;
@ -496,6 +499,7 @@ ol[type="1"] {
} }
.floor_list__header { .floor_list__header {
position: -webkit-sticky;
position: sticky; position: sticky;
top: 0; top: 0;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
@ -523,7 +527,9 @@ ol[type="1"] {
.outlet-list__item { .outlet-list__item {
display: grid; display: grid;
user-select: none; -webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: min(50ch, 100%); width: min(50ch, 100%);
counter-increment: outlet-counter; counter-increment: outlet-counter;
} }
@ -578,46 +584,31 @@ ol[type="1"] {
} }
#main_header { #main_header {
position: relative; position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
background: var(--background-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem; padding: 1rem;
grid-template-columns: repeat(3, 1fr);
} }
#elevator_button { #elevator_button {
justify-self: flex-start; justify-self: flex-start;
margin-left: -1rem; margin-left: -1rem;
} }
#elevator_button .icon {
width: 1.7rem; .main-logo {
height: 1.7rem; position: absolute;
left: 50%;
transform: translateX(-50%);
} }
#main_header__logo { #main_header__logo {
height: 1.8rem;
width: 1.8rem;
}
.theme-switcher {
position: relative;
justify-self: flex-end;
width: 1.5rem;
height: 1.5rem; height: 1.5rem;
cursor: pointer; width: 1.5rem;
-webkit-tap-highlight-color: transparent;
}
.theme-switcher .icon {
position: absolute;
transition: transform 0.6s;
}
.theme-switcher__checkbox {
display: none;
}
.theme-switcher__checkbox:checked ~ .moon-icon {
transform: scale(0) rotate(90deg);
}
.theme-switcher__checkbox:not(:checked) ~ .sun-icon {
transform: scale(0) rotate(-90deg);
} }
.page, .page,
@ -642,13 +633,11 @@ ol[type="1"] {
#home_page { #home_page {
will-change: scroll-position; will-change: scroll-position;
overflow-y: auto;
max-height: calc(100vh - 5.2rem);
grid-template-columns: 2rem 1fr;
scroll-behavior: smooth; scroll-behavior: smooth;
} }
#floor_line_map { #floor_line_map {
position: -webkit-sticky;
position: sticky; position: sticky;
top: 1rem; top: 1rem;
height: 40vh; height: 40vh;
@ -697,7 +686,9 @@ ol[type="1"] {
align-items: center; align-items: center;
left: 0.2rem; left: 0.2rem;
margin-top: -1rem; margin-top: -1rem;
user-select: none; -webkit-user-select: none;
-moz-user-select: none;
user-select: none;
transition: transform 0.3s; transition: transform 0.3s;
} }
@ -728,10 +719,6 @@ ol[type="1"] {
transition: box-shadow 0.3s, opacity 0.3s; transition: box-shadow 0.3s, opacity 0.3s;
} }
#floor_container {
width: calc(100% - 1rem);
}
.floor { .floor {
padding-bottom: 3rem; padding-bottom: 3rem;
width: 100%; width: 100%;
@ -899,7 +886,8 @@ ol[type="1"] {
border-radius: 0.5rem; border-radius: 0.5rem;
height: 10rem; height: 10rem;
width: 10rem; width: 10rem;
object-position: top; -o-object-position: top;
object-position: top;
border-radius: 50%; border-radius: 50%;
} }
@ -944,12 +932,12 @@ ol[type="1"] {
.motivated { .motivated {
color: black; color: black;
background-color: #FFCA28; background-color: #ffca28;
} }
.passionate { .passionate {
color: black; color: black;
background-color: #00E676; background-color: #00e676;
} }
#intern_level_popup { #intern_level_popup {
@ -1011,8 +999,6 @@ ol[type="1"] {
} }
.outlet-label .icon { .outlet-label .icon {
grid-area: icon; grid-area: icon;
height: 1.6rem;
width: 1.6rem;
fill: var(--accent-color); fill: var(--accent-color);
justify-self: flex-end; justify-self: flex-end;
} }
@ -1199,6 +1185,7 @@ ol[type="1"] {
.room-container__header { .room-container__header {
display: flex; display: flex;
position: -webkit-sticky;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 2; z-index: 2;
@ -1221,22 +1208,10 @@ ol[type="1"] {
font-weight: calc(700 * var(--font-weight-factor)); font-weight: calc(700 * var(--font-weight-factor));
} }
/* .room-carousel{
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
height: 100%;
scroll-behavior: smooth;
& > *{
min-width: 100%;
scroll-snap-align: start;
}
} */
.room-container__footer { .room-container__footer {
position: -webkit-sticky;
position: sticky; position: sticky;
display: flex; display: flex;
gap: 1rem;
bottom: 0; bottom: 0;
z-index: 2; z-index: 2;
overflow-x: auto; overflow-x: auto;
@ -1245,6 +1220,9 @@ ol[type="1"] {
margin-left: -3rem; margin-left: -3rem;
background: linear-gradient(0deg, var(--background-color) 70%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(0deg, var(--background-color) 70%, rgba(0, 0, 0, 0) 100%);
} }
.room-container__footer > h4 {
margin-right: 1rem;
}
#room_switcher { #room_switcher {
display: grid; display: grid;
@ -1405,48 +1383,37 @@ ol[type="1"] {
.hide-on-mobile { .hide-on-mobile {
display: none; display: none;
} }
.outlet-preview { .outlet-preview {
gap: 1.5rem; gap: 1.5rem;
} }
.outlet-preview__number-container { .outlet-preview__number-container {
grid-row: 1/2; grid-row: 1/2;
} }
.outlet-preview__number::after { .outlet-preview__number::after {
left: 0; left: 0;
} }
.outlet-preview__number, .outlet-preview__number,
.outlet-label__no { .outlet-label__no {
font-size: 5rem; font-size: 5rem;
} }
#outlet_switcher { #outlet_switcher {
width: calc(100% - 2rem); width: calc(100% - 2rem);
} }
.outlet-label { .outlet-label {
grid-row: 1/2; grid-row: 1/2;
} }
.outlet-hero-section { .outlet-hero-section {
margin-top: 2rem; margin-top: 2rem;
} }
.outlet-label__no { .outlet-label__no {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.series-container { .series-container {
gap: 1rem; gap: 1rem;
} }
.outlet-list__item .icon { .outlet-list__item .icon {
margin-left: auto; margin-left: auto;
} }
.rooms__header { .rooms__header {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
@ -1454,7 +1421,6 @@ ol[type="1"] {
.rooms__header scroll-tab-header { .rooms__header scroll-tab-header {
width: calc(100vw - 2rem); width: calc(100vw - 2rem);
} }
.room-tile { .room-tile {
padding-top: 100%; padding-top: 100%;
} }
@ -1466,62 +1432,51 @@ ol[type="1"] {
padding: 1rem; padding: 1rem;
position: absolute; position: absolute;
} }
.room-tile__icon { .room-tile__icon {
height: 4rem; height: 4rem;
width: 4rem; width: 4rem;
} }
.investors-icon { .investors-icon {
height: 6rem; height: 6rem;
width: 6rem; width: 6rem;
} }
#hero_title { #hero_title {
margin-top: 2rem; margin-top: 2rem;
} }
.ext-link-tile { .ext-link-tile {
padding: 1rem; padding: 1rem;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
} }
.link-container { .link-container {
margin-top: 1.5rem; margin-top: 1.5rem;
} }
} }
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {
#home_page, .page, #home_page,
.page,
.page-layout { .page-layout {
grid-template-columns: 1fr 90vw 1fr; grid-template-columns: 1fr 90vw 1fr;
} }
.h1 { .h1 {
font-size: 4rem; font-size: 4rem;
} }
.h2 { .h2 {
font-size: 2.5rem; font-size: 2.5rem;
} }
.h3 { .h3 {
font-size: 1.5rem; font-size: 1.5rem;
} }
.h4 { .h4 {
font-size: 1.1rem; font-size: 1.1rem;
} }
#main_header { #main_header {
padding: 1.2rem 2rem; padding: 1.2rem 2rem;
} }
#floor_list { #floor_list {
gap: 8vw; gap: 8vw;
padding: 0 8vw 4rem 8vw; padding: 0 8vw 4rem 8vw;
} }
.floor_list__item { .floor_list__item {
position: relative; position: relative;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@ -1552,7 +1507,6 @@ ol[type="1"] {
grid-row: 1/2; grid-row: 1/2;
grid-column: 1/2; grid-column: 1/2;
} }
.floor__header::before { .floor__header::before {
left: -10%; left: -10%;
width: 10%; width: 10%;
@ -1561,11 +1515,9 @@ ol[type="1"] {
right: -10%; right: -10%;
width: 10%; width: 10%;
} }
.outlets-container { .outlets-container {
gap: 1.5rem; gap: 1.5rem;
} }
.outlet-preview { .outlet-preview {
gap: 1rem; gap: 1rem;
padding: 5rem 4rem; padding: 5rem 4rem;
@ -1593,59 +1545,46 @@ ol[type="1"] {
.outlet-preview:nth-of-type(odd) .outlet-preview__number::after { .outlet-preview:nth-of-type(odd) .outlet-preview__number::after {
right: 0; right: 0;
} }
.outlet__title { .outlet__title {
font-size: 2.5rem; font-size: 2.5rem;
} }
#outlet_switcher { #outlet_switcher {
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
} }
.outlet-label { .outlet-label {
grid-column: 2/3; grid-column: 2/3;
justify-self: right; justify-self: right;
} }
.outlet-label__no { .outlet-label__no {
justify-content: flex-end; justify-content: flex-end;
} }
.outlet-hero-section { .outlet-hero-section {
position: relative; position: relative;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
gap: 1.5rem; gap: 1.5rem;
margin-top: 4rem; margin-top: 4rem;
} }
.auto-grid-layout { .auto-grid-layout {
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
} }
.rooms-layout { .rooms-layout {
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
} }
.room-container__header { .room-container__header {
padding: 1.5rem 0; padding: 1.5rem 0;
} }
.people-grid { .people-grid {
gap: 5rem 3rem; gap: 5rem 3rem;
} }
#hero_title { #hero_title {
font-size: 3rem; font-size: 3rem;
} }
.feature__title { .feature__title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.features-grid { .features-grid {
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
} }
.graph-container { .graph-container {
width: 80%; width: 80%;
min-height: 60vh; min-height: 60vh;
@ -1653,23 +1592,21 @@ ol[type="1"] {
} }
} }
@media only screen and (min-width: 1280px) { @media only screen and (min-width: 1280px) {
#home_page, .page, #home_page,
.page,
.page-layout { .page-layout {
grid-template-columns: 1fr 85vw 1fr; grid-template-columns: 1fr 85vw 1fr;
} }
.grid-3 { .grid-3 {
justify-content: center; justify-content: center;
} }
.grid-3 > .grid { .grid-3 > .grid {
width: 100%; width: 100%;
} }
.rooms-layout { .rooms-layout {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-auto-flow: column; grid-auto-flow: column;
} }
.link-container { .link-container {
grid-template-columns: auto auto; grid-template-columns: auto auto;
} }
@ -1679,7 +1616,6 @@ ol[type="1"] {
width: 0.5rem; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgba(var(--text-color), 0.3); background: rgba(var(--text-color), 0.3);
border-radius: 1rem; border-radius: 1rem;
@ -1687,7 +1623,6 @@ ol[type="1"] {
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: rgba(var(--text-color), 0.5); background: rgba(var(--text-color), 0.5);
} }
.page-link { .page-link {
cursor: pointer; cursor: pointer;
transition: color 0.3s; transition: color 0.3s;
@ -1698,11 +1633,9 @@ ol[type="1"] {
.page-link:hover .icon { .page-link:hover .icon {
fill: var(--accent-color); fill: var(--accent-color);
} }
.floor__button:hover { .floor__button:hover {
background: var(--background-color); background: var(--background-color);
} }
.outlet-list__item .icon { .outlet-list__item .icon {
fill: var(--accent-color); fill: var(--accent-color);
opacity: 0; opacity: 0;
@ -1714,7 +1647,6 @@ ol[type="1"] {
opacity: 1; opacity: 1;
transform: translateX(0); transform: translateX(0);
} }
.intern__level { .intern__level {
transition: transform 0.3s; transition: transform 0.3s;
} }

2
assets/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

2787
assets/css/main.scss
View File

File diff suppressed because it is too large Load Diff

BIN
assets/investors/Margot Borden.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.3 KiB

After

Width:  |  Height:  |  Size: 125 KiB

BIN
assets/investors/Puneet Sondh.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
assets/investors/Vikash Saw.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

3295
assets/js/components.js
View File

File diff suppressed because one or more lines are too long

508
assets/js/index.js
View File

@ -1,5 +1,18 @@
const domRefs = {};
"use strict";
// Global variables
const { html, render: renderElem } = uhtml;
//Checks for internet connection status
if (!navigator.onLine)
floGlobals.connectionErrorNotification = notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error')
window.addEventListener('offline', () => {
floGlobals.connectionErrorNotification = notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error')
})
window.addEventListener('online', () => {
getRef('notification_drawer').remove(floGlobals.connectionErrorNotification)
notify('We are back online.', 'success')
})
const domRefs = {};
function getRef(elementId) { function getRef(elementId) {
if (!domRefs.hasOwnProperty(elementId)) { if (!domRefs.hasOwnProperty(elementId)) {
domRefs[elementId] = { domRefs[elementId] = {
@ -20,70 +33,13 @@ function getRef(elementId) {
} }
function create(tagName, obj) { function create(tagName, obj) {
const {className, text} = obj const { className, text } = obj
const elem = document.createElement(tagName) const elem = document.createElement(tagName)
elem.className = className elem.className = className
elem.textContent = text elem.textContent = text
return elem return elem
} }
//Checks for internet connection status
if (!navigator.onLine)
notify(
"There seems to be a problem connecting to the internet, Please check you internet connection.",
"error",
"",
true
);
window.addEventListener("offline", () => {
notify(
"There seems to be a problem connecting to the internet, Please check you internet connection.",
"error",
true,
true
);
});
window.addEventListener("online", () => {
getRef("notification_drawer").clearAll();
notify("We are back online.", "success");
});
if (getRef("theme_switcher")) {
if (localStorage.theme === "dark") {
nightlight();
getRef("theme_switcher").checked = true;
} else if (localStorage.theme === "light"){
daylight();
getRef("theme_switcher").checked = false;
}
else {
if (window.matchMedia(`(prefers-color-scheme: dark)`).matches) {
nightlight();
getRef("theme_switcher").checked = true;
} else {
daylight();
getRef("theme_switcher").checked = false;
}
}
function daylight() {
document.body.setAttribute("data-theme", "light");
}
function nightlight() {
document.body.setAttribute("data-theme", "dark");
}
getRef("theme_switcher").addEventListener("change", function (e) {
if (this.checked) {
nightlight();
localStorage.setItem("theme", "dark");
} else {
daylight();
localStorage.setItem("theme", "light");
}
});
}
function setAttributes(el, attrs) { function setAttributes(el, attrs) {
for (key in attrs) { for (key in attrs) {
el.setAttribute(key, attrs[key]); el.setAttribute(key, attrs[key]);
@ -121,14 +77,21 @@ function randomColor() {
} }
//Function for displaying toast notifications. pass in error for mode param if you want to show an error. //Function for displaying toast notifications. pass in error for mode param if you want to show an error.
function notify(message, mode, pinned, sound) { function notify(message, mode, options = {}) {
if (mode === "error") console.error(message); let icon
else console.log(message); switch (mode) {
getRef("notification_drawer").push(message, mode, pinned); case 'success':
if (navigator.onLine && sound) { icon = `<svg class="icon icon--success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>`
getRef("notification_sound").currentTime = 0; break;
getRef("notification_sound").play(); case 'error':
icon = `<svg class="icon icon--error" 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 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>`
options.pinned = true
break;
} }
if (mode === 'error') {
console.error(message)
}
return getRef("notification_drawer").push(message, { icon, ...options });
} }
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
@ -249,27 +212,40 @@ const siteMap = [
outlets: [ outlets: [
{ {
name: "Bitcoin Bonds", name: "Bitcoin Bonds",
url: "bitcoinbonds.html", outletLinks: [
{
label: "Explore",
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 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.`, Bitcoin prices fall below acquisition price.`,
// isSold: true,
buyUrl: `purchase_room`,
status: `We are servicing current customers only. A new Blockchain-based version of Bitcoin Bonds will be available soon.` status: `We are servicing current customers only. A new Blockchain-based version of Bitcoin Bonds will be available soon.`
}, },
{ {
name: `Bob's Fund`, name: `Bob's Fund`,
url: `bob'sfund.html`, outletLinks: [
{
label: "Explore",
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 must hold for 20 years.`, 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.` 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.html", outletLinks: [
{
label: "Explore",
url: "ico.html",
},
{
label: "Buy",
url: "ico.html#purchase_room",
},
],
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,
buyUrl: `purchase_room`
}, },
], ],
}, },
@ -357,191 +333,190 @@ const siteMap = [
} }
], ],
}, */ }, */
{
floor: 'Internship',
brief: ``,
outlets: [
{
name: "RanchiMall Internship Blockchain contract",
brief: `This outlet has the list of all active projects being executed through our internship program. Interns can apply or they can join active projects here.`,
outletLinks: [
{
label: "Explore",
url: "https://ranchimall.github.io/RIBC/",
outbound: true,
}
],
},
{
name: `Certificates`,
brief: `This outlet has access to blockchain verification to all of RanchiMall issued Internship & Employment certificates`,
outletLinks: [
{
label: "See Intern Payments",
url: "https://ranchimall.github.io/ribcpayments/",
outbound: true,
},
{
label: "Verify Certificate",
url: "verify.html",
},
{
label: "Check issued certificates",
url: "https://www.ranchimall.net/certify/",
outbound: true,
}
],
}
],
},
]; ];
// templates
const bitBondRowTemplate = document.createElement('template')
bitBondRowTemplate.innerHTML = `
<div class="bit-bond-series__row grid">
<div class="grid">
<h5 class="label color-0-8 weight-500">Series</h5>
<h3 class="value original-value"></h3>
</div>
<div class="flex align-center space-between">
<div class="grid">
<h5 class="label color-0-8 weight-500">Invested</h5>
<h3 class="value">$100</h3>
</div>
<div class="grid justify-right text-align-right">
<h5 class="label color-0-8 weight-500">Current value</h5>
<h3 class="value current-value" style="color: var(--green)"></h3>
<div class="flex align-center">
<svg class="icon up-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z"/></svg>
<span class="percent-gain"></span>
<span class="time-elapsed"></span>
</div>
</div>
</div>
</div>
`
const bobsFundRowTemplate = document.createElement('template')
bobsFundRowTemplate.innerHTML = `
<div class="bob-fund__row grid">
<div class="grid">
<h5 class="label color-0-8 weight-500">FLO ID</h5>
<h3 class="person__name breakable"></h3>
</div>
<div class="flex">
<div class="grid">
<h5 class="label color-0-8 weight-500">Invested</h5>
<h3 class="value original-value"></h3>
</div>
<div class="grid justify-right text-align-right">
<h4 class="label color-0-8 weight-500">Current value</h4>
<h3 class="value current-value" style="color: var(--green)"></h3>
<div class="flex align-center">
<svg class="icon up-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z"/></svg>
<span class="percent-gain"></span>
<span class="time-elapsed"></span>
</div>
</div>
</div>
</div>
`
const floorListitemTemplate = document.createElement('template')
floorListitemTemplate.innerHTML = `
<li class="floor_list__item">
<button class="floor_list__header floor__button">
<h2 class="h2 floor-num">Floor</h2>
<h3 class="h3 accent-color"></h3>
</button>
<ul class="outlet-list grid"></ul>
</li>
`
const outletListitemTemplate = document.createElement('template')
outletListitemTemplate.innerHTML = `
<li class="outlet-list__item interact">
<a class="grid align-center flow-column gap-1 justify-start">
<div>
<h4 class="outlet-title"></h4>
<p class="outlet-brief"></p>
</div>
<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="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>
</a>
</li>
`
function formatAmount(amount, currency = 'USD') {
return amount.toLocaleString(currency === 'USD'? 'en-US': 'en-IN', { style: 'currency', currency: currency });
}
const render = { const render = {
bitBondRow(obj) { bitBondRow(obj) {
const { series, currentValue, timeElapsed, percentGain } = obj; const { series, currentValue, timeElapsed, percentGain } = obj;
const row = bitBondRowTemplate.content.cloneNode(true); return html`
row.querySelector(".original-value").textContent = series.toLocaleString(`en-US`, { style: 'currency', currency: 'USD' }); <div class="bit-bond-series__row grid">
row.querySelector(".current-value").textContent = currentValue.toLocaleString(`en-US`, { style: 'currency', currency: 'USD' }); <div class="grid">
row.querySelector(".time-elapsed").textContent = `In last ${timeElapsed} years`; <h5 class="label color-0-8 weight-500">Series</h5>
row.querySelector(".percent-gain").textContent = `${percentGain}%`; <h3 class="value original-value">${formatAmount(series)}</h3>
return row; </div>
}, <div class="flex align-center space-between">
bobFundRow(obj) { <div class="grid">
const { investorName, invested, floId, currentValue, timeElapsed, gain } = obj; <h5 class="label color-0-8 weight-500">Invested</h5>
const row = bobsFundRowTemplate.content.cloneNode(true); <h3 class="value">$100</h3>
row.querySelector(".person__name").textContent = floId; </div>
row.querySelector(".original-value").textContent = `${invested.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })}`; <div class="grid justify-right text-align-right">
row.querySelector(".current-value").textContent = `${currentValue.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })}`; <h5 class="label color-0-8 weight-500">Current value</h5>
row.querySelector(".percent-gain").textContent = `${gain}%`; <h3 class="value current-value" style="color: var(--green)">${formatAmount(currentValue)}</h3>
row.querySelector(".time-elapsed").textContent = `In last ${timeElapsed} years`; <div class="flex align-center">
return row; <svg class="icon up-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z"/></svg>
}, <span class="percent-gain">${ `${percentGain}%`}</span>
icoInvestorRow(obj, options) { <span class="time-elapsed">${`In last ${timeElapsed} years`}</span>
const { extension, investorName, bio, contribution } = obj; </div>
const { thumbnail } = options; </div>
const row = getRef("ico_investor_row").content.cloneNode(true); </div>
const card = row.querySelector(".person-card"); </div>
const folder = thumbnail ? "investors-thumbnail" : "investors"; `;
const investorImage = row.querySelector(".person__image"); },
if (thumbnail) card.classList.add("person-card--small"); bobFundRow(obj) {
else card.classList.add("person-card--big"); const { invested, floId, currentValue, timeElapsed, gain } = obj;
investorImage.src = `assets/${folder}/${investorName}.${extension}`; return html`
investorImage.setAttribute("alt", `${investorName} profile picture`); <div class="bob-fund__row grid">
row.querySelector(".person__name").textContent = investorName; <div class="grid">
row.querySelector(".investor__bio").textContent = bio; <h5 class="label color-0-8 weight-500">FLO ID</h5>
row.querySelector(".investor__contribution").textContent = contribution; <h3 class="person__name breakable">${floId}</h3>
return row; </div>
}, <div class="flex">
internCard(obj) { <div class="grid">
const { extension, internName, level, floId, project } = obj; <h5 class="label color-0-8 weight-500">Invested</h5>
const card = getRef("intern_card_template").content.cloneNode(true).firstElementChild; <h3 class="value original-value">${formatAmount(invested, 'INR')}</h3>
const investorImage = card.querySelector(".person__image"); </div>
investorImage.src = `assets/interns/${internName}.${extension}`; <div class="grid justify-right text-align-right">
investorImage.setAttribute("alt", `${internName} profile picture`); <h4 class="label color-0-8 weight-500">Current value</h4>
card.querySelector(".intern__level").classList.add(level.toLowerCase()) <h3 class="value current-value" style="color: var(--green)">${formatAmount(currentValue)}</h3>
card.querySelector(".intern__level").textContent = level; <div class="flex align-center">
card.querySelector(".person__name").textContent = internName; <svg class="icon up-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z"/></svg>
card.querySelector(".intern-flo-id").textContent = floId; <span class="percent-gain">${`${gain}%`}</span>
card.querySelector(".intern__project").textContent = project; <span class="time-elapsed">${`In last ${timeElapsed} years`}</span>
return card; </div>
</div>
</div>
</div>
`;
},
icoInvestorRow(obj, options) {
const { extension, investorName, bio, contribution } = obj;
const { thumbnail } = options;
const folder = thumbnail ? "investors-thumbnail" : "investors";
return html`
<div class=${`person-card investor-card grid gap-1-5 ${thumbnail? 'person-card--small': 'person-card--big'}`} >
<img class="person__image" src=${`assets/${folder}/${investorName}.${extension}`} alt=${`${investorName} profile picture`} loading="lazy">
<div class="grid">
<h3 class="person__name value capitalize">${investorName}</h3>
<p class="investor__bio color-0-8">${bio}</p>
</div>
<div class="grid investor__contribution-container">
<p class="investor__contribution weight-700">${contribution}</p>
</div>
</div>
`;
}, },
// internCard(obj) {
// const { extension, internName, level, floId, project } = obj;
// const card = getRef("intern_card_template").content.cloneNode(true).firstElementChild;
// const investorImage = card.querySelector(".person__image");
// investorImage.src = `assets/interns/${internName}.${extension}`;
// investorImage.setAttribute("alt", `${internName} profile picture`);
// card.querySelector(".intern__level").classList.add(level.toLowerCase())
// card.querySelector(".intern__level").textContent = level;
// card.querySelector(".person__name").textContent = internName;
// card.querySelector(".intern-flo-id").textContent = floId;
// card.querySelector(".intern__project").textContent = project;
// return card;
// },
floorLabel(floorNumber, offsetTop) { floorLabel(floorNumber, offsetTop) {
const floorLabel = getRef("floor_indicator_template").content.cloneNode( return html`
true <div class="floor-label interact" style=${`top: ${offsetTop}px`} data-target=${`floor_${floorNumber}`}>
).firstElementChild; <span class="floor-circle"></span>
floorLabel.setAttribute("style", `top: ${offsetTop}px`); </div>
floorLabel.dataset.target = `floor_${floorNumber}`; `;
return floorLabel;
}, },
outletListItem(outletObj) { outletListItem(outletObj) {
const { name, brief, url } = outletObj const { name, brief, outletLinks } = outletObj
const li = outletListitemTemplate.content.cloneNode(true).firstElementChild return html`
li.querySelector('a').href = `${url}` <li class="outlet-list__item interact">
li.querySelector('.outlet-title').textContent = name <a href=${outletLinks[0].url} class="grid align-center flow-column gap-1 justify-start">
// li.querySelector('.outlet-brief').textContent = brief ? brief : '' <div>
return li <h4 class="outlet-title">${name}</h4>
${brief ? html`<p class="outlet-brief">${brief}</p>` : ''}
</div>
<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="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>
</a>
</li>
`;
}, },
floorListitem(floorObj, index) { floorListItem(floorObj, index) {
const { floor, outlets } = floorObj const { floor, outlets } = floorObj
const li = floorListitemTemplate.content.cloneNode(true).firstElementChild const li = html`
li.firstElementChild.dataset.target = `floor_${index + 1}`; <li class="floor_list__item">
li.querySelector('.h3').textContent = floor <button class="floor_list__header floor__button" data-target=${`floor_${index + 1}`}>
li.querySelector('.floor-num').textContent = `floor ${index + 1}` <h2 class="h2 floor-num">${`floor ${index + 1}`}</h2>
<h3 class="h3 accent-color">${floor}</h3>
const h3 = document.createElement('h3') </button>
h3.classList.add('h3', 'weight-900', 'floor-list__outlet') <ul class="outlet-list grid">
h3.textContent = 'Outlets' <h3 class="h3 weight-900 floor-list__outlet">Outlets</h3>
${outlets.map(outlet => render.outletListItem(outlet))}
const frag = document.createDocumentFragment() </ul>
outlets.forEach(outlet => frag.append(render.outletListItem(outlet))) </li>
`;
li.querySelector('.outlet-list').append(h3, frag)
return li return li
}, },
outletSwitcherButton(outletObj, activeOutlet) { outletSwitcherButton(outletObj, activeOutlet) {
const { name, url } = outletObj const { name, outletLinks } = outletObj
const button = document.createElement('a') const button = document.createElement('a')
button.classList.add('outlet_switcher__button') button.classList.add('outlet_switcher__button')
if (activeOutlet === url) { if (activeOutlet === outletLinks[0].url) {
button.classList.add('outlet_switcher__button--active') button.classList.add('outlet_switcher__button--active')
} }
button.href = url button.href = outletLinks[0].url
button.textContent = name button.textContent = name
return button; return button;
}, },
statusBanner(bannerMsg) { statusBanner(bannerMsg) {
const banner = document.createElement('section') return html.node`
banner.classList.add('banner') <section class="banner">
banner.innerHTML = ` <p class="banner__text">${bannerMsg}</p>
<p class="banner__text">${bannerMsg}</p> <button class="close-button" onclick="this.parentNode.remove()">
<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>
<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>
</button> </section>
` `
return banner
} }
}; };
@ -739,44 +714,23 @@ function hideOutletSwitcher() {
let currentPage let currentPage
function renderSiteMap() { function renderSiteMap() {
const frag = document.createDocumentFragment() getRef('floor_list').append(html.node`${siteMap.map((floor, index) =>render.floorListItem(floor, index))}`)
siteMap.forEach((floor, index) => frag.append(render.floorListitem(floor, index)))
getRef('floor_list').append(frag)
const pathArray = location.pathname.split('/') const pathArray = location.pathname.split('/')
for (floor of siteMap) { siteMap.forEach((floor) => {
for (outlet of floor.outlets) { const matchedOutlet = floor.outlets.find(outlet => pathArray[pathArray.length - 1].includes(outlet.outletLinks[0].url))
currentPage = pathArray[pathArray.length - 1] if (matchedOutlet)
if (pathArray[pathArray.length - 1].includes(outlet.url)) { renderFloorOutlets(floor, matchedOutlet.outletLinks[0].url)
renderFloorOutlets(floor, outlet.url) })
break;
}
}
}
} }
renderSiteMap() renderSiteMap()
function renderFloorOutlets(floorObj, activeOutlet) { function renderFloorOutlets(floorObj, activeOutlet) {
const { floor, outlets } = floorObj const { floor, outlets } = floorObj
console.log(floor)
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
outlets.forEach(outlet => frag.append(render.outletSwitcherButton(outlet, activeOutlet))) outlets.forEach(outlet => frag.append(render.outletSwitcherButton(outlet, activeOutlet)))
getRef('outlet_switcher__outlet_container').append(frag) getRef('outlet_switcher__outlet_container').append(frag)
getRef('outlet_switcher__floor_num').textContent = floor getRef('outlet_switcher__floor_num').textContent = floor
let floorNum = -1 const outletNum = outlets.findIndex(o => o.outletLinks[0].url === activeOutlet)
let outletNum = -1
for (let i = 0; i < siteMap.length; i++) {
if (siteMap[i].floor === floor) {
floorNum = i
break
}
}
for (let i = 0; i < outlets.length; i++) {
if (outlets[i].url === activeOutlet) {
outletNum = i
break
}
}
// document.querySelector('.outlet-label__name').textContent = floorNum > -1 ? `Floor ${floorNum + 1} outlet ${outletNum + 1}` : ''
document.querySelector('.outlet-label__no').textContent = outletNum + 1 document.querySelector('.outlet-label__no').textContent = outletNum + 1
document.querySelector('.outlet-label__no').dataset.number = outletNum + 1 document.querySelector('.outlet-label__no').dataset.number = outletNum + 1
if (outlets[outletNum].hasOwnProperty('status')) { if (outlets[outletNum].hasOwnProperty('status')) {
@ -900,10 +854,10 @@ function showRoom(roomId, animate = false) {
roomContainer.classList.remove('hide-completely') roomContainer.classList.remove('hide-completely')
if (animate && !isRoomOpen) { if (animate && !isRoomOpen) {
roomContainer.animate(slideInDown, animeInOptions) roomContainer.animate(slideInDown, animeInOptions)
.onfinish = () => { .onfinish = () => {
getRef('expanding_tile').classList.add('hide-completely') getRef('expanding_tile').classList.add('hide-completely')
isRoomOpen = true isRoomOpen = true
} }
} }
else { else {
isRoomOpen = true isRoomOpen = true
@ -947,7 +901,7 @@ function renderRoomShorcuts() {
if (room.href.split('#').pop() !== window.location.hash.split('#').pop()) { if (room.href.split('#').pop() !== window.location.hash.split('#').pop()) {
const clone = room.cloneNode(true) const clone = room.cloneNode(true)
clone.classList.remove('room-tile', 'room-tile--main') clone.classList.remove('room-tile', 'room-tile--main')
if(clone.querySelector('img, svg, #performance_preview')) if (clone.querySelector('img, svg, #performance_preview'))
clone.querySelectorAll('img, svg, #performance_preview').forEach(elem => elem.remove()) clone.querySelectorAll('img, svg, #performance_preview').forEach(elem => elem.remove())
clone.classList.add('room-shortcut') clone.classList.add('room-shortcut')
frag.append(clone) frag.append(clone)
@ -964,19 +918,19 @@ const heroTitleObserver = new IntersectionObserver(entries => {
entries.forEach(entry => { entries.forEach(entry => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
getRef('room_title').animate(slideOutDown, animeInOptions) getRef('room_title').animate(slideOutDown, animeInOptions)
.onfinish = () => { .onfinish = () => {
getRef('room_title').classList.add('hide-completely') getRef('room_title').classList.add('hide-completely')
} }
} }
else { else {
if (isRoomOpen) if (isRoomOpen)
getRef('room_title').classList.remove('hide-completely') getRef('room_title').classList.remove('hide-completely')
getRef('room_title').animate(slideInUp, animeInOptions) getRef('room_title').animate(slideInUp, animeInOptions)
} }
}) })
}, },
{ {
threshold: 1 threshold: 1
} }
) )
@ -984,6 +938,6 @@ if (getRef('hero_title')) {
heroTitleObserver.observe(getRef('hero_title')) heroTitleObserver.observe(getRef('hero_title'))
} }
function getRandom(min, max){ function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min); return Math.floor(Math.random() * (max - min + 1) + min);
} }

267
bitcoinbonds.html
View File

@ -30,20 +30,22 @@
</section> </section>
<header id="main_header" class="grid align-center full-bleed"> <header id="main_header" class="grid align-center full-bleed">
<button id="elevator_button" class="button" onclick="showSiteMap()"> <button id="elevator_button" class="button" onclick="showSiteMap()">
<svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg> <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
<path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
</svg>
<span class="button__label"> <span class="button__label">
Elevator Elevator
</span> </span>
</button> </button>
<a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page"> <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
<svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg> <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
</svg>
<h4 class="h4 header__company-name">RanchiMall</h4> <h4 class="h4 header__company-name">RanchiMall</h4>
</a> </a>
<label class="theme-switcher" title="Change theme"> <theme-toggle></theme-toggle>
<input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
<svg class="icon moon-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="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
<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> </header>
<div id="outlet_switcher" class="grid gap-1-5 hide-completely"> <div id="outlet_switcher" class="grid gap-1-5 hide-completely">
<span id="outlet_switcher__floor_num" class="weight-500 color-0-8"></span> <span id="outlet_switcher__floor_num" class="weight-500 color-0-8"></span>
@ -55,12 +57,13 @@
<h2 class="h2 weight-700 margin-bottom-2r">Bitcoin Bonds</h2> <h2 class="h2 weight-700 margin-bottom-2r">Bitcoin Bonds</h2>
<h4 class="margin-bottom-1r">How does it work?</h4> <h4 class="margin-bottom-1r">How does it work?</h4>
<p class="margin-bottom-3r"> <p class="margin-bottom-3r">
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. 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. It offers full capital protection if Bitcoin prices fall below acquisition price.
</p> </p>
</div> </div>
<button class="outlet-label"> <button class="outlet-label">
<!-- <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <!-- <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 fill="none" d="M0 0h24v24H0z" />
<path <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" /> 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" />
@ -81,23 +84,38 @@
<a class="room-tile room-tile--main" href="#performance_room"> <a class="room-tile room-tile--main" href="#performance_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" 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> <h4 class="room-tile__title">Performance</h4>
</div> </div>
<div id="performance_preview"></div> <div id="performance_preview"></div>
</div> </div>
</a> </a>
<a class="room-tile" href="#product_room"> <a class="room-tile" href="#product_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="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> <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> <h4 class="room-tile__title">Product</h4>
</div> </div>
</div> </div>
</a> </a>
<!-- <a class="room-tile" href="#purchase_room"> <!-- <a class="room-tile" href="#purchase_room">
<div class="tile-content"> <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> <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> <h4 class="room-tile__title">Buy</h4>
@ -107,7 +125,10 @@
<section class="room-container hide-completely page-layout"> <section class="room-container hide-completely page-layout">
<header class="room-container__header"> <header class="room-container__header">
<button class="grid flow-column gap-1 align-center" onclick="hideRoom()"> <button class="grid flow-column gap-1 align-center" onclick="hideRoom()">
<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="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg> <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="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z" />
</svg>
<h3 id="room_title" class="section-header hide-completely"></h3> <h3 id="room_title" class="section-header hide-completely"></h3>
</button> </button>
</header> </header>
@ -128,85 +149,129 @@
<section class="features-grid"> <section class="features-grid">
<div class="feature"> <div class="feature">
<div class="feature__icon"> <div class="feature__icon">
<svg class="icon" id="f47905c4-be19-4535-912c-ac0a41d5362d" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M55.59,38a10.43,10.43,0,0,0-3.09-4.19,12.61,12.61,0,0,0-5.4-2.46,11.57,11.57,0,0,0,5.75-4.7,13.39,13.39,0,0,0,1.86-7q0-7.62-5.86-11.46c-3.64-2.39-8.62-3.65-14.91-3.82V0H25.38V4.28H21.7V0H13.14V4.28H7.42v7.84l5.75,1.22V50.7L7.42,51.91v7.81h6.69V64h8.56V59.72h3.68V64h8.56V59.72h.42q10.37,0,15.8-4.15t5.45-12.3A14.09,14.09,0,0,0,55.59,38ZM41.35,21.11A5.14,5.14,0,0,1,39,25.77q-2.34,1.52-7.07,1.51h-5.4V14.48h6q4.45,0,6.65,1.58A5.81,5.81,0,0,1,41.35,21.11ZM41.29,48q-2,1.56-6,1.56H26.54V36.11H36a9.61,9.61,0,0,1,4.19.78,5,5,0,0,1,2.36,2.36,9.14,9.14,0,0,1,.76,4A5.66,5.66,0,0,1,41.29,48Z"/></svg> <svg class="icon" id="f47905c4-be19-4535-912c-ac0a41d5362d" data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path
d="M55.59,38a10.43,10.43,0,0,0-3.09-4.19,12.61,12.61,0,0,0-5.4-2.46,11.57,11.57,0,0,0,5.75-4.7,13.39,13.39,0,0,0,1.86-7q0-7.62-5.86-11.46c-3.64-2.39-8.62-3.65-14.91-3.82V0H25.38V4.28H21.7V0H13.14V4.28H7.42v7.84l5.75,1.22V50.7L7.42,51.91v7.81h6.69V64h8.56V59.72h3.68V64h8.56V59.72h.42q10.37,0,15.8-4.15t5.45-12.3A14.09,14.09,0,0,0,55.59,38ZM41.35,21.11A5.14,5.14,0,0,1,39,25.77q-2.34,1.52-7.07,1.51h-5.4V14.48h6q4.45,0,6.65,1.58A5.81,5.81,0,0,1,41.35,21.11ZM41.29,48q-2,1.56-6,1.56H26.54V36.11H36a9.61,9.61,0,0,1,4.19.78,5,5,0,0,1,2.36,2.36,9.14,9.14,0,0,1,.76,4A5.66,5.66,0,0,1,41.29,48Z" />
</svg>
</div> </div>
<h4 class="feature__title">Bitcoin linked</h4> <h4 class="feature__title">Bitcoin linked</h4>
<p class="feature__brief">Bitcoin Bonds is a Bitcoin price linked product of RanchiMall</p> <p class="feature__brief">Bitcoin Bonds is a Bitcoin price linked product of RanchiMall</p>
</div> </div>
<div class="feature feature--wide"> <div class="feature feature--wide">
<div class="feature__icon"> <div class="feature__icon">
<svg class="icon" id="a9cf0968-17a3-4e2e-8dcf-10d366d12d28" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M17.28,29a16.35,16.35,0,0,1-7.63-1.64,11.32,11.32,0,0,1-4.77-4.54,13.17,13.17,0,0,1-1.63-6.61V12.88A13.3,13.3,0,0,1,4.88,6.25,11.52,11.52,0,0,1,9.6,1.67,15.9,15.9,0,0,1,17.2,0a15.94,15.94,0,0,1,7.63,1.67,11.43,11.43,0,0,1,4.71,4.55,13.5,13.5,0,0,1,1.6,6.66v3.29a13.36,13.36,0,0,1-1.6,6.61,11.33,11.33,0,0,1-4.68,4.54A16,16,0,0,1,17.28,29Zm0-8a3.94,3.94,0,0,0,3.21-1.39,5.13,5.13,0,0,0,1.16-3.4V12.88a5.31,5.31,0,0,0-1.16-3.47A4,4,0,0,0,17.2,8a3.94,3.94,0,0,0-3.27,1.41,5.35,5.35,0,0,0-1.14,3.47v3.29A5.11,5.11,0,0,0,14,19.59,4.09,4.09,0,0,0,17.28,21Zm3,37.61-6.93-3.43L43.76,6.46,50.7,9.88ZM46.89,64a16.15,16.15,0,0,1-7.64-1.67,11.75,11.75,0,0,1-4.81-4.58,13,13,0,0,1-1.67-6.58V47.91a13.19,13.19,0,0,1,1.63-6.58,11.41,11.41,0,0,1,4.77-4.58,16.11,16.11,0,0,1,7.63-1.67,16,16,0,0,1,7.6,1.65,11.39,11.39,0,0,1,4.72,4.55,13.3,13.3,0,0,1,1.63,6.63v3.26a13.5,13.5,0,0,1-1.61,6.63,11.29,11.29,0,0,1-4.68,4.55A15.87,15.87,0,0,1,46.89,64Zm0-8c1.68,0,2.81-.42,3.4-1.26a6.33,6.33,0,0,0,.88-3.61V47.91a5.31,5.31,0,0,0-1.12-3.42,3.88,3.88,0,0,0-3.25-1.41,4,4,0,0,0-3.33,1.41,5.31,5.31,0,0,0-1.12,3.42v3.26a4.93,4.93,0,0,0,1.33,3.42A4.17,4.17,0,0,0,46.89,56Z"/></svg> <svg class="icon" id="a9cf0968-17a3-4e2e-8dcf-10d366d12d28" data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path
d="M17.28,29a16.35,16.35,0,0,1-7.63-1.64,11.32,11.32,0,0,1-4.77-4.54,13.17,13.17,0,0,1-1.63-6.61V12.88A13.3,13.3,0,0,1,4.88,6.25,11.52,11.52,0,0,1,9.6,1.67,15.9,15.9,0,0,1,17.2,0a15.94,15.94,0,0,1,7.63,1.67,11.43,11.43,0,0,1,4.71,4.55,13.5,13.5,0,0,1,1.6,6.66v3.29a13.36,13.36,0,0,1-1.6,6.61,11.33,11.33,0,0,1-4.68,4.54A16,16,0,0,1,17.28,29Zm0-8a3.94,3.94,0,0,0,3.21-1.39,5.13,5.13,0,0,0,1.16-3.4V12.88a5.31,5.31,0,0,0-1.16-3.47A4,4,0,0,0,17.2,8a3.94,3.94,0,0,0-3.27,1.41,5.35,5.35,0,0,0-1.14,3.47v3.29A5.11,5.11,0,0,0,14,19.59,4.09,4.09,0,0,0,17.28,21Zm3,37.61-6.93-3.43L43.76,6.46,50.7,9.88ZM46.89,64a16.15,16.15,0,0,1-7.64-1.67,11.75,11.75,0,0,1-4.81-4.58,13,13,0,0,1-1.67-6.58V47.91a13.19,13.19,0,0,1,1.63-6.58,11.41,11.41,0,0,1,4.77-4.58,16.11,16.11,0,0,1,7.63-1.67,16,16,0,0,1,7.6,1.65,11.39,11.39,0,0,1,4.72,4.55,13.3,13.3,0,0,1,1.63,6.63v3.26a13.5,13.5,0,0,1-1.61,6.63,11.29,11.29,0,0,1-4.68,4.55A15.87,15.87,0,0,1,46.89,64Zm0-8c1.68,0,2.81-.42,3.4-1.26a6.33,6.33,0,0,0,.88-3.61V47.91a5.31,5.31,0,0,0-1.12-3.42,3.88,3.88,0,0,0-3.25-1.41,4,4,0,0,0-3.33,1.41,5.31,5.31,0,0,0-1.12,3.42v3.26a4.93,4.93,0,0,0,1.33,3.42A4.17,4.17,0,0,0,46.89,56Z" />
</svg>
</div> </div>
<h4 class="feature__title">Guaranteed interest</h4> <h4 class="feature__title">Guaranteed interest</h4>
<p class="feature__brief">Get a minimum guarantee of 13% interest per annum during the lock-in period or 50% of all Bitcoin price gains whichever is higher.</p> <p class="feature__brief">Get a minimum guarantee of 13% interest per annum during the
lock-in period or 50% of all Bitcoin price gains whichever is higher.</p>
</div> </div>
<div class="feature"> <div class="feature">
<div class="feature__icon"> <div class="feature__icon">
<svg class="icon" id="b08df049-bfa0-4c18-bc06-ef2129dc9a6e" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32,0,5.42,5.93v31A55.62,55.62,0,0,0,32,64,55.62,55.62,0,0,0,58.58,36.94v-31ZM42.5,24.9,30.76,36.64a2.53,2.53,0,0,1-1.77.73,2.49,2.49,0,0,1-1.76-.73L21.5,30.91A2.5,2.5,0,1,1,25,27.38L29,31.33l10-10A2.5,2.5,0,1,1,42.5,24.9Z"/></svg> <svg class="icon" id="b08df049-bfa0-4c18-bc06-ef2129dc9a6e" data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path
d="M32,0,5.42,5.93v31A55.62,55.62,0,0,0,32,64,55.62,55.62,0,0,0,58.58,36.94v-31ZM42.5,24.9,30.76,36.64a2.53,2.53,0,0,1-1.77.73,2.49,2.49,0,0,1-1.76-.73L21.5,30.91A2.5,2.5,0,1,1,25,27.38L29,31.33l10-10A2.5,2.5,0,1,1,42.5,24.9Z" />
</svg>
</div> </div>
<h4 class="feature__title">Full capital protection</h4> <h4 class="feature__title">Full capital protection</h4>
<p class="feature__brief"> It offers full capital protection if Bitcoin prices fall below acquisition price</p> <p class="feature__brief"> It offers full capital protection if Bitcoin prices fall below
acquisition price</p>
</div> </div>
</section> </section>
<h4 class="h4 margin-bottom-1r">Description of different bonds</h4> <h4 class="h4 margin-bottom-1r">Description of different bonds</h4>
<ol type="1" class="margin-bottom-3r"> <ol type="1" class="margin-bottom-3r">
<li> <li>
<p> <p>
Bitcoin Bonds is a Bitcoin price linked product of RanchiMall in which the customer will never Bitcoin Bonds is a Bitcoin price linked product of RanchiMall in which the customer will
see value of his asset go down even if the prices of Bitcoin falls. Its been targeted to first time never
Bitcoin enthusiasts who are afraid of losing money with Bitcoins. RanchiMall absorbs all the potential see value of his asset go down even if the prices of Bitcoin falls. Its been targeted to
losses of the customer. It also guarantees the customer a minimum rate of annual appreciation. If the first time
Bitcoin enthusiasts who are afraid of losing money with Bitcoins. RanchiMall absorbs all
the potential
losses of the customer. It also guarantees the customer a minimum rate of annual
appreciation. If the
price of Bitcoin appreciates, the customer is entitled to 50% of all the gains. price of Bitcoin appreciates, the customer is entitled to 50% of all the gains.
</p> </p>
</li> </li>
<li> <li>
<p> <p>
RanchiMall has released two types of Bitcoin Bonds as per the price of Bitcoin as on issue date. In the RanchiMall has released two types of Bitcoin Bonds as per the price of Bitcoin as on
first type, the customer is guaranteed first 12% per gains per annum for 3 years, and 50% of all gains issue date. In the
there after. Customer must hold the bond for 3 years since bond issue date. In second type, the first type, the customer is guaranteed first 12% per gains per annum for 3 years, and
customer is guaranteed 13% per annum for 5 years, and the customer is entitled to 50% of all gains. 50% of all gains
there after. Customer must hold the bond for 3 years since bond issue date. In second
type, the
customer is guaranteed 13% per annum for 5 years, and the customer is entitled to 50% of
all gains.
Customer must hold the bond for at least 3 years since date of issue. Customer must hold the bond for at least 3 years since date of issue.
</p> </p>
</li> </li>
<li> <li>
<p> <p>
Example of Type 1 Bitcoin Bond is Bitcoin Bonds USD 975 Series issued on 2nd February 2017. Example of Type 1 Bitcoin Bond is Bitcoin Bonds USD 975 Series issued on 2nd February
Customer funds are invested at Bitcoin prices of 975 USD as on 2nd February 2017. If the prices of 2017.
Bitcoins fall below 975 USD, the customer bond value will continue to be 975 USD, and will get an Customer funds are invested at Bitcoin prices of 975 USD as on 2nd February 2017. If the
increment of 12% per annum. If the prices of Bitcoin go beyond 975 USD, the customer will getat prices of
least 12% per annum, and 50% of all price gains beyond it. The customer must hold thebond for 3 Bitcoins fall below 975 USD, the customer bond value will continue to be 975 USD, and
will get an
increment of 12% per annum. If the prices of Bitcoin go beyond 975 USD, the customer
will getat
least 12% per annum, and 50% of all price gains beyond it. The customer must hold
thebond for 3
years. years.
</p> </p>
</li> </li>
<li> <li>
<p> <p>
Example of Type 2 Bitcoin Bond is Bitcoin Bonds USD 1205 Series issued on 2nd March 2017. Example of Type 2 Bitcoin Bond is Bitcoin Bonds USD 1205 Series issued on 2nd March
Customer funds are invested at Bitcoin prices of 1205 USD as on 2nd March 2017. If the prices of 2017.
Bitcoins fall below 1205 USD, the customer bond value will continue to be 1205 USD will full loss Customer funds are invested at Bitcoin prices of 1205 USD as on 2nd March 2017. If the
protection, and will get an increment of 13% per annum for 5 years on top. If the price gains is more prices of
than 13% in any year for first 5 years, the customer will be entitled to 50% of the gains. The customer Bitcoins fall below 1205 USD, the customer bond value will continue to be 1205 USD will
full loss
protection, and will get an increment of 13% per annum for 5 years on top. If the price
gains is more
than 13% in any year for first 5 years, the customer will be entitled to 50% of the
gains. The customer
must hold the bond for 3 years. must hold the bond for 3 years.
</p> </p>
</li> </li>
<li> <li>
<p> <p>
Bond 1 Bondholders entitlement for Bitcoin Bonds ($975, $1057 and $1064 series) - Bondholders have a Bond 1 Bondholders entitlement for Bitcoin Bonds ($975, $1057 and $1064 series) -
3 year lock-in period. In the lockin period they are guaranteed 12 percent per annum. If the price Bondholders have a
appreciates more than 12 percent, they will be paid 50 percent of additional return over and above 3 year lock-in period. In the lockin period they are guaranteed 12 percent per annum. If
12 percent. After 3 years, bondholders can cash out anytime they like. Bond 2 Bondholder entitlement the price
($1205 series)Bondholders are entitled to 50% of Bitcoin and Bitcoin Cash price gains at all times with appreciates more than 12 percent, they will be paid 50 percent of additional return over
a minimum guarantee of 13 percent per annum for 5 years from date of issue. There is a 3 year lockin and above
12 percent. After 3 years, bondholders can cash out anytime they like. Bond 2 Bondholder
entitlement
($1205 series)Bondholders are entitled to 50% of Bitcoin and Bitcoin Cash price gains at
all times with
a minimum guarantee of 13 percent per annum for 5 years from date of issue. There is a 3
year lockin
period. After 3 years, bondholders can cash out anytime they like. period. After 3 years, bondholders can cash out anytime they like.
</p> </p>
</li> </li>
<li> <li>
<p> <p>
Bond 3 Bondholders Entitlement ($1285 series) - Bondholders are entitled to 50% of Bitcoinand Bitcoin Bond 3 Bondholders Entitlement ($1285 series) - Bondholders are entitled to 50% of
Cash price gains at all times with a minimum guarantee of 13 percent per annum for 5 years from Bitcoinand Bitcoin
date of issue. There is a 3 year lockin period. After 3 years, bondholders can cash out anytime they Cash price gains at all times with a minimum guarantee of 13 percent per annum for 5
like.Bond 4Bondholder Entitlement ($2513 series)Bondholders are entitled to 50% of Bitcoin and years from
Bitcoin Cash price gains at all times with a minimum guarantee of 13 percent per annum for 5 years date of issue. There is a 3 year lockin period. After 3 years, bondholders can cash out
from date of issue. There is a 3 year lockin period. After 3 years, bondholders can cash out anytime anytime they
like.Bond 4Bondholder Entitlement ($2513 series)Bondholders are entitled to 50% of
Bitcoin and
Bitcoin Cash price gains at all times with a minimum guarantee of 13 percent per annum
for 5 years
from date of issue. There is a 3 year lockin period. After 3 years, bondholders can cash
out anytime
they like. they like.
</p> </p>
</li> </li>
@ -214,38 +279,49 @@
<h4 class="h4 margin-bottom-1r section-header">Risk Management</h4> <h4 class="h4 margin-bottom-1r section-header">Risk Management</h4>
<p class="margin-bottom-3r"> <p class="margin-bottom-3r">
This is a high risk product for RanchiMall. We guarantee protection from losses This is a high risk product for RanchiMall. We guarantee protection from losses
and a minimum rate of return.To control our risks, we limit the total aggregate amount of guarantee and a minimum rate of return.To control our risks, we limit the total aggregate amount of
guarantee
we give to a comfortable level. We also limit maximum amount of Bitcoin Bonds aperson can buy so we give to a comfortable level. We also limit maximum amount of Bitcoin Bonds aperson can buy so
that we do not have sudden redemption pressure.RanchiMall needs to have long term confidence that we do not have sudden redemption pressure.RanchiMall needs to have long term confidence
in asset price growth, which we do have for Bitcoin scurrently. We cannot offer these guarantees on in asset price growth, which we do have for Bitcoin scurrently. We cannot offer these guarantees
any other crypto or non-crypto asset other than Bitcoin as we cannot make definite predictions on on
any other crypto or non-crypto asset other than Bitcoin as we cannot make definite predictions
on
their long term prices.The maximum amount of aggregate guarantee amount for this product should their long term prices.The maximum amount of aggregate guarantee amount for this product should
be lower than 20 percent of RanchiMall assets to protect against catastrophic Bitcoin price fall. be lower than 20 percent of RanchiMall assets to protect against catastrophic Bitcoin price
fall.
</p> </p>
<h4 class="h4 margin-bottom-1r section-header">Founder Notes</h4> <h4 class="h4 margin-bottom-1r section-header">Founder Notes</h4>
<ol type="1"> <ol type="1">
<li> <li>
<p> <p>
RanchiMall Bitcoin Bonds was the first product that met our 2 fundamental criteria that we have for RanchiMall Bitcoin Bonds was the first product that met our 2 fundamental criteria that
RanchiMall products. First every product must beinnovative and absolutely new. Secondly it should we have for
RanchiMall products. First every product must beinnovative and absolutely new. Secondly
it should
be created, marketedand delivered purely on Internet withoutany physical elements. be created, marketedand delivered purely on Internet withoutany physical elements.
</p> </p>
</li> </li>
<li> <li>
<p> <p>
This product also reflects our philosophy that we should have impactful products,fewer number of customers, and very deep relationship with those customers. This product also reflects our philosophy that we should have impactful products,fewer
number of customers, and very deep relationship with those customers.
</p> </p>
</li> </li>
<li> <li>
<p> <p>
This product is a compounding product which means both our customers and us will see higher returns as wheels of time move forward. This product is a compounding product which means both our customers and us will see
higher returns as wheels of time move forward.
</p> </p>
</li> </li>
<li> <li>
<p> <p>
Since RanchiMall gets roughly 50 percent of price gains and our costs of operations are very low on Since RanchiMall gets roughly 50 percent of price gains and our costs of operations are
this product, RanchiMall Bitcoin Bonds has helped RanchiMall to become self sufficient without very low on
needing large capital investment. Doing good risk management is a very important dimension here. this product, RanchiMall Bitcoin Bonds has helped RanchiMall to become self sufficient
without
needing large capital investment. Doing good risk management is a very important
dimension here.
And that will be our challenge in the continued offerings of this product. And that will be our challenge in the continued offerings of this product.
</p> </p>
</li> </li>
@ -254,9 +330,13 @@
<section id="purchase_room" class="grid room"> <section id="purchase_room" class="grid room">
<p> <p>
The purchase of this product is open only during specified time when we are confident we can The purchase of this product is open only during specified time when we are confident we can
give guarantees. It was last open from February 2017 to June 2017.Currently we are doing blockchain give guarantees. It was last open from February 2017 to June 2017.Currently we are doing
version of the product in test mode.If you are interested, please generate your FLO ID while keeping blockchain
your private key very safe.FLO ID can be generated <a href="https://ranchimall.github.io/flo-webwallet/" target="_blank">here</a> in a single click.We can message version of the product in test mode.If you are interested, please generate your FLO ID while
keeping
your private key very safe.FLO ID can be generated <a
href="https://ranchimall.github.io/flo-webwallet/" target="_blank">here</a> in a single
click.We can message
directly on that FLO ID. Please drop your name and phone number along with FLO ID. directly on that FLO ID. Please drop your name and phone number along with FLO ID.
</p> </p>
</section> </section>
@ -274,17 +354,19 @@
</div> </div>
<div class="link-container"> <div class="link-container">
<a class="round" href="https://www.ranchimall.net/BitBonds/" target="_blank">2017 release</a> <a class="round" href="https://www.ranchimall.net/BitBonds/" target="_blank">2017 release</a>
<a class="round" href="https://ranchimall.github.io/blockchain-bonds/" target="_blank">Blockchain version</a> <a class="round" href="https://ranchimall.github.io/blockchain-bonds/" target="_blank">Blockchain
version</a>
</div> </div>
</div> </div>
</section> </section>
</main> </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="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="assets/js/components.js"></script> <script src="assets/js/components.js"></script>
<script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
<script src="assets/js/index.js"></script> <script src="assets/js/index.js"></script>
<script> <script>
const bitBondSerieses = [ const bitBondSeries = [
{ {
series: 975, series: 975,
startDate: 1485993600000 startDate: 1485993600000
@ -353,33 +435,31 @@
} }
function calcNetValue(obj) { function calcNetValue(obj) {
let {isHistorical = false, BTC_base, startDate, minIpa, maxPeriod, cut, amount, USD_base, histBtc, histUsd} = obj let { isHistorical = false, BTC_base, startDate, minIpa, maxPeriod, cut, amount, USD_base, histBtc, histUsd } = obj
let gain, interest, net; let gain, interest, net;
if(isHistorical){ if (isHistorical) {
gain = (histBtc - BTC_base) / BTC_base; gain = (histBtc - BTC_base) / BTC_base;
} }
else{ else {
gain = (BTC_current - BTC_base) / BTC_base; gain = (BTC_current - BTC_base) / BTC_base;
} }
interest = Math.max(cut * gain, minIpa * Math.min(yrDiff(startDate), maxPeriod)); interest = Math.max(cut * gain, minIpa * Math.min(yrDiff(startDate), maxPeriod));
net = amount / USD_base; net = amount / USD_base;
net += net * interest; net += net * interest;
if(isHistorical){ if (isHistorical) {
currentValue = net * histUsd currentValue = net * histUsd
} }
else{ else {
currentValue = net * USD_current currentValue = net * USD_current
} }
const percentGain = ((currentValue - amount) / amount) * 100 const percentGain = ((currentValue - amount) / amount) * 100
//console.info(gain, interest, net)
return [currentValue, percentGain]; return [currentValue, percentGain];
} }
function renderAllSeries(){ function renderAllSeries() {
const frag = document.createDocumentFragment() const allSeries = []
getRef('bit_bond_series__container').innerHTML = '' const randIndex = getRandom(0, bitBondSeries.length - 1)
const randIndex = getRandom(0, bitBondSerieses.length - 1) bitBondSeries.forEach((series, index) => {
bitBondSerieses.forEach((series, index) => {
let obj = { let obj = {
BTC_base: series.series, BTC_base: series.series,
startDate: series.startDate, startDate: series.startDate,
@ -397,21 +477,19 @@
currentValue, currentValue,
percentGain: percentGain.toFixed(0) percentGain: percentGain.toFixed(0)
} }
const timelineItem = create('li', {className: 'timeline-item'}) const timelineItem = html`
<li class="timeline-item">
const tilelineItemHeader = create('header', { <h4 class="timeline-item__header">${getFormatedTime(series.startDate, true)}</h4>
className: 'timeline-item__header', ${render.bitBondRow(bondObj)}
text: getFormatedTime(series.startDate, true) </li>
}) `;
if(randIndex === index){ if (randIndex === index) {
renderGraph(obj) renderGraph(obj)
getRef('performance_preview').append(render.bitBondRow(bondObj)) renderElem(getRef('performance_preview'), render.bitBondRow(bondObj))
} }
allSeries.push(timelineItem)
timelineItem.append(tilelineItemHeader, render.bitBondRow(bondObj))
frag.append(timelineItem)
}) })
getRef('bit_bond_series__container').append(frag) renderElem(getRef('bit_bond_series__container'), html`${allSeries}`)
} }
async function getPrices() { async function getPrices() {
@ -448,7 +526,7 @@
let histBtc = parseFloat(allBtcPrices[index]) let histBtc = parseFloat(allBtcPrices[index])
let histUsd = parseFloat(inrPrices[dataPoint]['1. open']) let histUsd = parseFloat(inrPrices[dataPoint]['1. open'])
obj.isHistorical = true obj.isHistorical = true
let [currentValue, gain] = calcNetValue({...obj, histBtc, histUsd}) let [currentValue, gain] = calcNetValue({ ...obj, histBtc, histUsd })
// console.log(currentValue) // console.log(currentValue)
historicalData.push(currentValue) historicalData.push(currentValue)
index++ index++
@ -464,14 +542,14 @@
let lineColor let lineColor
let myChart let myChart
function selectGraphColors(){ function selectGraphColors() {
gradientFill = ctx.createLinearGradient(200, 0, 200, 400); gradientFill = ctx.createLinearGradient(200, 0, 200, 400);
let cssTextColor = getComputedStyle(document.body).getPropertyValue('--text-color') let cssTextColor = getComputedStyle(document.body).getPropertyValue('--text-color')
gradientFill.addColorStop(0, `rgba(${cssTextColor}, 0.2)`); gradientFill.addColorStop(0, `rgba(${cssTextColor}, 0.2)`);
gradientFill.addColorStop(1, "transparent"); gradientFill.addColorStop(1, "transparent");
if(myChart){ if (myChart) {
lineColor = ctx.createLinearGradient(0, 0, myChart.chartArea.width, 0) lineColor = ctx.createLinearGradient(0, 0, myChart.chartArea.width, 0)
}else{ } else {
lineColor = ctx.createLinearGradient(0, 0, 500, 0) lineColor = ctx.createLinearGradient(0, 0, 500, 0)
} }
lineColor.addColorStop(0, "#f49080"); lineColor.addColorStop(0, "#f49080");
@ -534,7 +612,7 @@
} }
}); });
} }
getRef("theme_switcher").addEventListener("change", function (e) { document.addEventListener("themechange", function (e) {
selectGraphColors() selectGraphColors()
myChart.data.datasets[0].borderColor = lineColor myChart.data.datasets[0].borderColor = lineColor
myChart.data.datasets[0].backgroundColor = gradientFill myChart.data.datasets[0].backgroundColor = gradientFill
@ -545,4 +623,5 @@
}); });
</script> </script>
</body> </body>
</html> </html>

264
bob'sfund.html
View File

@ -28,22 +28,25 @@
</header> </header>
<ul id="floor_list" class="grid"></ul> <ul id="floor_list" class="grid"></ul>
</section> </section>
<header id="main_header" class="grid align-center full-bleed"> <header id="main_header" class="full-bleed">
<button id="elevator_button" class="button" onclick="showSiteMap()"> <button id="elevator_button" class="button" onclick="showSiteMap()">
<svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg> <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
<path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
</svg>
<span class="button__label"> <span class="button__label">
Elevator Elevator
</span> </span>
</button> </button>
<a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page"> <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
<svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg> <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
</svg>
<h4 class="h4 header__company-name">RanchiMall</h4> <h4 class="h4 header__company-name">RanchiMall</h4>
</a> </a>
<label class="theme-switcher" title="Change theme"> <theme-toggle></theme-toggle>
<input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
<svg class="icon moon-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="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
<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> </header>
<div id="outlet_switcher" class="grid gap-1-5 hide-completely"> <div id="outlet_switcher" class="grid gap-1-5 hide-completely">
<span id="outlet_switcher__floor_num" class="weight-500 color-0-8"></span> <span id="outlet_switcher__floor_num" class="weight-500 color-0-8"></span>
@ -55,8 +58,10 @@
<h2 class="h2 weight-700 margin-bottom-1r">Bob's Fund</h2> <h2 class="h2 weight-700 margin-bottom-1r">Bob's Fund</h2>
<p> <p>
Bobs Fund is a 20 year long term Bitcoin price linked product. Investors are entitled to 100 percent Bobs Fund is a 20 year long term Bitcoin price linked product. Investors are entitled to 100 percent
of Bitcoin price gains, but they must 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
on an asset like Bitcoin should outstrip returns on conventional assets like real estate and stocks. The 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 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. every investor, thus the interests of fund manager, and fund investors are totally aligned.
</p> </p>
@ -64,7 +69,10 @@
<button class="outlet-label"> <button class="outlet-label">
<span class="outlet-label__name">Outlet</span> <span class="outlet-label__name">Outlet</span>
<span class="outlet-label__no"></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> <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> </button>
</section> </section>
<div class="rooms__header"> <div class="rooms__header">
@ -75,7 +83,19 @@
<a class="room-tile room-tile--main" href="#performance_room"> <a class="room-tile room-tile--main" href="#performance_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" 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> <h4 class="room-tile__title">Performance</h4>
</div> </div>
<div id="performance_preview"></div> <div id="performance_preview"></div>
@ -84,13 +104,17 @@
<a class="room-tile" href="#product_room"> <a class="room-tile" href="#product_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="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> <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> <h4 class="room-tile__title">Product</h4>
</div> </div>
</div> </div>
</a> </a>
<!-- <a class="room-tile" href="#purchase_room"> <!-- <a class="room-tile" href="#purchase_room">
<div class="tile-content"> <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> <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> <h4 class="room-tile__title">Buy</h4>
@ -100,7 +124,10 @@
<section class="room-container hide-completely page-layout"> <section class="room-container hide-completely page-layout">
<header class="room-container__header"> <header class="room-container__header">
<button class="grid flow-column gap-1 align-center" onclick="hideRoom()"> <button class="grid flow-column gap-1 align-center" onclick="hideRoom()">
<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="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg> <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="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z" />
</svg>
<h3 id="room_title" class="hide-completely"></h3> <h3 id="room_title" class="hide-completely"></h3>
</button> </button>
</header> </header>
@ -121,51 +148,79 @@
<section class="features-grid"> <section class="features-grid">
<div class="feature"> <div class="feature">
<div class="feature__icon"> <div class="feature__icon">
<svg class="icon" id="f47905c4-be19-4535-912c-ac0a41d5362d" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M55.59,38a10.43,10.43,0,0,0-3.09-4.19,12.61,12.61,0,0,0-5.4-2.46,11.57,11.57,0,0,0,5.75-4.7,13.39,13.39,0,0,0,1.86-7q0-7.62-5.86-11.46c-3.64-2.39-8.62-3.65-14.91-3.82V0H25.38V4.28H21.7V0H13.14V4.28H7.42v7.84l5.75,1.22V50.7L7.42,51.91v7.81h6.69V64h8.56V59.72h3.68V64h8.56V59.72h.42q10.37,0,15.8-4.15t5.45-12.3A14.09,14.09,0,0,0,55.59,38ZM41.35,21.11A5.14,5.14,0,0,1,39,25.77q-2.34,1.52-7.07,1.51h-5.4V14.48h6q4.45,0,6.65,1.58A5.81,5.81,0,0,1,41.35,21.11ZM41.29,48q-2,1.56-6,1.56H26.54V36.11H36a9.61,9.61,0,0,1,4.19.78,5,5,0,0,1,2.36,2.36,9.14,9.14,0,0,1,.76,4A5.66,5.66,0,0,1,41.29,48Z"/></svg> <svg class="icon" id="f47905c4-be19-4535-912c-ac0a41d5362d" data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path
d="M55.59,38a10.43,10.43,0,0,0-3.09-4.19,12.61,12.61,0,0,0-5.4-2.46,11.57,11.57,0,0,0,5.75-4.7,13.39,13.39,0,0,0,1.86-7q0-7.62-5.86-11.46c-3.64-2.39-8.62-3.65-14.91-3.82V0H25.38V4.28H21.7V0H13.14V4.28H7.42v7.84l5.75,1.22V50.7L7.42,51.91v7.81h6.69V64h8.56V59.72h3.68V64h8.56V59.72h.42q10.37,0,15.8-4.15t5.45-12.3A14.09,14.09,0,0,0,55.59,38ZM41.35,21.11A5.14,5.14,0,0,1,39,25.77q-2.34,1.52-7.07,1.51h-5.4V14.48h6q4.45,0,6.65,1.58A5.81,5.81,0,0,1,41.35,21.11ZM41.29,48q-2,1.56-6,1.56H26.54V36.11H36a9.61,9.61,0,0,1,4.19.78,5,5,0,0,1,2.36,2.36,9.14,9.14,0,0,1,.76,4A5.66,5.66,0,0,1,41.29,48Z" />
</svg>
</div> </div>
<h4 class="feature__title">Bitcoin linked</h4> <h4 class="feature__title">Bitcoin linked</h4>
<p class="feature__brief">Bob's Fund is a 20 year long term Bitcoin price linked product</p> <p class="feature__brief">Bob's Fund is a 20 year long term Bitcoin price linked product</p>
</div> </div>
<div class="feature feature--wide"> <div class="feature feature--wide">
<div class="feature__icon"> <div class="feature__icon">
<svg class="icon" id="a0972e55-309b-4721-ab64-f0e363b1245c" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32,11.86a18.06,18.06,0,1,0,18,18.06A18.08,18.08,0,0,0,32,11.86Zm8.45,14.45-9.57,9.57a1.65,1.65,0,0,1-1.17.48,1.67,1.67,0,0,1-1.18-.48l-5-5a1.66,1.66,0,0,1,2.35-2.35l3.81,3.8L38.1,24a1.66,1.66,0,1,1,2.35,2.35Z"/><path d="M59.42,26.2a5.89,5.89,0,0,0-3.05-9.4h0a5.89,5.89,0,0,1-4.37-6A5.89,5.89,0,0,0,44,5a5.89,5.89,0,0,1-7.07-2.29h0a5.88,5.88,0,0,0-9.88,0A5.89,5.89,0,0,1,20,5a5.89,5.89,0,0,0-8,5.81h0a5.89,5.89,0,0,1-4.37,6,5.89,5.89,0,0,0-3,9.4h0a5.91,5.91,0,0,1,0,7.43A5.89,5.89,0,0,0,7.63,43,5.88,5.88,0,0,1,12,48.94L6.37,58.68a.34.34,0,0,0,.29.51l5.14.05a.34.34,0,0,1,.29.17l2.61,4.42a.33.33,0,0,0,.58,0l5.28-9.14a5.87,5.87,0,0,1,6.5,2.45h0a5.88,5.88,0,0,0,9.88,0h0a5.87,5.87,0,0,1,6.5-2.45l5.28,9.14a.33.33,0,0,0,.58,0l2.61-4.42a.34.34,0,0,1,.29-.17l5.14-.05a.34.34,0,0,0,.29-.51L52,48.94A5.88,5.88,0,0,1,56.37,43a5.89,5.89,0,0,0,3.05-9.4A5.91,5.91,0,0,1,59.42,26.2ZM32,50A20.06,20.06,0,1,1,52.06,29.92,20.08,20.08,0,0,1,32,50Z"/></svg> <svg class="icon" id="a0972e55-309b-4721-ab64-f0e363b1245c" data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path
d="M32,11.86a18.06,18.06,0,1,0,18,18.06A18.08,18.08,0,0,0,32,11.86Zm8.45,14.45-9.57,9.57a1.65,1.65,0,0,1-1.17.48,1.67,1.67,0,0,1-1.18-.48l-5-5a1.66,1.66,0,0,1,2.35-2.35l3.81,3.8L38.1,24a1.66,1.66,0,1,1,2.35,2.35Z" />
<path
d="M59.42,26.2a5.89,5.89,0,0,0-3.05-9.4h0a5.89,5.89,0,0,1-4.37-6A5.89,5.89,0,0,0,44,5a5.89,5.89,0,0,1-7.07-2.29h0a5.88,5.88,0,0,0-9.88,0A5.89,5.89,0,0,1,20,5a5.89,5.89,0,0,0-8,5.81h0a5.89,5.89,0,0,1-4.37,6,5.89,5.89,0,0,0-3,9.4h0a5.91,5.91,0,0,1,0,7.43A5.89,5.89,0,0,0,7.63,43,5.88,5.88,0,0,1,12,48.94L6.37,58.68a.34.34,0,0,0,.29.51l5.14.05a.34.34,0,0,1,.29.17l2.61,4.42a.33.33,0,0,0,.58,0l5.28-9.14a5.87,5.87,0,0,1,6.5,2.45h0a5.88,5.88,0,0,0,9.88,0h0a5.87,5.87,0,0,1,6.5-2.45l5.28,9.14a.33.33,0,0,0,.58,0l2.61-4.42a.34.34,0,0,1,.29-.17l5.14-.05a.34.34,0,0,0,.29-.51L52,48.94A5.88,5.88,0,0,1,56.37,43a5.89,5.89,0,0,0,3.05-9.4A5.91,5.91,0,0,1,59.42,26.2ZM32,50A20.06,20.06,0,1,1,52.06,29.92,20.08,20.08,0,0,1,32,50Z" />
</svg>
</div> </div>
<h4 class="feature__title">Better returns than conventional assets</h4> <h4 class="feature__title">Better returns than conventional assets</h4>
<p class="feature__brief">Over a very long time period, Bitcoin returns should outstrip returns on conventional assets like real estate and stocks</p> <p class="feature__brief">Over a very long time period, Bitcoin returns should outstrip
returns on conventional assets like real estate and stocks</p>
</div> </div>
<div class="feature feature--wide"> <div class="feature feature--wide">
<div class="feature__icon"> <div class="feature__icon">
<svg class="icon" id="a9cf0968-17a3-4e2e-8dcf-10d366d12d28" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M17.28,29a16.35,16.35,0,0,1-7.63-1.64,11.32,11.32,0,0,1-4.77-4.54,13.17,13.17,0,0,1-1.63-6.61V12.88A13.3,13.3,0,0,1,4.88,6.25,11.52,11.52,0,0,1,9.6,1.67,15.9,15.9,0,0,1,17.2,0a15.94,15.94,0,0,1,7.63,1.67,11.43,11.43,0,0,1,4.71,4.55,13.5,13.5,0,0,1,1.6,6.66v3.29a13.36,13.36,0,0,1-1.6,6.61,11.33,11.33,0,0,1-4.68,4.54A16,16,0,0,1,17.28,29Zm0-8a3.94,3.94,0,0,0,3.21-1.39,5.13,5.13,0,0,0,1.16-3.4V12.88a5.31,5.31,0,0,0-1.16-3.47A4,4,0,0,0,17.2,8a3.94,3.94,0,0,0-3.27,1.41,5.35,5.35,0,0,0-1.14,3.47v3.29A5.11,5.11,0,0,0,14,19.59,4.09,4.09,0,0,0,17.28,21Zm3,37.61-6.93-3.43L43.76,6.46,50.7,9.88ZM46.89,64a16.15,16.15,0,0,1-7.64-1.67,11.75,11.75,0,0,1-4.81-4.58,13,13,0,0,1-1.67-6.58V47.91a13.19,13.19,0,0,1,1.63-6.58,11.41,11.41,0,0,1,4.77-4.58,16.11,16.11,0,0,1,7.63-1.67,16,16,0,0,1,7.6,1.65,11.39,11.39,0,0,1,4.72,4.55,13.3,13.3,0,0,1,1.63,6.63v3.26a13.5,13.5,0,0,1-1.61,6.63,11.29,11.29,0,0,1-4.68,4.55A15.87,15.87,0,0,1,46.89,64Zm0-8c1.68,0,2.81-.42,3.4-1.26a6.33,6.33,0,0,0,.88-3.61V47.91a5.31,5.31,0,0,0-1.12-3.42,3.88,3.88,0,0,0-3.25-1.41,4,4,0,0,0-3.33,1.41,5.31,5.31,0,0,0-1.12,3.42v3.26a4.93,4.93,0,0,0,1.33,3.42A4.17,4.17,0,0,0,46.89,56Z"/></svg> <svg class="icon" id="a9cf0968-17a3-4e2e-8dcf-10d366d12d28" data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path
d="M17.28,29a16.35,16.35,0,0,1-7.63-1.64,11.32,11.32,0,0,1-4.77-4.54,13.17,13.17,0,0,1-1.63-6.61V12.88A13.3,13.3,0,0,1,4.88,6.25,11.52,11.52,0,0,1,9.6,1.67,15.9,15.9,0,0,1,17.2,0a15.94,15.94,0,0,1,7.63,1.67,11.43,11.43,0,0,1,4.71,4.55,13.5,13.5,0,0,1,1.6,6.66v3.29a13.36,13.36,0,0,1-1.6,6.61,11.33,11.33,0,0,1-4.68,4.54A16,16,0,0,1,17.28,29Zm0-8a3.94,3.94,0,0,0,3.21-1.39,5.13,5.13,0,0,0,1.16-3.4V12.88a5.31,5.31,0,0,0-1.16-3.47A4,4,0,0,0,17.2,8a3.94,3.94,0,0,0-3.27,1.41,5.35,5.35,0,0,0-1.14,3.47v3.29A5.11,5.11,0,0,0,14,19.59,4.09,4.09,0,0,0,17.28,21Zm3,37.61-6.93-3.43L43.76,6.46,50.7,9.88ZM46.89,64a16.15,16.15,0,0,1-7.64-1.67,11.75,11.75,0,0,1-4.81-4.58,13,13,0,0,1-1.67-6.58V47.91a13.19,13.19,0,0,1,1.63-6.58,11.41,11.41,0,0,1,4.77-4.58,16.11,16.11,0,0,1,7.63-1.67,16,16,0,0,1,7.6,1.65,11.39,11.39,0,0,1,4.72,4.55,13.3,13.3,0,0,1,1.63,6.63v3.26a13.5,13.5,0,0,1-1.61,6.63,11.29,11.29,0,0,1-4.68,4.55A15.87,15.87,0,0,1,46.89,64Zm0-8c1.68,0,2.81-.42,3.4-1.26a6.33,6.33,0,0,0,.88-3.61V47.91a5.31,5.31,0,0,0-1.12-3.42,3.88,3.88,0,0,0-3.25-1.41,4,4,0,0,0-3.33,1.41,5.31,5.31,0,0,0-1.12,3.42v3.26a4.93,4.93,0,0,0,1.33,3.42A4.17,4.17,0,0,0,46.89,56Z" />
</svg>
</div> </div>
<h4 class="feature__title">Get 100% of gains</h4> <h4 class="feature__title">Get 100% of gains</h4>
<p class="feature__brief">Investors are entitled to 100% of Bitcoin price gains</p> <p class="feature__brief">Investors are entitled to 100% of Bitcoin price gains</p>
</div> </div>
<div class="feature"> <div class="feature">
<div class="feature__icon"> <div class="feature__icon">
<svg class="icon" id="b25d5f7d-dd5a-4cc1-a2c9-37dbecdeaff1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32.11,64q-10.12,0-16-6.41t-5.9-19V25.46q0-12.56,5.9-19T32,0Q42,0,47.89,6.45t5.92,19V38.58q0,12.6-5.87,19T32.11,64Zm0-11.41a5.53,5.53,0,0,0,5-3q1.76-3,1.75-10.15V24.52c0-4.67-.6-8-1.79-10a5.87,5.87,0,0,0-10.26,0q-1.76,3-1.75,10.06V39.43q0,7.18,1.75,10.17A5.7,5.7,0,0,0,32.11,52.59Z"/></svg> <svg class="icon" id="b25d5f7d-dd5a-4cc1-a2c9-37dbecdeaff1" data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path
d="M32.11,64q-10.12,0-16-6.41t-5.9-19V25.46q0-12.56,5.9-19T32,0Q42,0,47.89,6.45t5.92,19V38.58q0,12.6-5.87,19T32.11,64Zm0-11.41a5.53,5.53,0,0,0,5-3q1.76-3,1.75-10.15V24.52c0-4.67-.6-8-1.79-10a5.87,5.87,0,0,0-10.26,0q-1.76,3-1.75,10.06V39.43q0,7.18,1.75,10.17A5.7,5.7,0,0,0,32.11,52.59Z" />
</svg>
</div> </div>
<h4 class="feature__title">No management fee</h4> <h4 class="feature__title">No management fee</h4>
<p class="feature__brief">The management fees on this product is zero</p> <p class="feature__brief">The management fees on this product is zero</p>
</div> </div>
<div class="feature"> <div class="feature">
<div class="feature__icon"> <div class="feature__icon">
<svg class="icon" id="e0287cba-7cef-4217-aee4-c8ac3e32d7a5" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M49.52,20.65a1,1,0,0,1,0-1.16L56.94,9a1,1,0,0,0-.83-1.58H18.32V2.52a2.52,2.52,0,1,0-5,0V59H9.4a2.52,2.52,0,1,0,0,5H22.21a2.52,2.52,0,0,0,0-5H18.32V32.73H56.11a1,1,0,0,0,.83-1.59Z"/></svg> <svg class="icon" id="e0287cba-7cef-4217-aee4-c8ac3e32d7a5" data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path
d="M49.52,20.65a1,1,0,0,1,0-1.16L56.94,9a1,1,0,0,0-.83-1.58H18.32V2.52a2.52,2.52,0,1,0-5,0V59H9.4a2.52,2.52,0,1,0,0,5H22.21a2.52,2.52,0,0,0,0-5H18.32V32.73H56.11a1,1,0,0,0,.83-1.59Z" />
</svg>
</div> </div>
<h4 class="feature__title">Aligned goals</h4> <h4 class="feature__title">Aligned goals</h4>
<p class="feature__brief">RanchiMall earns by having invested an equal amount as every investor, thus the interests of fund manager, and fund investors are totally aligned</p> <p class="feature__brief">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> </div>
</section> </section>
<p class="margin-bottom-3r"> <p class="margin-bottom-3r">
Bobs Fund allows customers to take a direct share in Bitcoin and they are automatically guided into a Bobs Fund allows customers to take a direct share in Bitcoin and they are automatically guided
into a
long term investment plan. Bitcoin is a long term investors paradise with supply artificially long term investment plan. Bitcoin is a long term investors paradise with supply artificially
constrained, and demand only growing. There are no price guarantees in this product. But the long constrained, and demand only growing. There are no price guarantees in this product. But the
duration of the investment ensures that customers will get an outsized rate of return. RanchiMall as long
duration of the investment ensures that customers will get an outsized rate of return.
RanchiMall as
Fund Manager does not charge management fees. Fund Manager does not charge management fees.
</p> </p>
<h4 class="h4 margin-bottom-1r">Risk Management</h4> <h4 class="h4 margin-bottom-1r">Risk Management</h4>
<p class="margin-bottom-3r"> <p class="margin-bottom-3r">
There is no price risk for RanchiMall in Bobs Fund. But since this is a long term There is no price risk for RanchiMall in Bobs Fund. But since this is a long term
product, information security risks are high to maintain Bitcoins safely. Bitcoin keys must be split product, information security risks are high to maintain Bitcoins safely. Bitcoin keys must be
split
using Shamir Secret Key Share algorithm, and should be recombined at the time of redemption. The using Shamir Secret Key Share algorithm, and should be recombined at the time of redemption. The
number of shares should have enough redundancy so that if some holders are not around, the keys number of shares should have enough redundancy so that if some holders are not around, the keys
must still be recovered. must still be recovered.
@ -173,12 +228,15 @@
<h4 class="h4 margin-bottom-1r">Founder Notes</h4> <h4 class="h4 margin-bottom-1r">Founder Notes</h4>
<p class="margin-bottom-3r"> <p class="margin-bottom-3r">
Bobs Fund was first issued in my MBA classmates WhatsApp group, and restricted only to my Bobs Fund was first issued in my MBA classmates WhatsApp group, and restricted only to my
classmates in June 2017. The product had a long term duration of 20 years, and it needed lot of trust classmates in June 2017. The product had a long term duration of 20 years, and it needed lot of
trust
which my classamtes had in me. We kept this product concept under observation and testing for 4 which my classamtes had in me. We kept this product concept under observation and testing for 4
years, before exploring options to make it public. Another objective was to try out an idea where years, before exploring options to make it public. Another objective was to try out an idea
where
fund management expenses are nil, as fund management fees eats up a lot of customer returns over fund management expenses are nil, as fund management fees eats up a lot of customer returns over
long term. Instead we made an equal investment as every contributing member did, and we hope to long term. Instead we made an equal investment as every contributing member did, and we hope to
earn over the long life time of this product. Over time we realized, we could also use the Bitcoin as earn over the long life time of this product. Over time we realized, we could also use the
Bitcoin as
collateral for DeFi products, and that gives us an additional earning stream. collateral for DeFi products, and that gives us an additional earning stream.
</p> </p>
</section> </section>
@ -192,7 +250,7 @@
</footer> </footer>
</section> </section>
<section> <section>
<a class="ext-link-tile" href="https://ranchimall.github.io/bobs-fund/" target="_blank" > <a class="ext-link-tile" href="https://ranchimall.github.io/bobs-fund/" target="_blank">
<div class="grid"> <div class="grid">
<h4 class="tile__title">See Bob's Fund in action</h4> <h4 class="tile__title">See Bob's Fund in action</h4>
<p class="tile__brief">Visit the website to see investors and asset performance</p> <p class="tile__brief">Visit the website to see investors and asset performance</p>
@ -202,9 +260,10 @@
</section> </section>
</main> </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="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="assets/js/components.js"></script> <script src="assets/js/components.js"></script>
<script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
<script src="assets/js/index.js"></script> <script src="assets/js/index.js"></script>
<script> <script>
const bobFund = [ const bobFund = [
@ -466,43 +525,33 @@
}).catch(error => console.error(error)) }).catch(error => console.error(error))
function calcNetValue(obj) { function calcNetValue(obj) {
let {isHistorical = false, BTC_base, USD_base, amount, fee, histBtc, histUsd} = obj let { isHistorical = false, BTC_base, USD_base, amount, fee, histBtc, histUsd } = obj
let gain, interest, net = 0, currentValue = 0; let gain, interest, net = 0, currentValue = 0;
console.info(obj) if (isHistorical) {
if(isHistorical){
gain = (histBtc - BTC_base) / BTC_base; gain = (histBtc - BTC_base) / BTC_base;
} }
else{ else {
gain = (BTC_current - BTC_base) / BTC_base; gain = (BTC_current - BTC_base) / BTC_base;
} }
interest = gain * (1 - fee) interest = gain * (1 - fee)
net = amount / USD_base; net = amount / USD_base;
net += net * interest; net += net * interest;
if(isHistorical){ if (isHistorical) {
currentValue = net * histUsd currentValue = net * histUsd
} }
else{ else {
currentValue = net * USD_current currentValue = net * USD_current
} }
percentGain = ((currentValue - amount) / amount) * 100 percentGain = ((currentValue - amount) / amount) * 100
return [currentValue, percentGain.toFixed(0)]; return [currentValue, percentGain.toFixed(0)];
} }
function renderAllFundInvestors(){ function renderAllFundInvestors() {
const frag = document.createDocumentFragment()
const timelineItemsFrag = document.createDocumentFragment()
const randIndex = getRandom(0, bobFund.length - 1) const randIndex = getRandom(0, bobFund.length - 1)
getRef('bobs_fund_timeline').innerHTML = '' const timelineItems = bobFund.map((fund, index) => {
bobFund.forEach((fund, index) => { const { release, invested, investors, href, USD_base, BTC_base } = fund
const {release, invested, investors, href, USD_base, BTC_base} = fund let timelineContents
const timelineItem = create('li', {className: 'timeline-item'}) if (fund.hasOwnProperty('investors')) {
const fundRows = investors.map(investor => {
const tilelineItemHeader = create('header', {
className: 'timeline-item__header',
text: getFormatedTime(release, true)
})
if(fund.hasOwnProperty('investors')){
investors.forEach(investor => {
let obj = { let obj = {
BTC_base, BTC_base,
USD_base, USD_base,
@ -512,51 +561,35 @@
let [currentValue, gain] = calcNetValue(obj) let [currentValue, gain] = calcNetValue(obj)
currentValue = parseFloat(currentValue.toFixed(2)) currentValue = parseFloat(currentValue.toFixed(2))
timeElapsed = (new Date().getFullYear() - 2017) timeElapsed = (new Date().getFullYear() - 2017)
frag.append(render.bobFundRow({...investor, currentValue, gain, timeElapsed})) return render.bobFundRow({ ...investor, currentValue, gain, timeElapsed })
})
const fundContainer = create('div', {
className: 'grid series-container series-container--bobs-fund'
})
const heading = create('h4', {
className: 'margin-bottom-1r margin-top-1-5',
text: 'Fund investors'
})
fundContainer.append(frag)
timelineItem.append(heading, fundContainer)
}
else{
const fundCard = create('div', {
className: 'grid card'
}) })
timelineContents = html`<div class="grid series-container series-container--bobs-fund"> ${fundRows} </div>`;
} else {
let obj = { let obj = {
BTC_base, BTC_base,
USD_base, USD_base,
amount: invested, amount: invested,
fee: 0 fee: 0
} }
let [currentValue, gain] = calcNetValue(obj) let [currentValue, gain] = calcNetValue(obj)
currentValue = parseFloat(currentValue.toFixed(2)) currentValue = parseFloat(currentValue.toFixed(2))
fundCard.innerHTML = ` timelineContents = html`
<div class="flex space-between"> <div class="grid card">
<div class="grid"> <div class="flex space-between">
<h5 class="label color-0-8 weight-500">Total fund investment</h5> <div class="grid">
<h3 class="value original-value">${invested.toLocaleString('en-IN', {style: 'currency', currency: 'INR'})}</h3> <h5 class="label color-0-8 weight-500">Total fund investment</h5>
</div> <h3 class="value original-value">${formatAmount(invested, 'INR')}</h3>
<div class="grid justify-right text-align-right"> </div>
<h4 class="label color-0-8 weight-500">Current value</h4> <div class="grid justify-right text-align-right">
<h3 class="value current-value" style="color: var(--green)">${currentValue.toLocaleString('en-IN', {style: 'currency', currency: 'INR'})}</h3> <h4 class="label color-0-8 weight-500">Current value</h4>
<h3 class="value current-value" style="color: var(--green)">${formatAmount(currentValue, 'INR')}</h3>
</div>
</div> </div>
<a class="button button--filled justify-right" href='${href}' target="_blank">See investors</a>
</div> </div>
<a class="button button--filled justify-right" href='${href}' target="_blank">See investors</a>
` `
timelineItem.append(fundCard)
} }
timelineItem.prepend(tilelineItemHeader) if (index === 0) {
timelineItemsFrag.append(timelineItem)
if(index === 0){
let obj = { let obj = {
BTC_base, BTC_base,
USD_base, USD_base,
@ -565,31 +598,37 @@
release release
} }
renderGraph(obj) renderGraph(obj)
const fundCard = create('div', {
className: 'grid card'
})
let [currentValue, gain] = calcNetValue(obj) let [currentValue, gain] = calcNetValue(obj)
currentValue = parseFloat(currentValue.toFixed(2)) currentValue = parseFloat(currentValue.toFixed(2))
fundCard.innerHTML = ` const fundCard = html`
<div class="grid"> <div class="grid card">
<h5 class="label color-0-8 weight-500">Fund start date</h5>
<h3 class="value">${getFormatedTime(release, true)}</h3>
</div>
<div class="flex space-between">
<div class="grid"> <div class="grid">
<h5 class="label color-0-8 weight-500">Total fund investment</h5> <h5 class="label color-0-8 weight-500">Fund start date</h5>
<h3 class="value original-value">${invested.toLocaleString('en-IN', {style: 'currency', currency: 'INR'})}</h3> <h3 class="value">${getFormatedTime(release, true)}</h3>
</div> </div>
<div class="grid justify-right text-align-right"> <div class="flex space-between">
<h4 class="label color-0-8 weight-500">Current value</h4> <div class="grid">
<h3 class="value current-value" style="color: var(--green)">${currentValue.toLocaleString('en-IN', {style: 'currency', currency: 'INR'})}</h3> <h5 class="label color-0-8 weight-500">Total fund investment</h5>
<h3 class="value original-value">${formatAmount(invested, 'INR')}</h3>
</div>
<div class="grid justify-right text-align-right">
<h4 class="label color-0-8 weight-500">Current value</h4>
<h3 class="value current-value" style="color: var(--green)">${formatAmount(currentValue, 'INR')}</h3>
</div>
</div> </div>
</div> </div>
` `
getRef('performance_preview').append(fundCard) renderElem(getRef('performance_preview'), fundCard)
} }
return html`
<li class="timeline-item">
<h4 class="timeline-item__header">${getFormatedTime(release, true)}</h4>
<h4 class="margin-bottom-1r margin-top-1-5">Fund investors</h4>
${timelineContents}
</li>
`;
}) })
getRef('bobs_fund_timeline').append(timelineItemsFrag) renderElem(getRef('bobs_fund_timeline'), html`${timelineItems}`)
} }
async function getPrices() { async function getPrices() {
@ -626,7 +665,7 @@
let histBtc = parseFloat(allBtcPrices[index]) let histBtc = parseFloat(allBtcPrices[index])
let histUsd = parseFloat(inrPrices[dataPoint]['1. open']) let histUsd = parseFloat(inrPrices[dataPoint]['1. open'])
obj.isHistorical = true obj.isHistorical = true
let [currentValue, gain] = calcNetValue({...obj, histBtc, histUsd}) let [currentValue, gain] = calcNetValue({ ...obj, histBtc, histUsd })
// console.log(currentValue) // console.log(currentValue)
historicalData.push(currentValue) historicalData.push(currentValue)
index++ index++
@ -644,14 +683,14 @@
let textColor let textColor
let myChart let myChart
function selectGraphColors(){ function selectGraphColors() {
gradientFill = ctx.createLinearGradient(200, 0, 200, 400); gradientFill = ctx.createLinearGradient(200, 0, 200, 400);
let cssTextColor = getComputedStyle(document.body).getPropertyValue('--text-color') let cssTextColor = getComputedStyle(document.body).getPropertyValue('--text-color')
gradientFill.addColorStop(0, `rgba(${cssTextColor}, 0.2)`); gradientFill.addColorStop(0, `rgba(${cssTextColor}, 0.2)`);
gradientFill.addColorStop(1, "transparent"); gradientFill.addColorStop(1, "transparent");
if(myChart){ if (myChart) {
lineColor = ctx.createLinearGradient(0, 0, myChart.chartArea.width, 0) lineColor = ctx.createLinearGradient(0, 0, myChart.chartArea.width, 0)
}else{ } else {
lineColor = ctx.createLinearGradient(0, 0, 500, 0) lineColor = ctx.createLinearGradient(0, 0, 500, 0)
} }
lineColor.addColorStop(0, "#f49080"); lineColor.addColorStop(0, "#f49080");
@ -715,7 +754,7 @@
}); });
} }
getRef("theme_switcher").addEventListener("change", function (e) { document.addEventListener("themechange", function (e) {
selectGraphColors() selectGraphColors()
myChart.data.datasets[0].borderColor = lineColor myChart.data.datasets[0].borderColor = lineColor
myChart.data.datasets[0].backgroundColor = gradientFill myChart.data.datasets[0].backgroundColor = gradientFill
@ -726,4 +765,5 @@
}); });
</script> </script>
</body> </body>
</html> </html>

67
floblockchaincontract.html
View File

@ -24,7 +24,8 @@
<div class="grid"> <div class="grid">
<h4 class="h4 phase__title"></h4> <h4 class="h4 phase__title"></h4>
<h5 class="h5 phase__date weight-500 color-0-8"></h5> <h5 class="h5 phase__date weight-500 color-0-8"></h5>
<p class="phase__description color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime nihil doloremque, mollitia dolor minima et.</p> <p class="phase__description color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
nihil doloremque, mollitia dolor minima et.</p>
</div> </div>
</li> </li>
</template> </template>
@ -56,22 +57,24 @@
</header> </header>
<ul id="floor_list" class="grid"></ul> <ul id="floor_list" class="grid"></ul>
</section> </section>
<header id="main_header" class="grid align-center full-bleed"> <header id="main_header" class="full-bleed">
<button id="elevator_button" class="button" onclick="showSiteMap()"> <button id="elevator_button" class="button" onclick="showSiteMap()">
<svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg> <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
<path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
</svg>
<span class="button__label"> <span class="button__label">
Elevator Elevator
</span> </span>
</button> </button>
<a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page"> <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
<svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg> <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
</svg>
<h4 class="h4 header__company-name">RanchiMall</h4> <h4 class="h4 header__company-name">RanchiMall</h4>
</a> </a>
<label class="theme-switcher" title="Change theme"> <theme-toggle></theme-toggle>
<input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
<svg class="icon moon-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="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
<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> </header>
<div id="outlet_switcher" class="grid gap-1-5 hide"> <div id="outlet_switcher" class="grid gap-1-5 hide">
<div class="flex align-center"> <div class="flex align-center">
@ -95,9 +98,16 @@
<main class="page"> <main class="page">
<section class="outlet-hero-section grid margin-bottom-3r"> <section class="outlet-hero-section grid margin-bottom-3r">
<button class="outlet-label"> <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> <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__name">Outlet</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> <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> </button>
<h2 class="h2 weight-700 margin-bottom-1r">FLO Blockchain Contract</h2> <h2 class="h2 weight-700 margin-bottom-1r">FLO Blockchain Contract</h2>
<p> <p>
@ -109,13 +119,36 @@
<h4 class="room__label">Rooms</h4> <h4 class="room__label">Rooms</h4>
<scroll-tab-header data-target="ico_page_group"> <scroll-tab-header data-target="ico_page_group">
<button class="room-button" title="Investors"> <button class="room-button" title="Investors">
<svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>People</title><path d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/><path d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/></svg> <svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon'
viewBox='0 0 512 512'>
<title>People</title>
<path
d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z'
fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'
stroke-width='32' />
<path
d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z'
fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32' />
<path
d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z'
fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'
stroke-width='32' />
<path
d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154'
fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10'
stroke-width='32' />
</svg>
<span class="button__label"> <span class="button__label">
Product Product
</span> </span>
</button> </button>
<button class="room-button" title="Phases"> <button class="room-button" title="Phases">
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg> <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" />
</svg>
<span class="button__label"> <span class="button__label">
Projects Projects
</span> </span>
@ -130,8 +163,10 @@
<h3 class="h3 margin-bottom-1-5r">Projects</h3> <h3 class="h3 margin-bottom-1-5r">Projects</h3>
</scroll-tab-panels> </scroll-tab-panels>
</main> </main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="js/components.js"></script> <script src="assets/js/components.js"></script>
<script src="js/index.js"></script> <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
<script src="assets/js/index.js"></script>
</body> </body>
</html> </html>

128
ico.html
View File

@ -24,27 +24,12 @@
<div class="grid"> <div class="grid">
<h4 class="h4 phase__title"></h4> <h4 class="h4 phase__title"></h4>
<h5 class="h5 phase__date weight-500 color-0-8"></h5> <h5 class="h5 phase__date weight-500 color-0-8"></h5>
<p class="phase__description color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime nihil doloremque, mollitia dolor minima et.</p> <p class="phase__description color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
nihil doloremque, mollitia dolor minima et.</p>
</div> </div>
</li> </li>
</template> </template>
<template id="ico_investor_row">
<div class="person-card grid">
<img class="person__image" src="" alt="" loading="lazy">
<div class="investor-card__overlay grid gap-1-5">
<div class="grid investor__bio-container">
<h4 class="person__name capitalize"></h4>
<p class="investor__bio color-0-8"></p>
</div>
<div class="grid investor__contribution-container">
<!-- <h4 class="label color-0-8 weight-500">Contribution</h4> -->
<p class="investor__contribution"></p>
</div>
</div>
</div>
</template>
<section id="elevator_popup" class="grid hide-completely"> <section id="elevator_popup" class="grid hide-completely">
<header class="elevator__header"> <header class="elevator__header">
<button class="close-button justify-self-start" onclick="hideSiteMap()"> <button class="close-button justify-self-start" onclick="hideSiteMap()">
@ -58,22 +43,24 @@
</header> </header>
<ul id="floor_list" class="grid"></ul> <ul id="floor_list" class="grid"></ul>
</section> </section>
<header id="main_header" class="grid align-center full-bleed"> <header id="main_header" class="full-bleed">
<button id="elevator_button" class="button" onclick="showSiteMap()"> <button id="elevator_button" class="button" onclick="showSiteMap()">
<svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg> <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
<path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
</svg>
<span class="button__label"> <span class="button__label">
Elevator Elevator
</span> </span>
</button> </button>
<a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page"> <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
<svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg> <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
</svg>
<h4 class="h4 header__company-name">RanchiMall</h4> <h4 class="h4 header__company-name">RanchiMall</h4>
</a> </a>
<label class="theme-switcher" title="Change theme"> <theme-toggle></theme-toggle>
<input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
<svg class="icon moon-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="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
<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> </header>
<div id="outlet_switcher" class="grid gap-1-5 hide-completely"> <div id="outlet_switcher" class="grid gap-1-5 hide-completely">
<span id="outlet_switcher__floor_num" class="weight-500 color-0-8"></span> <span id="outlet_switcher__floor_num" class="weight-500 color-0-8"></span>
@ -93,7 +80,10 @@
<button class="outlet-label"> <button class="outlet-label">
<span class="outlet-label__name">Outlet</span> <span class="outlet-label__name">Outlet</span>
<span class="outlet-label__no"></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> <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> </button>
</section> </section>
<section class="rooms-layout"> <section class="rooms-layout">
@ -101,7 +91,21 @@
<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 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> <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>
@ -109,7 +113,11 @@
<a class="room-tile" href="#product_room"> <a class="room-tile" href="#product_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="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> <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> <h4 class="room-tile__title">Product</h4>
</div> </div>
@ -118,7 +126,15 @@
<a class="room-tile" href="#purchase_room"> <a class="room-tile" href="#purchase_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="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> <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> <h4 class="room-tile__title">Buy</h4>
</div> </div>
@ -128,7 +144,10 @@
<section class="room-container hide-completely page-layout"> <section class="room-container hide-completely page-layout">
<header class="room-container__header"> <header class="room-container__header">
<button class="grid flow-column gap-1 align-center" onclick="hideRoom()"> <button class="grid flow-column gap-1 align-center" onclick="hideRoom()">
<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="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg> <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="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z" />
</svg>
<h3 id="room_title" class="hide-completely"></h3> <h3 id="room_title" class="hide-completely"></h3>
</button> </button>
</header> </header>
@ -139,8 +158,10 @@
</section> </section>
<section id="product_room" class="grid room"> <section id="product_room" class="grid room">
<p class="margin-bottom-3r"> <p class="margin-bottom-3r">
Please refer to the whitepaper <a href="https://www.ranchimall.net/ICO/" target="_blank">here</a> for detailed terms. Please refer to the whitepaper <a href="https://www.ranchimall.net/ICO/"
RanchiMall Initial Coin Offering (ICO) abides by the terms we offered in our ICO whitepaper available target="_blank">here</a> for detailed terms.
RanchiMall Initial Coin Offering (ICO) abides by the terms we offered in our ICO whitepaper
available
at link above. We have made certain changes in our terms as our learning has improved. All at link above. We have made certain changes in our terms as our learning has improved. All
these changes are to support the interests of our long term investors. these changes are to support the interests of our long term investors.
</p> </p>
@ -148,7 +169,8 @@
<ol type="1"> <ol type="1">
<li> <li>
<p> <p>
RanchiMall Tokens (RMT) now own the financial gains emerging from all our blockchain contracts RanchiMall Tokens (RMT) now own the financial gains emerging from all our blockchain
contracts
</p> </p>
</li> </li>
<li> <li>
@ -164,14 +186,16 @@
<li> <li>
<p> <p>
Number of RMTs tokens in circulation has been paused to Number of RMTs tokens in circulation has been paused to
10000 instead of a release schedule of 21 million in 3 years. The un-issued tokens will stay vested 10000 instead of a release schedule of 21 million in 3 years. The un-issued tokens will
stay vested
with the Founder of RanchiMall. with the Founder of RanchiMall.
</p> </p>
</li> </li>
<li> <li>
<p> <p>
The price discovery during active phase has been USD 1500 per The price discovery during active phase has been USD 1500 per
token giving RMTs in circulation a valuation of 150 million USD. Unless this price is realised in open token giving RMTs in circulation a valuation of 150 million USD. Unless this price is
realised in open
makets on sustainable basis, new tokens will not be put in circulation. makets on sustainable basis, new tokens will not be put in circulation.
</p> </p>
</li> </li>
@ -180,8 +204,10 @@
<section id="purchase_room" class="grid room"> <section id="purchase_room" class="grid room">
<p> <p>
Currently we are not selling any RanchiMall Tokens (RMT). <br> You can buy tokens at Currently we are not selling any RanchiMall Tokens (RMT). <br> You can buy tokens at
our last valuation in <a href="https://www.ranchimall.net/exchange/" target="_blank">our exchange</a> to become a our last valuation in <a href="https://www.ranchimall.net/exchange/" target="_blank">our
token holder and be part of our community’s learning process. Our products are aimed at long term investors. exchange</a> to become a
token holder and be part of our community’s learning process. Our products are aimed at long
term investors.
<br> Once you become a token holder, please be patient and be prepared to stay the <br> Once you become a token holder, please be patient and be prepared to stay the
whole course of journey. You will not regret it. whole course of journey. You will not regret it.
</p> </p>
@ -193,8 +219,9 @@
</footer> </footer>
</section> </section>
</main> </main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="assets/js/components.js"></script> <script src="assets/js/components.js"></script>
<script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
<script src="assets/js/index.js"></script> <script src="assets/js/index.js"></script>
<script> <script>
const icoPhases = [ const icoPhases = [
@ -295,6 +322,12 @@ Social media`,
bio: 'Professional Services Consultant at AWS Cybersecurity', bio: 'Professional Services Consultant at AWS Cybersecurity',
contribution: `Long-term believer and supporter, Help in Australia, Assistance in our social media initiatives.`, contribution: `Long-term believer and supporter, Help in Australia, Assistance in our social media initiatives.`,
}, },
{
extension: 'jpg',
investorName: 'Puneet Sondh',
bio: 'Financial Services Professional, Double post-graduation in Finance from India and Netherlands, Believer in the power of Transformative Technology',
contribution: `Advice on strategic matters, Amplifying the voice on social media, Helps in the UAE region.`,
},
{ {
extension: 'jpg', extension: 'jpg',
investorName: 'Rajeev Kumar Gupta', investorName: 'Rajeev Kumar Gupta',
@ -334,9 +367,15 @@ Social media`,
bio: 'Business Excellence Professional, Sr. Manager at Tata Consultancy Services', bio: 'Business Excellence Professional, Sr. Manager at Tata Consultancy Services',
contribution: `One of our superstars, and one of the most energetic supporters in every activity,One of our dream investors, Very active help in our projects.`, contribution: `One of our superstars, and one of the most energetic supporters in every activity,One of our dream investors, Very active help in our projects.`,
}, },
{
extension: 'jpg',
investorName: 'Vikash Saw',
bio: 'Taxation Head (India & Mauritius) with Times Innovative Media Limited (Times of India Group)',
contribution: `A Long-term believer, helps with ideas, supports in social media growth.`,
},
] ]
function renderAllIcoPhases(){ function renderAllIcoPhases() {
getRef('ico_phase_list').innerHTML = '' getRef('ico_phase_list').innerHTML = ''
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
icoPhases.forEach(phase => { icoPhases.forEach(phase => {
@ -346,15 +385,14 @@ Social media`,
} }
// renderAllIcoPhases() // renderAllIcoPhases()
function renderAllIcoInvestors(){ function renderAllIcoInvestors() {
const frag = document.createDocumentFragment() const investors = icoInvestors.map(investor => {
getRef('ico_investors').innerHTML = '' return render.icoInvestorRow(investor, { thumbnail: false })
icoInvestors.forEach(investor => {
frag.append(render.icoInvestorRow(investor, {thumbnail: false}))
}) })
getRef('ico_investors').append(frag) renderElem(getRef('ico_investors'), html`${investors}`)
} }
renderAllIcoInvestors() renderAllIcoInvestors()
</script> </script>
</body> </body>
</html> </html>

60
incorporationblockchaincontract.html
View File

@ -28,22 +28,24 @@
</header> </header>
<ul id="floor_list" class="grid"></ul> <ul id="floor_list" class="grid"></ul>
</section> </section>
<header id="main_header" class="grid align-center full-bleed"> <header id="main_header" class="full-bleed">
<button id="elevator_button" class="button" onclick="showSiteMap()"> <button id="elevator_button" class="button" onclick="showSiteMap()">
<svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg> <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
<path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
</svg>
<span class="button__label"> <span class="button__label">
Elevator Elevator
</span> </span>
</button> </button>
<a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page"> <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
<svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg> <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
</svg>
<h4 class="h4 header__company-name">RanchiMall</h4> <h4 class="h4 header__company-name">RanchiMall</h4>
</a> </a>
<label class="theme-switcher" title="Change theme"> <theme-toggle></theme-toggle>
<input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
<svg class="icon moon-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="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
<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> </header>
<div id="outlet_switcher" class="grid gap-1-5 hide"> <div id="outlet_switcher" class="grid gap-1-5 hide">
<div class="flex align-center"> <div class="flex align-center">
@ -67,9 +69,16 @@
<main class="page"> <main class="page">
<section class="outlet-hero-section grid margin-bottom-3r"> <section class="outlet-hero-section grid margin-bottom-3r">
<button class="outlet-label"> <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> <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__name">Outlet</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> <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> </button>
<h2 class="h2 weight-700 margin-bottom-1r">Incorporation Blockchain Contract</h2> <h2 class="h2 weight-700 margin-bottom-1r">Incorporation Blockchain Contract</h2>
<p> <p>
@ -82,13 +91,23 @@
<h4 class="room__label">Rooms</h4> <h4 class="room__label">Rooms</h4>
<scroll-tab-header data-target="ico_page_group"> <scroll-tab-header data-target="ico_page_group">
<button class="room-button" title="Phases"> <button class="room-button" title="Phases">
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg> <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" />
</svg>
<span class="button__label"> <span class="button__label">
Product Product
</span> </span>
</button> </button>
<button class="room-button" title="Phases"> <button class="room-button" title="Phases">
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg> <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" />
</svg>
<span class="button__label"> <span class="button__label">
Purchase Purchase
</span> </span>
@ -107,13 +126,16 @@
<p class="margin-bottom-3r"> <p class="margin-bottom-3r">
Incorporation Blockchain Contract has been tokenised as RanchiMall Tokens Incorporation Blockchain Contract has been tokenised as RanchiMall Tokens
(RMT)We have sold 100000 such tokens till now. The product being sold here is RanchiMall Tokens (RMT)We have sold 100000 such tokens till now. The product being sold here is RanchiMall Tokens
(RMT)These tokens can also be purchased from <a href="ico.html">ICO Outlet on Floor 1</a>. However the tokens purchased (RMT)These tokens can also be purchased from <a href="ico.html">ICO Outlet on Floor 1</a>. However
the tokens purchased
here are on the blockchain unlike ICO Outlet where tokens are held in our own database. here are on the blockchain unlike ICO Outlet where tokens are held in our own database.
</p> </p>
<h4 class="h4 margin-bottom-1r">Useful links</h4> <h4 class="h4 margin-bottom-1r">Useful links</h4>
<p class="grid gap-1"> <p class="grid gap-1">
<a href="https://ranchimall.github.io/media/introduction/2_Blockchain_Contract.pdf">Blockchain Contract concept presentation</a> <a href="https://ranchimall.github.io/media/introduction/2_Blockchain_Contract.pdf">Blockchain
<a href="https://medium.com/@tripathyr/ranchi-mall-incorporation-blockchain-contract-24f256ee31f1">Medium article explaining Incorporation Blockchain Contract</a> Contract concept presentation</a>
<a href="https://medium.com/@tripathyr/ranchi-mall-incorporation-blockchain-contract-24f256ee31f1">Medium
article explaining Incorporation Blockchain Contract</a>
</p> </p>
</section> </section>
@ -126,8 +148,10 @@
</section> </section>
</scroll-tab-panels> </scroll-tab-panels>
</main> </main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="js/components.js"></script> <script src="assets/js/components.js"></script>
<script src="js/index.js"></script> <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
<script src="assets/js/index.js"></script>
</body> </body>
</html> </html>

227
index.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -11,40 +12,20 @@
<link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300..900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300..900&display=swap" rel="stylesheet">
</head> </head>
<body data-theme="light"> <body data-theme="light">
<sm-notifications id="notification_drawer"></sm-notifications> <sm-notifications id="notification_drawer"></sm-notifications>
<!-- Component templates -->
<template id="ico_investor_row">
<div class="investor-card grid gap-1-5">
<img class="investor__image" src="" alt="" loading="lazy">
<div class="grid">
<h3 class="investor__name value capitalize"></h3>
<p class="investor__bio color-0-8"></p>
</div>
<div class="grid investor__contribution-container">
<h4 class="label color-0-8 weight-500">Contribution</h4>
<p class="investor__contribution weight-700"></p>
</div>
</div>
</template>
<template id="floor_indicator_template">
<div class="floor-label interact">
<span class="floor-circle"></span>
</div>
</template>
<!-- -->
<!-- Popup --> <!-- Popup -->
<section id="elevator_popup" class="grid hide-completely"> <section id="elevator_popup" class="grid hide-completely">
<header class="elevator__header"> <header class="elevator__header">
<button class="close-button justify-self-start" onclick="hideSiteMap()"> <button class="close-button justify-self-start" onclick="hideSiteMap()">
<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> <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> </button>
</header> </header>
<ul id="floor_list" class="grid"></ul> <ul id="floor_list" class="grid"></ul>
@ -54,36 +35,37 @@
<header id="main_header" class="grid align-center full-bleed"> <header id="main_header" class="grid align-center full-bleed">
<button id="elevator_button" class="button" onclick="showSiteMap()"> <button id="elevator_button" class="button" onclick="showSiteMap()">
<svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg> <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
<path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
</svg>
<span class="button__label"> <span class="button__label">
Elevator Elevator
</span> </span>
</button> </button>
<a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page"> <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
<svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg> <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
</svg>
<h4 class="h4 header__company-name">RanchiMall</h4> <h4 class="h4 header__company-name">RanchiMall</h4>
</a> </a>
<label class="theme-switcher" title="Change theme"> <theme-toggle></theme-toggle>
<input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
<svg class="icon moon-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="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
<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> </header>
<article id="home_page" class="page"> <article id="home_page" class="page">
<aside id="floor_line_map" class="grid"> <!-- <aside id="floor_line_map" class="grid">
<div class="flex line-map justify-center"> <div class="flex line-map justify-center">
<div id="floor_line_map__circle" class="line-map__circle"></div> <div id="floor_line_map__circle" class="line-map__circle"></div>
<div class="line-map__bar"></div> <div class="line-map__bar"></div>
</div> </div>
<div id="floor_label_container"></div> <div id="floor_label_container"></div>
</aside> </aside> -->
<main id="floor_container" class="grid"></main> <main id="floor_container" class="grid"></main>
</article> </article>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="assets/js/components.js"></script> <script src="assets/js/components.js"></script>
<script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
<script src="assets/js/index.js"></script> <script src="assets/js/index.js"></script>
<script> <script>
const icoInvestors = [ const icoInvestors = [
@ -179,37 +161,31 @@
}, },
] ]
function renderAllSeries(){ function renderAllSeries() {
const frag = document.createDocumentFragment() const bonds = bitBondSeries.map((series, index) => {
getRef('bit_bond_series__container').innerHTML = '' return render.bitBondRow(series)
bitBondSerieses.forEach((series, index) => {
frag.append(render.bitBondRow(series))
}) })
getRef('bit_bond_series__container').append(frag) renderElem(getRef('bit_bond_series__container'), html`${bonds}`)
} }
function renderAllFundInvestors(){ function renderAllFundInvestors() {
const frag = document.createDocumentFragment() const funds = bobFund.map(investor => render.bobFundRow(investor))
getRef('bob_fund_investors__container').innerHTML = '' renderElem(getRef('bob_fund_investors__container'), html`${funds}`)
bobFund.forEach(investor => {
frag.append(render.bobFundRow(investor))
})
getRef('bob_fund_investors__container').append(frag)
} }
function renderAllIcoInvestors(){ function renderAllIcoInvestors() {
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
getRef('ico_investors__container').innerHTML = '' getRef('ico_investors__container').innerHTML = ''
icoInvestors.forEach(investor => { icoInvestors.forEach(investor => {
frag.append(render.icoInvestorRow(investor, {thumbnail: true})) frag.append(render.icoInvestorRow(investor, { thumbnail: true }))
}) })
getRef('ico_investors__container').append(frag) getRef('ico_investors__container').append(frag)
} }
/* renderAllIcoInvestors() /* renderAllIcoInvestors()
renderAllSeries() renderAllSeries()
renderAllFundInvestors() */ renderAllFundInvestors() */
function showOutletSwitcher(button){ function showOutletSwitcher(button) {
if(isOutletSwitcherOpen) return if (isOutletSwitcherOpen) return
isOutletSwitcherOpen = true isOutletSwitcherOpen = true
const buttonDimensions = button.getBoundingClientRect() const buttonDimensions = button.getBoundingClientRect()
getRef('outlet_switcher').setAttribute('style', `top: ${buttonDimensions.top + document.documentElement.scrollTop}px; left: ${buttonDimensions.left}px;`) getRef('outlet_switcher').setAttribute('style', `top: ${buttonDimensions.top + document.documentElement.scrollTop}px; left: ${buttonDimensions.left}px;`)
@ -224,129 +200,116 @@
const allOutletCarousels = document.querySelectorAll('.outlet-preview sm-carousel') const allOutletCarousels = document.querySelectorAll('.outlet-preview sm-carousel')
let homepagePercent = floorLineMapPercent = 0 let homepagePercent = floorLineMapPercent = 0
const RO = new ResizeObserver(entries => { // const RO = new ResizeObserver(entries => {
entries.forEach(entry => { // entries.forEach(entry => {
homepagePercent = getRef('floor_container').scrollHeight / 100 // homepagePercent = getRef('floor_container').scrollHeight / 100
floorLineMapPercent = getRef('floor_line_map').getBoundingClientRect().height / 100 // floorLineMapPercent = getRef('floor_line_map').getBoundingClientRect().height / 100
renderAllFloorLabels() // renderAllFloorLabels()
updatePos() // updatePos()
}); // });
}) // })
RO.observe(document.body) // RO.observe(document.body)
function getScrollPercent() { function getScrollPercent() {
const root = getRef('home_page') const root = getRef('home_page')
return (root.scrollTop) / ((root.scrollHeight) - root.clientHeight) * 100; return (root.scrollTop) / ((root.scrollHeight) - root.clientHeight) * 100;
} }
getRef('home_page').addEventListener('scroll', e => { // getRef('home_page').addEventListener('scroll', e => {
throttle(updatePos, 1000 / 30) // throttle(updatePos, 1000 / 30)
}, {passive: true}) // }, { passive: true })
function updatePos(){ function updatePos() {
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
getRef('floor_line_map__circle').setAttribute('style', `transform: translateY(${(getScrollPercent()) * (floorLineMapPercent)}px)`) getRef('floor_line_map__circle').setAttribute('style', `transform: translateY(${(getScrollPercent()) * (floorLineMapPercent)}px)`)
}) })
} }
function renderAllFloorLabels(){ function renderAllFloorLabels() {
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
document.querySelectorAll('.floor').forEach((floor, index) => { document.querySelectorAll('.floor').forEach((floor, index) => {
getRef('floor_label_container').innerHTML = '' getRef('floor_label_container').innerHTML = ''
const top = ((floor.getBoundingClientRect().top - getRef('floor_container').getBoundingClientRect().top + getRef('floor_container').offsetTop) / homepagePercent) * floorLineMapPercent const top = ((floor.getBoundingClientRect().top - getRef('floor_container').getBoundingClientRect().top + getRef('floor_container').offsetTop) / homepagePercent) * floorLineMapPercent
const label = render.floorLabel(index + 1, top) const label = render.floorLabel(index + 1, top)
frag.append(label) frag.append(label)
}) })
getRef('floor_label_container').append(frag) getRef('floor_label_container').append(frag)
} }
const floorObserver = new IntersectionObserver( entries => { const floorObserver = new IntersectionObserver(entries => {
entries.forEach(entry => { entries.forEach(entry => {
if(entry.isIntersecting){ if (entry.isIntersecting) {
document.querySelector(`.floor-label[data-target="${entry.target.id}"]`).classList.add('floor-label--active') document.querySelector(`.floor-label[data-target="${entry.target.id}"]`).classList.add('floor-label--active')
} }
else{ else {
document.querySelector(`.floor-label[data-target="${entry.target.id}"]`).classList.remove('floor-label--active') document.querySelector(`.floor-label[data-target="${entry.target.id}"]`).classList.remove('floor-label--active')
} }
}) })
}, },
{ {
threshold: 0.2 threshold: 0.2
}) })
document.querySelectorAll('.floor').forEach(floor => floorObserver.observe(floor)) document.querySelectorAll('.floor').forEach(floor => floorObserver.observe(floor))
function renderFloor(obj){ function renderFloor(obj) {
const {floorNo, floor, brief, outlets} = obj const { floorNo, floor, brief, outlets } = obj
const floorSection = create('section', {className: 'floor'}) return html`
floorSection.id = `floor_${floorNo + 1}` <section id=${`floor_${floorNo + 1}`} class="floor">
floorSection.innerHTML = ` <header class="floor__header grid align-center">
<header class="floor__header grid align-center"> <h4 class="floor__num">Floor ${floorNo + 1}</h5>
<h4 class="floor__num">Floor ${floorNo + 1}</h5> <h4 class="floor__title">${floor}</h3>
<h4 class="floor__title">${floor}</h3> </header>
</header> <main id=${`floor_${floorNo + 1}__outlets`} class="grid outlets-container">
<main id="floor_${floorNo + 1}__outlets" class="grid outlets-container"> <p>${brief}</p>
<p>${brief}</p> ${outlets}
</main> </main>
` </section>
floorSection.querySelector(`#floor_${floorNo + 1}__outlets`).append(outlets) `;
return floorSection;
} }
function renderAllFloors(){ function renderAllFloors() {
const frag = document.createDocumentFragment() const floorOutlets = siteMap.map((floor, floorNo) => {
siteMap.forEach((floor, floorNo) => { return renderFloor({ ...floor, floorNo, outlets: renderFloorOutlets(floor.outlets) })
frag.append(renderFloor({...floor, floorNo, outlets: renderFloorOutlets(floor.outlets)}))
}) })
getRef('floor_container').append(frag) renderElem(getRef('floor_container'), html`${floorOutlets}`)
} }
renderAllFloors() renderAllFloors()
function renderOutletPreview(obj){ function renderOutletPreview(obj) {
const {outletNo, name, brief, url, buyUrl, isSold} = obj const { outletNo, name, brief, outletLinks } = obj
const preview = create('section', { return html`
className: 'outlet-preview carousel-container' <section class="outlet-preview">
}) <div class="grid outlet-preview__info">
let composed = ` <h3 class="outlet__title">${name}</h3>
<div class="grid outlet-preview__info"> <p class="outlet__description margin-bottom-1-5r">${brief}</p>
<h3 class="outlet__title">${name}</h3> <div class="flex flex-wrap gap-1-5 justify-start">
<p class="outlet__description margin-bottom-1-5r">${brief}</p> ${outletLinks.map(link => renderOutletLink(link))}
<div class="grid flow-column gap-1-5 justify-start">
`
if(isSold){
composed += `
<a href="${url}#${buyUrl}" class="button outlet-preview__button">
<span class="button__label">Buy</span>
</a>
`
}
composed += `
<a href="${url}" class="button outlet-preview__button">
<span class="button__label">Explore</span>
</a>
</div> </div>
</div> </div>
<!-- <div class="grid carousel-holder carousel-holder--right">
<sm-carousel id="bit_bond_series__container" class="outlet-preview__carousel" indicator></sm-carousel>
</div> -->
<div class="grid outlet-preview__number-container"> <div class="grid outlet-preview__number-container">
<h1 class="outlet-preview__number-title h2 color-0-3 weight-900">Outlet</h1> <h1 class="outlet-preview__number-title h2 color-0-3 weight-900">Outlet</h1>
<h1 class="outlet-preview__number" data-number="${outletNo + 1}">${outletNo + 1}</h1> <h1 class="outlet-preview__number" data-number="${outletNo + 1}">${outletNo + 1}</h1>
</div> </div>
`;
}
function renderOutletLink(linkDetails) {
const { label, url, outbound } = linkDetails
return html`
<a href=${url} class="button outlet-preview__button" target=${outbound ? '_blank' : ''}>
<span class="button__label">${label}</span>
</a>
` `
preview.innerHTML = composed
return preview;
} }
function renderFloorOutlets(outlets){ function renderFloorOutlets(outlets) {
const frag = document.createDocumentFragment() return outlets.map((outlet, outletNo) => {
outlets.forEach((outlet, outletNo) => { return renderOutletPreview({ ...outlet, outletNo })
frag.append(renderOutletPreview({...outlet, outletNo}))
}) })
return frag
} }
</script> </script>
</body> </body>
</html> </html>

118
internshipblockchaincontract.html
View File

@ -30,39 +30,57 @@
<sm-popup id="intern_level_popup"> <sm-popup id="intern_level_popup">
<header class="popup__header" slot="header"> <header class="popup__header" slot="header">
<button class="close-button" onclick="getRef('intern_level_popup').hide()"> <button class="close-button" onclick="getRef('intern_level_popup').hide()">
<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> <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> </button>
<h4>Intern level information</h4> <h4>Intern level information</h4>
</header> </header>
<section class="grid"> <section class="grid">
<header class="table margin-bottom-1-5r"> <header class="table margin-bottom-1-5r">
<h4>Level</h4> <h4>Level</h4>
<h4 >Details</h4> <h4>Details</h4>
</header> </header>
<section class="table"> <section class="table">
<div> <div>
Starter Starter
</div> </div>
<p> <p>
Starter Level is the qualification level. This is learning stage and will lead to award of certificates to those who clear this level. In general we do not want to pay at this at level because money changes motivations. And we want to identify most passionate interns at their level, who would love their work even if no monetary consideration is involved Starter Level is the qualification level. This is learning stage and will lead to award of
certificates to those who clear this level. In general we do not want to pay at this at level
because money changes motivations. And we want to identify most passionate interns at their level,
who would love their work even if no monetary consideration is involved
</p> </p>
<div> <div>
Motivated Motivated
</div> </div>
<p> <p>
Motivated is one time rewards stage. The complexity of projects will increase in this stage. If projects are successfully completed, then one time rewards will be given. All this will be known before hand. Project details, acceptance criteria, and amounts will be notified in advance to interns. Motivated is one time rewards stage. The complexity of projects will increase in this stage. If
projects are successfully completed, then one time rewards will be given. All this will be known
before hand. Project details, acceptance criteria, and amounts will be notified in advance to
interns.
</p> </p>
<div> <div>
Passionate Passionate
</div> </div>
<p> <p>
Passionate is the first regular fixed stipend stage. The projects complexity will increase still further. This will be full scale commercial grade project. if 3 such projects are completed then one of the criteria to move into self driven stage will be met. Now we are looking for interns who in addition to being passionate are self driven, and can independently take on and complete full projects without day to day supervision. Passionate is the first regular fixed stipend stage. The projects complexity will increase still
further. This will be full scale commercial grade project. if 3 such projects are completed then one
of the criteria to move into self driven stage will be met. Now we are looking for interns who in
addition to being passionate are self driven, and can independently take on and complete full
projects without day to day supervision.
</p> </p>
<div> <div>
Self Driven Self Driven
</div> </div>
<p> <p>
Self Driven interns is the stage where are we are considering interns for permanent employment with Ranchi Mall. The internship stipends will be higher. Some of self driven interns will be guide interns in other levels. The key criteria is ability of complete jobs with high quality, and them taking self initiative. Self Driven interns is the stage where are we are considering interns for permanent employment with
Ranchi Mall. The internship stipends will be higher. Some of self driven interns will be guide
interns in other levels. The key criteria is ability of complete jobs with high quality, and them
taking self initiative.
</p> </p>
</section> </section>
</section> </section>
@ -81,22 +99,24 @@
</header> </header>
<ul id="floor_list" class="grid"></ul> <ul id="floor_list" class="grid"></ul>
</section> </section>
<header id="main_header" class="grid align-center full-bleed"> <header id="main_header" class="full-bleed">
<button id="elevator_button" class="button" onclick="showSiteMap()"> <button id="elevator_button" class="button" onclick="showSiteMap()">
<svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg> <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
<path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
</svg>
<span class="button__label"> <span class="button__label">
Elevator Elevator
</span> </span>
</button> </button>
<a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page"> <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
<svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg> <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
</svg>
<h4 class="h4 header__company-name">RanchiMall</h4> <h4 class="h4 header__company-name">RanchiMall</h4>
</a> </a>
<label class="theme-switcher" title="Change theme"> <theme-toggle></theme-toggle>
<input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
<svg class="icon moon-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="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
<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> </header>
<div id="outlet_switcher" class="grid gap-1-5 hide"> <div id="outlet_switcher" class="grid gap-1-5 hide">
<div class="flex align-center"> <div class="flex align-center">
@ -120,26 +140,57 @@
<main class="page"> <main class="page">
<section class="outlet-hero-section grid margin-bottom-3r"> <section class="outlet-hero-section grid margin-bottom-3r">
<button class="outlet-label"> <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> <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__name">Outlet</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> <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> </button>
<h2 class="h2 weight-700 margin-bottom-1r">Internship Blockchain Contract</h2> <h2 class="h2 weight-700 margin-bottom-1r">Internship Blockchain Contract</h2>
<p> <p>
Internship Blockchain Contract tokenizes all our internship initiatives. This is ownedby Incorporation Blockchain Contract. Internship Blockchain Contract tokenizes all our internship initiatives. This is ownedby Incorporation
Blockchain Contract.
</p> </p>
</section> </section>
<div class="rooms__header"> <div class="rooms__header">
<h4 class="room__label">Rooms</h4> <h4 class="room__label">Rooms</h4>
<scroll-tab-header data-target="ico_page_group"> <scroll-tab-header data-target="ico_page_group">
<button class="room-button" title="Investors"> <button class="room-button" title="Investors">
<svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>People</title><path d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/><path d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/></svg> <svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon'
viewBox='0 0 512 512'>
<title>People</title>
<path
d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z'
fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'
stroke-width='32' />
<path
d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z'
fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32' />
<path
d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z'
fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'
stroke-width='32' />
<path
d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154'
fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10'
stroke-width='32' />
</svg>
<span class="button__label"> <span class="button__label">
Interns Interns
</span> </span>
</button> </button>
<button class="room-button" title="Phases"> <button class="room-button" title="Phases">
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg> <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" />
</svg>
<span class="button__label"> <span class="button__label">
Projects Projects
</span> </span>
@ -154,8 +205,10 @@
<section> <section>
<h3 class="h3 margin-bottom-1-5r">Projects</h3> <h3 class="h3 margin-bottom-1-5r">Projects</h3>
<p class="margin-bottom-3r"> <p class="margin-bottom-3r">
Please refer to the whitepaper <a href="https://www.ranchimall.net/ICO/">here</a> for detailed terms. Please refer to the whitepaper <a href="https://www.ranchimall.net/ICO/">here</a> for detailed
RanchiMall Initial Coin Offering (ICO) abides by the terms we offered in our ICO whitepaper available terms.
RanchiMall Initial Coin Offering (ICO) abides by the terms we offered in our ICO whitepaper
available
at link above. We have made certain changes in our terms as our learning has improved. All at link above. We have made certain changes in our terms as our learning has improved. All
these changes are to support the interests of our long term investors. these changes are to support the interests of our long term investors.
</p> </p>
@ -163,7 +216,8 @@
<ol type="1"> <ol type="1">
<li> <li>
<p> <p>
RanchiMall Tokens (RMT) now own the financial gains emerging from all our blockchain contracts RanchiMall Tokens (RMT) now own the financial gains emerging from all our blockchain
contracts
</p> </p>
</li> </li>
<li> <li>
@ -179,14 +233,16 @@
<li> <li>
<p> <p>
Number of RMTs tokens in circulation has been paused to Number of RMTs tokens in circulation has been paused to
10000 instead of a release schedule of 21 million in 3 years. The un-issued tokens will stay vested 10000 instead of a release schedule of 21 million in 3 years. The un-issued tokens will stay
vested
with the Founder of RanchiMall. with the Founder of RanchiMall.
</p> </p>
</li> </li>
<li> <li>
<p> <p>
The price discovery during active phase has been USD 1500 per The price discovery during active phase has been USD 1500 per
token giving RMTs in circulation a valuation of 150 million USD. Unless this price is realised in open token giving RMTs in circulation a valuation of 150 million USD. Unless this price is
realised in open
makets on sustainable basis, new tokens will not be put in circulation. makets on sustainable basis, new tokens will not be put in circulation.
</p> </p>
</li> </li>
@ -194,9 +250,10 @@
</section> </section>
</scroll-tab-panels> </scroll-tab-panels>
</main> </main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="js/components.js"></script> <script src="assets/js/components.js"></script>
<script src="js/index.js"></script> <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
<script src="assets/js/index.js"></script>
<script> <script>
const interns = [ const interns = [
{ {
@ -271,7 +328,7 @@
}, },
] ]
function renderAllInterns(){ function renderAllInterns() {
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
getRef('interns_container').innerHTML = '' getRef('interns_container').innerHTML = ''
interns.forEach(investor => { interns.forEach(investor => {
@ -281,11 +338,12 @@
} }
renderAllInterns() renderAllInterns()
document.addEventListener('click', e=> { document.addEventListener('click', e => {
if(e.target.closest('.intern__level')){ if (e.target.closest('.intern__level')) {
getRef('intern_level_popup').show() getRef('intern_level_popup').show()
} }
}) })
</script> </script>
</body> </body>
</html> </html>

150
new-layout.html
View File

@ -28,41 +28,49 @@
</header> </header>
<ul id="floor_list" class="grid"></ul> <ul id="floor_list" class="grid"></ul>
</section> </section>
<header id="main_header" class="grid align-center full-bleed"> <header id="main_header" class="full-bleed">
<button id="elevator_button" class="button" onclick="showSiteMap()"> <button id="elevator_button" class="button" onclick="showSiteMap()">
<svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg> <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
<path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
</svg>
<span class="button__label"> <span class="button__label">
Elevator Elevator
</span> </span>
</button> </button>
<a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page"> <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
<svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg> <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
</svg>
<h4 class="h4 header__company-name">RanchiMall</h4> <h4 class="h4 header__company-name">RanchiMall</h4>
</a> </a>
<label class="theme-switcher" title="Change theme"> <theme-toggle></theme-toggle>
<input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
<svg class="icon moon-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="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
<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> </header>
<section class="banner"> <section class="banner">
<p class="banner__text"> <p class="banner__text">
We are servicing current customers only. A new Blockchain-based version of Bob's Fund will be available soon. We are servicing current customers only. A new Blockchain-based version of Bob's Fund will be available
soon.
</p> </p>
<button class="close-button" onclick="this.parentNode.remove()"> <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> <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> </button>
</section> </section>
<div id="outlet_switcher" class="grid gap-1-5 hide-completely"> <div id="outlet_switcher" class="grid gap-1-5 hide-completely">
<div class="flex align-center"> <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" <!-- <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
height="24"> height="24">
<path fill="none" d="M0 0h24v24H0z" /> <path fill="none" d="M0 0h24v24H0z" />
<path <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" /> 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> --> </svg> -->
<span id="outlet_switcher__floor_num" class="weight-500 color-0-8"></span> <span id="outlet_switcher__floor_num" class="weight-500 color-0-8"></span>
<!-- <button class="justify-right" onclick="hideOutletSwitcher()"> <!-- <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"> <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 fill="none" d="M0 0h24v24H0z" />
<path <path
@ -79,38 +87,62 @@
<section class="features-grid"> <section class="features-grid">
<div class="feature"> <div class="feature">
<div class="feature__icon"> <div class="feature__icon">
<svg class="icon" id="f47905c4-be19-4535-912c-ac0a41d5362d" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M55.59,38a10.43,10.43,0,0,0-3.09-4.19,12.61,12.61,0,0,0-5.4-2.46,11.57,11.57,0,0,0,5.75-4.7,13.39,13.39,0,0,0,1.86-7q0-7.62-5.86-11.46c-3.64-2.39-8.62-3.65-14.91-3.82V0H25.38V4.28H21.7V0H13.14V4.28H7.42v7.84l5.75,1.22V50.7L7.42,51.91v7.81h6.69V64h8.56V59.72h3.68V64h8.56V59.72h.42q10.37,0,15.8-4.15t5.45-12.3A14.09,14.09,0,0,0,55.59,38ZM41.35,21.11A5.14,5.14,0,0,1,39,25.77q-2.34,1.52-7.07,1.51h-5.4V14.48h6q4.45,0,6.65,1.58A5.81,5.81,0,0,1,41.35,21.11ZM41.29,48q-2,1.56-6,1.56H26.54V36.11H36a9.61,9.61,0,0,1,4.19.78,5,5,0,0,1,2.36,2.36,9.14,9.14,0,0,1,.76,4A5.66,5.66,0,0,1,41.29,48Z"/></svg> <svg class="icon" id="f47905c4-be19-4535-912c-ac0a41d5362d" data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path
d="M55.59,38a10.43,10.43,0,0,0-3.09-4.19,12.61,12.61,0,0,0-5.4-2.46,11.57,11.57,0,0,0,5.75-4.7,13.39,13.39,0,0,0,1.86-7q0-7.62-5.86-11.46c-3.64-2.39-8.62-3.65-14.91-3.82V0H25.38V4.28H21.7V0H13.14V4.28H7.42v7.84l5.75,1.22V50.7L7.42,51.91v7.81h6.69V64h8.56V59.72h3.68V64h8.56V59.72h.42q10.37,0,15.8-4.15t5.45-12.3A14.09,14.09,0,0,0,55.59,38ZM41.35,21.11A5.14,5.14,0,0,1,39,25.77q-2.34,1.52-7.07,1.51h-5.4V14.48h6q4.45,0,6.65,1.58A5.81,5.81,0,0,1,41.35,21.11ZM41.29,48q-2,1.56-6,1.56H26.54V36.11H36a9.61,9.61,0,0,1,4.19.78,5,5,0,0,1,2.36,2.36,9.14,9.14,0,0,1,.76,4A5.66,5.66,0,0,1,41.29,48Z" />
</svg>
</div> </div>
<h4 class="feature__title">Bitcoin linked</h4> <h4 class="feature__title">Bitcoin linked</h4>
<p class="feature__brief">Bob's Fund is a 20 year long term Bitcoin price linked product</p> <p class="feature__brief">Bob's Fund is a 20 year long term Bitcoin price linked product</p>
</div> </div>
<div class="feature feature--wide"> <div class="feature feature--wide">
<div class="feature__icon"> <div class="feature__icon">
<svg class="icon" id="a0972e55-309b-4721-ab64-f0e363b1245c" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32,11.86a18.06,18.06,0,1,0,18,18.06A18.08,18.08,0,0,0,32,11.86Zm8.45,14.45-9.57,9.57a1.65,1.65,0,0,1-1.17.48,1.67,1.67,0,0,1-1.18-.48l-5-5a1.66,1.66,0,0,1,2.35-2.35l3.81,3.8L38.1,24a1.66,1.66,0,1,1,2.35,2.35Z"/><path d="M59.42,26.2a5.89,5.89,0,0,0-3.05-9.4h0a5.89,5.89,0,0,1-4.37-6A5.89,5.89,0,0,0,44,5a5.89,5.89,0,0,1-7.07-2.29h0a5.88,5.88,0,0,0-9.88,0A5.89,5.89,0,0,1,20,5a5.89,5.89,0,0,0-8,5.81h0a5.89,5.89,0,0,1-4.37,6,5.89,5.89,0,0,0-3,9.4h0a5.91,5.91,0,0,1,0,7.43A5.89,5.89,0,0,0,7.63,43,5.88,5.88,0,0,1,12,48.94L6.37,58.68a.34.34,0,0,0,.29.51l5.14.05a.34.34,0,0,1,.29.17l2.61,4.42a.33.33,0,0,0,.58,0l5.28-9.14a5.87,5.87,0,0,1,6.5,2.45h0a5.88,5.88,0,0,0,9.88,0h0a5.87,5.87,0,0,1,6.5-2.45l5.28,9.14a.33.33,0,0,0,.58,0l2.61-4.42a.34.34,0,0,1,.29-.17l5.14-.05a.34.34,0,0,0,.29-.51L52,48.94A5.88,5.88,0,0,1,56.37,43a5.89,5.89,0,0,0,3.05-9.4A5.91,5.91,0,0,1,59.42,26.2ZM32,50A20.06,20.06,0,1,1,52.06,29.92,20.08,20.08,0,0,1,32,50Z"/></svg> <svg class="icon" id="a0972e55-309b-4721-ab64-f0e363b1245c" data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path
d="M32,11.86a18.06,18.06,0,1,0,18,18.06A18.08,18.08,0,0,0,32,11.86Zm8.45,14.45-9.57,9.57a1.65,1.65,0,0,1-1.17.48,1.67,1.67,0,0,1-1.18-.48l-5-5a1.66,1.66,0,0,1,2.35-2.35l3.81,3.8L38.1,24a1.66,1.66,0,1,1,2.35,2.35Z" />
<path
d="M59.42,26.2a5.89,5.89,0,0,0-3.05-9.4h0a5.89,5.89,0,0,1-4.37-6A5.89,5.89,0,0,0,44,5a5.89,5.89,0,0,1-7.07-2.29h0a5.88,5.88,0,0,0-9.88,0A5.89,5.89,0,0,1,20,5a5.89,5.89,0,0,0-8,5.81h0a5.89,5.89,0,0,1-4.37,6,5.89,5.89,0,0,0-3,9.4h0a5.91,5.91,0,0,1,0,7.43A5.89,5.89,0,0,0,7.63,43,5.88,5.88,0,0,1,12,48.94L6.37,58.68a.34.34,0,0,0,.29.51l5.14.05a.34.34,0,0,1,.29.17l2.61,4.42a.33.33,0,0,0,.58,0l5.28-9.14a5.87,5.87,0,0,1,6.5,2.45h0a5.88,5.88,0,0,0,9.88,0h0a5.87,5.87,0,0,1,6.5-2.45l5.28,9.14a.33.33,0,0,0,.58,0l2.61-4.42a.34.34,0,0,1,.29-.17l5.14-.05a.34.34,0,0,0,.29-.51L52,48.94A5.88,5.88,0,0,1,56.37,43a5.89,5.89,0,0,0,3.05-9.4A5.91,5.91,0,0,1,59.42,26.2ZM32,50A20.06,20.06,0,1,1,52.06,29.92,20.08,20.08,0,0,1,32,50Z" />
</svg>
</div> </div>
<h4 class="feature__title">Better returns than conventional assets</h4> <h4 class="feature__title">Better returns than conventional assets</h4>
<p class="feature__brief">Over a very long time period, Bitcoin returns should outstrip returns on conventional assets like real estate and stocks</p> <p class="feature__brief">Over a very long time period, Bitcoin returns should outstrip returns on
conventional assets like real estate and stocks</p>
</div> </div>
<div class="feature feature--wide"> <div class="feature feature--wide">
<div class="feature__icon"> <div class="feature__icon">
<svg class="icon" id="a9cf0968-17a3-4e2e-8dcf-10d366d12d28" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M17.28,29a16.35,16.35,0,0,1-7.63-1.64,11.32,11.32,0,0,1-4.77-4.54,13.17,13.17,0,0,1-1.63-6.61V12.88A13.3,13.3,0,0,1,4.88,6.25,11.52,11.52,0,0,1,9.6,1.67,15.9,15.9,0,0,1,17.2,0a15.94,15.94,0,0,1,7.63,1.67,11.43,11.43,0,0,1,4.71,4.55,13.5,13.5,0,0,1,1.6,6.66v3.29a13.36,13.36,0,0,1-1.6,6.61,11.33,11.33,0,0,1-4.68,4.54A16,16,0,0,1,17.28,29Zm0-8a3.94,3.94,0,0,0,3.21-1.39,5.13,5.13,0,0,0,1.16-3.4V12.88a5.31,5.31,0,0,0-1.16-3.47A4,4,0,0,0,17.2,8a3.94,3.94,0,0,0-3.27,1.41,5.35,5.35,0,0,0-1.14,3.47v3.29A5.11,5.11,0,0,0,14,19.59,4.09,4.09,0,0,0,17.28,21Zm3,37.61-6.93-3.43L43.76,6.46,50.7,9.88ZM46.89,64a16.15,16.15,0,0,1-7.64-1.67,11.75,11.75,0,0,1-4.81-4.58,13,13,0,0,1-1.67-6.58V47.91a13.19,13.19,0,0,1,1.63-6.58,11.41,11.41,0,0,1,4.77-4.58,16.11,16.11,0,0,1,7.63-1.67,16,16,0,0,1,7.6,1.65,11.39,11.39,0,0,1,4.72,4.55,13.3,13.3,0,0,1,1.63,6.63v3.26a13.5,13.5,0,0,1-1.61,6.63,11.29,11.29,0,0,1-4.68,4.55A15.87,15.87,0,0,1,46.89,64Zm0-8c1.68,0,2.81-.42,3.4-1.26a6.33,6.33,0,0,0,.88-3.61V47.91a5.31,5.31,0,0,0-1.12-3.42,3.88,3.88,0,0,0-3.25-1.41,4,4,0,0,0-3.33,1.41,5.31,5.31,0,0,0-1.12,3.42v3.26a4.93,4.93,0,0,0,1.33,3.42A4.17,4.17,0,0,0,46.89,56Z"/></svg> <svg class="icon" id="a9cf0968-17a3-4e2e-8dcf-10d366d12d28" data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path
d="M17.28,29a16.35,16.35,0,0,1-7.63-1.64,11.32,11.32,0,0,1-4.77-4.54,13.17,13.17,0,0,1-1.63-6.61V12.88A13.3,13.3,0,0,1,4.88,6.25,11.52,11.52,0,0,1,9.6,1.67,15.9,15.9,0,0,1,17.2,0a15.94,15.94,0,0,1,7.63,1.67,11.43,11.43,0,0,1,4.71,4.55,13.5,13.5,0,0,1,1.6,6.66v3.29a13.36,13.36,0,0,1-1.6,6.61,11.33,11.33,0,0,1-4.68,4.54A16,16,0,0,1,17.28,29Zm0-8a3.94,3.94,0,0,0,3.21-1.39,5.13,5.13,0,0,0,1.16-3.4V12.88a5.31,5.31,0,0,0-1.16-3.47A4,4,0,0,0,17.2,8a3.94,3.94,0,0,0-3.27,1.41,5.35,5.35,0,0,0-1.14,3.47v3.29A5.11,5.11,0,0,0,14,19.59,4.09,4.09,0,0,0,17.28,21Zm3,37.61-6.93-3.43L43.76,6.46,50.7,9.88ZM46.89,64a16.15,16.15,0,0,1-7.64-1.67,11.75,11.75,0,0,1-4.81-4.58,13,13,0,0,1-1.67-6.58V47.91a13.19,13.19,0,0,1,1.63-6.58,11.41,11.41,0,0,1,4.77-4.58,16.11,16.11,0,0,1,7.63-1.67,16,16,0,0,1,7.6,1.65,11.39,11.39,0,0,1,4.72,4.55,13.3,13.3,0,0,1,1.63,6.63v3.26a13.5,13.5,0,0,1-1.61,6.63,11.29,11.29,0,0,1-4.68,4.55A15.87,15.87,0,0,1,46.89,64Zm0-8c1.68,0,2.81-.42,3.4-1.26a6.33,6.33,0,0,0,.88-3.61V47.91a5.31,5.31,0,0,0-1.12-3.42,3.88,3.88,0,0,0-3.25-1.41,4,4,0,0,0-3.33,1.41,5.31,5.31,0,0,0-1.12,3.42v3.26a4.93,4.93,0,0,0,1.33,3.42A4.17,4.17,0,0,0,46.89,56Z" />
</svg>
</div> </div>
<h4 class="feature__title">Get 100% of gains</h4> <h4 class="feature__title">Get 100% of gains</h4>
<p class="feature__brief">Investors are entitled to 100% of Bitcoin price gains</p> <p class="feature__brief">Investors are entitled to 100% of Bitcoin price gains</p>
</div> </div>
<div class="feature"> <div class="feature">
<div class="feature__icon"> <div class="feature__icon">
<svg class="icon" id="b25d5f7d-dd5a-4cc1-a2c9-37dbecdeaff1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32.11,64q-10.12,0-16-6.41t-5.9-19V25.46q0-12.56,5.9-19T32,0Q42,0,47.89,6.45t5.92,19V38.58q0,12.6-5.87,19T32.11,64Zm0-11.41a5.53,5.53,0,0,0,5-3q1.76-3,1.75-10.15V24.52c0-4.67-.6-8-1.79-10a5.87,5.87,0,0,0-10.26,0q-1.76,3-1.75,10.06V39.43q0,7.18,1.75,10.17A5.7,5.7,0,0,0,32.11,52.59Z"/></svg> <svg class="icon" id="b25d5f7d-dd5a-4cc1-a2c9-37dbecdeaff1" data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path
d="M32.11,64q-10.12,0-16-6.41t-5.9-19V25.46q0-12.56,5.9-19T32,0Q42,0,47.89,6.45t5.92,19V38.58q0,12.6-5.87,19T32.11,64Zm0-11.41a5.53,5.53,0,0,0,5-3q1.76-3,1.75-10.15V24.52c0-4.67-.6-8-1.79-10a5.87,5.87,0,0,0-10.26,0q-1.76,3-1.75,10.06V39.43q0,7.18,1.75,10.17A5.7,5.7,0,0,0,32.11,52.59Z" />
</svg>
</div> </div>
<h4 class="feature__title">No management fee</h4> <h4 class="feature__title">No management fee</h4>
<p class="feature__brief">The management fees on this product is zero</p> <p class="feature__brief">The management fees on this product is zero</p>
</div> </div>
<div class="feature"> <div class="feature">
<div class="feature__icon"> <div class="feature__icon">
<svg class="icon" id="e0287cba-7cef-4217-aee4-c8ac3e32d7a5" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M49.52,20.65a1,1,0,0,1,0-1.16L56.94,9a1,1,0,0,0-.83-1.58H18.32V2.52a2.52,2.52,0,1,0-5,0V59H9.4a2.52,2.52,0,1,0,0,5H22.21a2.52,2.52,0,0,0,0-5H18.32V32.73H56.11a1,1,0,0,0,.83-1.59Z"/></svg> <svg class="icon" id="e0287cba-7cef-4217-aee4-c8ac3e32d7a5" data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path
d="M49.52,20.65a1,1,0,0,1,0-1.16L56.94,9a1,1,0,0,0-.83-1.58H18.32V2.52a2.52,2.52,0,1,0-5,0V59H9.4a2.52,2.52,0,1,0,0,5H22.21a2.52,2.52,0,0,0,0-5H18.32V32.73H56.11a1,1,0,0,0,.83-1.59Z" />
</svg>
</div> </div>
<h4 class="feature__title">Aligned goals</h4> <h4 class="feature__title">Aligned goals</h4>
<p class="feature__brief">RanchiMall earns by having invested an equal amount as every investor, thus the interests of fund manager, and fund investors are totally aligned</p> <p class="feature__brief">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> </div>
</section> </section>
<div class="rooms__header"> <div class="rooms__header">
@ -120,20 +152,44 @@
<div id="expanding_tile" class="hide-completely"></div> <div id="expanding_tile" class="hide-completely"></div>
<a class="room-tile room-tile--main" href="#performance_room"> <a class="room-tile room-tile--main" href="#performance_room">
<div class="tile-content"> <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> <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>
<!-- <img class="room-tile__icon" src="./assets/illustrations/performance.svg" alt=""> --> <!-- <img class="room-tile__icon" src="./assets/illustrations/performance.svg" alt=""> -->
<h4 class="room-tile__title">Performance</h4> <h4 class="room-tile__title">Performance</h4>
</div> </div>
</a> </a>
<a class="room-tile" href="#product_room"> <a class="room-tile" href="#product_room">
<div class="tile-content"> <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> <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> <h4 class="room-tile__title">Product</h4>
</div> </div>
</a> </a>
<a class="room-tile" href="#purchase_room"> <a class="room-tile" href="#purchase_room">
<div class="tile-content"> <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> <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>
<!-- <img class="room-tile__icon" src="./assets/illustrations/purchase.svg" alt=""> --> <!-- <img class="room-tile__icon" src="./assets/illustrations/purchase.svg" alt=""> -->
<h4 class="room-tile__title">Buy</h4> <h4 class="room-tile__title">Buy</h4>
</div> </div>
@ -142,7 +198,10 @@
<section class="room-container hide-completely page-layout"> <section class="room-container hide-completely page-layout">
<header class="room-container__header"> <header class="room-container__header">
<button class="grid flow-column gap-1 align-center" onclick="hideRoom()"> <button class="grid flow-column gap-1 align-center" onclick="hideRoom()">
<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="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg> <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="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z" />
</svg>
<h3 id="room_title" class="hide-completely"></h3> <h3 id="room_title" class="hide-completely"></h3>
</button> </button>
</header> </header>
@ -154,16 +213,20 @@
</section> </section>
<section id="product_room" class="grid room"> <section id="product_room" class="grid room">
<p class="margin-bottom-3r"> <p class="margin-bottom-3r">
Bobs Fund allows customers to take a direct share in Bitcoin and they are automatically guided into a Bobs Fund allows customers to take a direct share in Bitcoin and they are automatically guided
into a
long term investment plan. Bitcoin is a long term investors paradise with supply artificially long term investment plan. Bitcoin is a long term investors paradise with supply artificially
constrained, and demand only growing. There are no price guarantees in this product. But the long constrained, and demand only growing. There are no price guarantees in this product. But the
duration of the investment ensures that customers will get an outsized rate of return. RanchiMall as long
duration of the investment ensures that customers will get an outsized rate of return.
RanchiMall as
Fund Manager does not charge management fees. Fund Manager does not charge management fees.
</p> </p>
<h4 class="h4 margin-bottom-1r">Risk Management</h4> <h4 class="h4 margin-bottom-1r">Risk Management</h4>
<p class="margin-bottom-3r"> <p class="margin-bottom-3r">
There is no price risk for RanchiMall in Bobs Fund. But since this is a long term There is no price risk for RanchiMall in Bobs Fund. But since this is a long term
product, information security risks are high to maintain Bitcoins safely. Bitcoin keys must be split product, information security risks are high to maintain Bitcoins safely. Bitcoin keys must be
split
using Shamir Secret Key Share algorithm, and should be recombined at the time of redemption. The using Shamir Secret Key Share algorithm, and should be recombined at the time of redemption. The
number of shares should have enough redundancy so that if some holders are not around, the keys number of shares should have enough redundancy so that if some holders are not around, the keys
must still be recovered. must still be recovered.
@ -171,12 +234,15 @@
<h4 class="h4 margin-bottom-1r">Founder Notes</h4> <h4 class="h4 margin-bottom-1r">Founder Notes</h4>
<p class="margin-bottom-3r"> <p class="margin-bottom-3r">
Bobs Fund was first issued in my MBA classmates WhatsApp group, and restricted only to my Bobs Fund was first issued in my MBA classmates WhatsApp group, and restricted only to my
classmates in June 2017. The product had a long term duration of 20 years, and it needed lot of trust classmates in June 2017. The product had a long term duration of 20 years, and it needed lot of
trust
which my classamtes had in me. We kept this product concept under observation and testing for 4 which my classamtes had in me. We kept this product concept under observation and testing for 4
years, before exploring options to make it public. Another objective was to try out an idea where years, before exploring options to make it public. Another objective was to try out an idea
where
fund management expenses are nil, as fund management fees eats up a lot of customer returns over fund management expenses are nil, as fund management fees eats up a lot of customer returns over
long term. Instead we made an equal investment as every contributing member did, and we hope to long term. Instead we made an equal investment as every contributing member did, and we hope to
earn over the long life time of this product. Over time we realized, we could also use the Bitcoin as earn over the long life time of this product. Over time we realized, we could also use the
Bitcoin as
collateral for DeFi products, and that gives us an additional earning stream. collateral for DeFi products, and that gives us an additional earning stream.
</p> </p>
</section> </section>
@ -190,7 +256,7 @@
</footer> </footer>
</section> </section>
<section> <section>
<a class="ext-link-tile" href="https://ranchimall.github.io/bobs-fund/" target="_blank" > <a class="ext-link-tile" href="https://ranchimall.github.io/bobs-fund/" target="_blank">
<div class="grid"> <div class="grid">
<h4 class="tile__title">See Bob's Fund in action</h4> <h4 class="tile__title">See Bob's Fund in action</h4>
<p class="tile__brief">Visit the website to see investors and asset performance</p> <p class="tile__brief">Visit the website to see investors and asset performance</p>
@ -200,8 +266,9 @@
</section> </section>
</main> </main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="assets/js/components.js"></script> <script src="assets/js/components.js"></script>
<script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
<script src="assets/js/index.js"></script> <script src="assets/js/index.js"></script>
<script> <script>
const bobFund = [ const bobFund = [
@ -467,26 +534,26 @@
//console.info(gain, interest, net) //console.info(gain, interest, net)
return [net * USD_current, percentGain.toFixed(0)]; return [net * USD_current, percentGain.toFixed(0)];
} }
function renderAllFundInvestors(){ function renderAllFundInvestors() {
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
const timelineItemsFrag = document.createDocumentFragment() const timelineItemsFrag = document.createDocumentFragment()
getRef('bobs_fund_timeline').innerHTML = '' getRef('bobs_fund_timeline').innerHTML = ''
bobFund.forEach(fund => { bobFund.forEach(fund => {
const {release, invested, investors, href} = fund const { release, invested, investors, href } = fund
console.log(release, invested, investors, href) console.log(release, invested, investors, href)
const timelineItem = create('li', {className: 'timeline-item'}) const timelineItem = create('li', { className: 'timeline-item' })
const tilelineItemHeader = create('header', { const tilelineItemHeader = create('header', {
className: 'timeline-item__header', className: 'timeline-item__header',
text: getFormatedTime(release, true) text: getFormatedTime(release, true)
}) })
if(fund.hasOwnProperty('investors')){ if (fund.hasOwnProperty('investors')) {
investors.forEach(investor => { investors.forEach(investor => {
let [currentValue, gain] = calcNetValue(2676.5, 64.46, investor.invested, 0) let [currentValue, gain] = calcNetValue(2676.5, 64.46, investor.invested, 0)
currentValue = parseFloat(currentValue.toFixed(2)) currentValue = parseFloat(currentValue.toFixed(2))
timeElapsed = (new Date().getFullYear() - 2017) timeElapsed = (new Date().getFullYear() - 2017)
frag.append(render.bobFundRow({...investor, currentValue, gain, timeElapsed})) frag.append(render.bobFundRow({ ...investor, currentValue, gain, timeElapsed }))
}) })
const fundContainer = create('div', { const fundContainer = create('div', {
className: 'grid series-container series-container--bobs-fund' className: 'grid series-container series-container--bobs-fund'
@ -500,21 +567,21 @@
fundContainer.append(frag) fundContainer.append(frag)
timelineItem.append(heading, fundContainer) timelineItem.append(heading, fundContainer)
} }
else{ else {
const fundCard = create('div', { const fundCard = create('div', {
className: 'grid card' className: 'grid card'
}) })
let [currentValue, gain] = calcNetValue(37488, 72.56, invested, 0) let [currentValue, gain] = calcNetValue(37488, 72.56, invested, 0)
currentValue = parseFloat(currentValue.toFixed(2)) currentValue = parseFloat(currentValue.toFixed(2))
fundCard.innerHTML = ` fundCard.innerHTML = `
<div class="flex space-between"> <div class="flex space-between">
<div class="grid"> <div class="grid">
<h5 class="label color-0-8 weight-500">Total fund investment</h5> <h5 class="label color-0-8 weight-500">Total fund investment</h5>
<h3 class="value original-value">${invested.toLocaleString('en-US', {style: 'currency' ,currency: 'USD'})}</h3> <h3 class="value original-value">${invested.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}</h3>
</div> </div>
<div class="grid justify-right text-align-right"> <div class="grid justify-right text-align-right">
<h4 class="label color-0-8 weight-500">Current value</h4> <h4 class="label color-0-8 weight-500">Current value</h4>
<h3 class="value current-value" style="color: var(--green)">${currentValue.toLocaleString('en-US', {style: 'currency', currency: 'USD'})}</h3> <h3 class="value current-value" style="color: var(--green)">${currentValue.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}</h3>
</div> </div>
</div> </div>
<a class="button button--filled justify-right" href='${href}' target="_blank">See investors</a> <a class="button button--filled justify-right" href='${href}' target="_blank">See investors</a>
@ -528,4 +595,5 @@
} }
</script> </script>
</body> </body>
</html> </html>

35
webwallet.html
View File

@ -26,22 +26,25 @@
</header> </header>
<ul id="floor_list" class="grid"></ul> <ul id="floor_list" class="grid"></ul>
</section> </section>
<header id="main_header" class="grid align-center full-bleed"> <header id="main_header" class="full-bleed">
<button id="elevator_button" class="button" onclick="showSiteMap()"> <button id="elevator_button" class="button" onclick="showSiteMap()">
<svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg> <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
<path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
</svg>
<span class="button__label"> <span class="button__label">
Elevator Elevator
</span> </span>
</button> </button>
<a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page"> <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
<svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg> <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
</svg>
<h4 class="h4 header__company-name">RanchiMall</h4> <h4 class="h4 header__company-name">RanchiMall</h4>
</a> </a>
<label class="theme-switcher" title="Change theme"> <theme-toggle></theme-toggle>
<input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
<svg class="icon moon-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="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
<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> </header>
<div id="outlet_switcher" class="grid gap-1-5 hide"> <div id="outlet_switcher" class="grid gap-1-5 hide">
<div class="flex align-center"> <div class="flex align-center">
@ -83,8 +86,8 @@
<h3 class="h3 margin-bottom-1r">Rooms</h3> <h3 class="h3 margin-bottom-1r">Rooms</h3>
<scroll-tab-header data-target="bit_bond_page_group" class="margin-bottom-1r"> <scroll-tab-header data-target="bit_bond_page_group" class="margin-bottom-1r">
<button class="room-button"> <button class="room-button">
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg"
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<g> <g>
<rect fill="none" height="24" width="24" /> <rect fill="none" height="24" width="24" />
</g> </g>
@ -102,8 +105,8 @@
</span> </span>
</button> </button>
<button class="room-button"> <button class="room-button">
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px"
width="24px" fill="#000000"> viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
<path <path
d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /> d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
@ -155,8 +158,10 @@
</scroll-tab-panels> </scroll-tab-panels>
</main> </main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="js/components.js"></script> <script src="assets/js/components.js"></script>
<script src="js/index.js"></script> <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
<script src="assets/js/index.js"></script>
</body> </body>
</html> </html>