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

UI update

Browse Source 
-- Added new layout for homepage

-- Added conditional rendering for floors and outlets
This commit is contained in:
sairaj mote 2021-05-25 17:37:52 +05:30
parent 8c29bba5fa
commit 23b4102033
7 changed files with 354 additions and 555 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/titles/ICO.svg Normal file
View File

@ -0,0 +1 @@
<svg id="bd197c19-57e7-47eb-9970-aa9a845cb374" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 196.08"><defs><style>.f33d214c-21fc-4e75-876e-def9608ab8f4{font-size:85.59px;}.a094d995-23a5-4552-9516-ad41ee50c4b2,.f33d214c-21fc-4e75-876e-def9608ab8f4{font-family:RobotoSlab-Black, Roboto Slab;}.a6ef6ed6-0774-4848-b7a8-3c2e189c8e45{letter-spacing:0.02em;}.a094d995-23a5-4552-9516-ad41ee50c4b2{font-size:112.55px;}.aa39ada4-2f5a-4dbe-a971-b2127d3bcbeb{letter-spacing:0em;}.f2513822-5b44-4837-902b-be11d40e0813{letter-spacing:0em;}.e5c82386-63c0-4eec-a192-8f2d8937c9db{letter-spacing:0.01em;}.e05c7a4f-53f7-40a7-9f48-9184781ad566{letter-spacing:-0.01em;}.b4ef81d7-5695-4244-a2c8-6516eb20ae1a{letter-spacing:0em;}</style></defs><text class="f33d214c-21fc-4e75-876e-def9608ab8f4" transform="translate(-1.16 65.52)">Ini<tspan class="a6ef6ed6-0774-4848-b7a8-3c2e189c8e45" x="112.17" y="0">t</tspan><tspan x="144.69" y="0">ial Coin</tspan></text><text class="a094d995-23a5-4552-9516-ad41ee50c4b2" transform="translate(-3.09 171.37)">Of<tspan class="aa39ada4-2f5a-4dbe-a971-b2127d3bcbeb" x="129.14" y="0">f</tspan><tspan class="f2513822-5b44-4837-902b-be11d40e0813" x="175.91" y="0">e</tspan><tspan class="e5c82386-63c0-4eec-a192-8f2d8937c9db" x="235.81" y="0">r</tspan><tspan x="286.81" y="0">i</tspan><tspan class="e05c7a4f-53f7-40a7-9f48-9184781ad566" x="323.46" y="0">n</tspan><tspan class="b4ef81d7-5695-4244-a2c8-6516eb20ae1a" x="393.36" y="0">g</tspan></text></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
assets/titles/incoporation BC.svg Normal file
View File

@ -0,0 +1 @@
<svg id="f26da31a-383f-4d61-a9ad-78e31b7b3611" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 119.72"><defs><style>.b067f076-5c4a-4f89-8a45-3fb016dd4ffd{font-size:75.55px;}.a3db1682-563b-47cb-8a7f-70da42e5e690,.b067f076-5c4a-4f89-8a45-3fb016dd4ffd{font-family:RobotoSlab-Black, Roboto Slab;}.aa945d9b-8093-4a39-ad0d-16826c7511a3{letter-spacing:-0.01em;}.be841ebe-d60a-4539-b2ba-aa860b58f0bf{letter-spacing:-0.01em;}.af5822e7-e251-4777-9f26-38cfb9d0e746{letter-spacing:0em;}.e467252c-17a8-48f1-adbe-11027f5e31f2{letter-spacing:0.01em;}.acdbdcb7-4b09-4290-a23c-97da546c26cf{letter-spacing:0em;}.b49086f0-8f73-4714-9df4-d84fc0a0d5c6{letter-spacing:-0.02em;}.b26e4fd3-cd36-4f31-b9fe-69c49ca84dea{letter-spacing:-0.03em;}.b20686f2-a817-4b3f-839e-826664865bb9{letter-spacing:0.02em;}.a3db1682-563b-47cb-8a7f-70da42e5e690{font-size:51.44px;}.e36b91e1-698f-4791-87b5-58cd2bb0e925{letter-spacing:-0.01em;}.b8cb91a5-e180-421f-abcc-3e4d819559de{letter-spacing:0em;}.b1872406-42ca-4aa3-834e-40a317a782e3{letter-spacing:0em;}.aa76a27e-ba7d-47ac-a010-5aecbea6603e{letter-spacing:-0.01em;}.b9d1bee6-cf84-4377-b6f4-195f1d328b32{letter-spacing:-0.02em;}</style></defs><text class="b067f076-5c4a-4f89-8a45-3fb016dd4ffd" transform="translate(-1 57.55)">I<tspan class="aa945d9b-8093-4a39-ad0d-16826c7511a3" x="27" y="0">n</tspan><tspan class="be841ebe-d60a-4539-b2ba-aa860b58f0bf" x="73.93" y="0">c</tspan><tspan class="af5822e7-e251-4777-9f26-38cfb9d0e746" x="113.62" y="0">o</tspan><tspan class="e467252c-17a8-48f1-adbe-11027f5e31f2" x="156.93" y="0">r</tspan><tspan class="acdbdcb7-4b09-4290-a23c-97da546c26cf" x="190.8" y="0">p</tspan><tspan x="237.42" y="0">o</tspan><tspan class="b49086f0-8f73-4714-9df4-d84fc0a0d5c6" x="280.73" y="0">r</tspan><tspan class="b26e4fd3-cd36-4f31-b9fe-69c49ca84dea" x="312.98" y="0">a</tspan><tspan class="b20686f2-a817-4b3f-839e-826664865bb9" x="353.89" y="0">t</tspan><tspan x="382.59" y="0">ion </tspan></text><text class="a3db1682-563b-47cb-8a7f-70da42e5e690" transform="translate(-1 119.72)">B<tspan class="e36b91e1-698f-4791-87b5-58cd2bb0e925" x="34.11" y="0">l</tspan><tspan class="b8cb91a5-e180-421f-abcc-3e4d819559de" x="50.01" y="0">o</tspan><tspan class="b1872406-42ca-4aa3-834e-40a317a782e3" x="79.38" y="0">c</tspan><tspan class="aa76a27e-ba7d-47ac-a010-5aecbea6603e" x="106.81" y="0">k</tspan><tspan class="b1872406-42ca-4aa3-834e-40a317a782e3" x="139.81" y="0">chain Co</tspan><tspan class="b9d1bee6-cf84-4377-b6f4-195f1d328b32" x="353.75" y="0">n</tspan><tspan x="385.23" y="0">t</tspan><tspan class="b9d1bee6-cf84-4377-b6f4-195f1d328b32" x="403.76" y="0">r</tspan><tspan x="425.72" y="0">act</tspan></text></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

286
css/main.css
View File

@ -19,6 +19,7 @@ body {
--background-color: #F6f6f6;
--error-color: red;
--green: #007936;
--font-weight-factor: 1;
color: rgba(var(--text-color), 1);
height: calc(100%);
background: var(--background-color);
@ -32,21 +33,19 @@ body[data-theme=dark] {
--foreground-color: 20, 20, 20;
--background-color: #0a0a0a;
--error-color: rgb(255, 106, 106);
--font-weight-factor: 0.9;
}
body[data-theme=dark] #outlet_switcher {
background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
}
body[data-theme=dark] .outlet__title {
font-weight: 800;
body[data-theme=dark] .outlet-preview {
box-shadow: 0 4rem 3rem -2rem rgba(0, 0, 0, 0.3);
}
.full-bleed {
grid-column: 1/4;
}
/* h1, h2, h3, h4, h5{
font-family: 'Manrope', sans-serif;
} */
.h1 {
font-size: 2.5rem;
}
@ -76,8 +75,9 @@ body[data-theme=dark] .outlet__title {
}
p {
font-weight: calc(400 * var(--font-weight-factor));
max-width: 70ch;
line-height: 1.7;
line-height: 1.6;
}
img {
@ -106,7 +106,7 @@ button {
cursor: pointer;
outline: none;
color: inherit;
font-weight: 500;
font-weight: calc(500 * var(--font-weight-factor));
-webkit-tap-highlight-color: transparent;
}
@ -372,20 +372,24 @@ ol[type="1"] {
color: rgba(var(--text-color), 0.7);
}
.color-0-3 {
color: rgba(var(--text-color), 0.3);
}
.weight-400 {
font-weight: 400;
font-weight: calc(400 * var(--font-weight-factor));
}
.weight-500 {
font-weight: 500;
font-weight: calc(500 * var(--font-weight-factor));
}
.weight-700 {
font-weight: 700;
font-weight: calc(700 * var(--font-weight-factor));
}
.weight-900 {
font-weight: 900;
font-weight: calc(900 * var(--font-weight-factor));
}
.popup__header {
@ -488,7 +492,7 @@ ol[type="1"] {
.outlet-title {
font-size: 1.2rem;
font-weight: 700;
font-weight: calc(700 * var(--font-weight-factor));
margin-bottom: 0.5rem;
}
@ -508,7 +512,7 @@ ol[type="1"] {
align-items: flex-start;
border-radius: 0.2rem;
font-size: 1.5rem;
font-weight: 900;
font-weight: calc(900 * var(--font-weight-factor));
background: rgba(var(--foreground-color), 1);
}
.floor__button--active {
@ -619,11 +623,22 @@ ol[type="1"] {
}
.line-map__bar {
position: relative;
width: 0.1rem;
height: 100%;
border-radius: 1rem;
background: var(--accent-color);
}
.line-map__bar::after {
position: absolute;
content: "";
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0.7rem;
height: 0.2rem;
background-color: var(--accent-color);
}
.floor-label {
position: absolute;
@ -672,48 +687,42 @@ ol[type="1"] {
}
.floor__header {
position: sticky;
top: 0;
z-index: 8;
position: relative;
/* position: sticky;
top: 0;
z-index: 8; */
padding: 0.5rem 0;
transform: translateY(-0.1rem);
background: var(--background-color);
}
.floor__header::before {
content: "";
position: absolute;
left: -1%;
width: 1%;
height: 100%;
background: var(--background-color);
}
.floor__header::after {
content: "";
position: absolute;
right: -1%;
width: 1%;
height: 100%;
background: var(--background-color);
/* &::before{
content: '';
position: absolute;
left: -1%;
width: 1%;
height: 100%;
background: var(--background-color);
}
&::after{
content: '';
position: absolute;
right: -1%;
width: 1%;
height: 100%;
background: var(--background-color);
} */
}
.floor__num {
display: flex;
align-items: center;
font-size: 1.2rem;
font-weight: 700;
color: var(--accent-color);
}
.floor__num::after {
content: "";
width: 4rem;
height: 0.1rem;
background: var(--accent-color);
margin-left: 0.5rem;
font-size: 1.8rem;
font-weight: calc(900 * var(--font-weight-factor));
color: rgba(var(--text-color), 0.3);
}
.floor__title {
font-size: 1.5rem;
font-weight: 800;
font-size: 1.3rem;
font-weight: calc(700 * var(--font-weight-factor));
}
.big-icon {
@ -728,65 +737,58 @@ ol[type="1"] {
.outlet-preview {
position: relative;
align-items: center;
display: grid;
}
.outlet-number {
display: grid;
position: relative;
width: 2rem;
height: 2rem;
aspect-ratio: 1/1;
font-size: 1.3rem;
font-weight: 900;
margin-bottom: 1.5rem;
border-radius: 0.2rem;
place-content: center;
justify-self: flex-start;
background: var(--accent-color);
color: white;
box-shadow: 0.2rem 0.2rem 0 rgba(var(--text-color), 1);
}
.outlet-preview__info {
position: relative;
padding: 1rem;
border-radius: 0.5rem;
align-items: center;
border-radius: 0.7rem;
background-color: rgba(var(--foreground-color), 1);
}
.outlet__title {
font-weight: 900;
line-height: 1.1;
max-width: 18ch;
font-size: 1.8rem;
margin-bottom: 0.8rem;
margin-bottom: 1rem;
text-transform: capitalize;
font-weight: calc(900 * var(--font-weight-factor));
}
.svg-outlet-title {
height: 4rem;
margin-bottom: 1.5rem;
fill: rgba(var(--text-color), 1);
font-weight: calc(900 * var(--font-weight-factor));
}
.outlet__description {
color: rgba(var(--text-color), 0.8);
}
.outlet-preview__border {
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
border-radius: 0.5rem;
background: var(--background-color);
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 2rem 3rem -2rem rgba(0, 0, 0, 0.1);
}
.outlet-preview__button {
padding: 0.5rem 0;
justify-self: flex-start;
border-radius: 0.2rem;
padding: 0.3rem 1rem;
color: white;
background-color: var(--accent-color);
color: var(--accent-color);
font-weight: calc(700 * var(--font-weight-factor));
}
/* .outlet-preview__carousel{
.outlet-preview__number {
position: relative;
line-height: 1;
font-size: 8rem;
font-weight: 900;
-webkit-text-stroke: 1rem var(--accent-color);
-webkit-text-fill-color: rgba(var(--foreground-color), 1);
}
*/
.outlet-preview__number::after {
content: attr(data-number);
position: absolute;
line-height: 1;
font-size: 8rem;
font-weight: 900;
-webkit-text-stroke: 0;
color: rgba(var(--foreground-color), 1);
}
.label {
position: relative;
font-size: 0.8rem;
@ -800,25 +802,13 @@ ol[type="1"] {
.series-container {
gap: 1.5rem;
padding-bottom: 1.5rem;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}
.series-container .bit-bond-series__row,
.series-container .bob-fund__row {
padding: 1.5rem;
}
/* #bit_bond_series__container{
background: url(../assets/bg/bitbonds-bg.png) bottom right no-repeat, rgba(var(--foreground-color), 1);
background-size: 60%;
}
#bob_fund_investors__container{
background: url(../assets/bg/bobsfund-bg.png) bottom left no-repeat, rgba(var(--foreground-color), 1);
background-size: 60%;
}
#ico_investors__container{
background: url(../assets/bg/ico-bg.png) top right no-repeat, rgba(var(--foreground-color), 1);
background-size: 60%;
} */
sm-carousel {
position: relative;
height: 100%;
@ -866,7 +856,7 @@ sm-carousel {
}
.percent-gain {
font-weight: 500;
font-weight: calc(500 * var(--font-weight-factor));
color: var(--green);
margin-right: 0.5em;
}
@ -932,7 +922,7 @@ sm-carousel {
font-size: 1rem;
padding: 0.4rem 0;
flex-shrink: 0;
font-weight: 500;
font-weight: calc(500 * var(--font-weight-factor));
}
.outlet_switcher__button--active {
color: var(--accent-color) !important;
@ -1005,7 +995,7 @@ scroll-tab-panels > [active] {
position: relative;
display: flex;
align-items: center;
font-weight: 500;
font-weight: calc(500 * var(--font-weight-factor));
margin-right: 0.5rem;
padding-right: 1.5rem;
}
@ -1023,7 +1013,7 @@ scroll-tab-panels > [active] {
opacity: 0.6;
flex-shrink: 0;
border-radius: 0;
font-weight: 500;
font-weight: calc(500 * var(--font-weight-factor));
font-size: 1.1rem;
transition: opacity 0.3s, background-color 0.3s;
padding: 0.6rem 0.8rem;
@ -1094,6 +1084,20 @@ scroll-tab-panels > [active] {
display: none;
}
.outlet-preview {
gap: 1.5rem;
}
.outlet-preview__number-container {
grid-row: 1/2;
text-align: right;
justify-content: right;
}
.outlet-preview__number::after {
right: 0;
}
#outlet_switcher {
width: calc(100% - 2rem);
}
@ -1119,7 +1123,7 @@ scroll-tab-panels > [active] {
}
}
@media only screen and (min-width: 640px) {
.page {
#home_page, .page {
grid-template-columns: 1fr 90vw 1fr;
}
@ -1179,10 +1183,6 @@ scroll-tab-panels > [active] {
grid-column: 1/2;
}
#home_page {
grid-template-columns: 1fr 80vw 1fr;
}
.floor__header::before {
left: -10%;
width: 10%;
@ -1193,17 +1193,34 @@ scroll-tab-panels > [active] {
}
.outlets-container {
gap: 5rem;
gap: 1.5rem;
}
.outlet-preview {
gap: 1rem;
grid-template-columns: repeat(2, 1fr);
padding: 5rem 4rem;
grid-template-columns: 1.2fr 1fr;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 4rem 3rem -2rem rgba(0, 0, 0, 0.06);
}
.outlet-preview:nth-of-type(even) {
grid-template-columns: 1fr 1.2fr;
}
.outlet-preview:nth-of-type(even) .outlet-preview__info {
grid-column: 2/3;
}
.outlet-preview:nth-of-type(even) .outlet-preview__border {
.outlet-preview:nth-of-type(even) .outlet-preview__number-container {
grid-column: 1/2;
grid-row: 1/2;
}
.outlet-preview:nth-of-type(even) .outlet-preview__number::after {
left: 0;
}
.outlet-preview:nth-of-type(odd) .outlet-preview__number-container {
margin-left: auto;
text-align: right;
}
.outlet-preview:nth-of-type(odd) .outlet-preview__number::after {
right: 0;
}
@ -1211,32 +1228,20 @@ scroll-tab-panels > [active] {
grid-auto-flow: column;
}
.carousel-holder {
align-self: flex-start;
transform: translateY(-2rem);
z-index: 1;
border-radius: 0.5rem;
}
.carousel-holder--left {
grid-row: 1/2;
grid-column: 1/2;
box-shadow: 1px 0.1rem 0.1rem rgba(0, 0, 0, 0.06), -2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
}
.carousel-holder--left ~ .outlet-preview__border {
justify-self: flex-end;
}
.carousel-holder--right {
box-shadow: 1px 0.1rem 0.1rem rgba(0, 0, 0, 0.06), 2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
}
.outlet-preview__border {
width: 66%;
}
.outlet-preview__info {
padding: 2rem;
}
/* .carousel-holder{
align-self: flex-start;
transform: translateY(-2rem);
z-index: 1;
border-radius: 0.5rem;
&--left{
grid-row: 1/2;
grid-column: 1/2;
box-shadow: 1px 0.1rem 0.1rem rgba(0, 0, 0, 0.06), -2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
}
&--right{
box-shadow: 1px 0.1rem 0.1rem rgba(0, 0, 0, 0.06), 2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
}
} */
.outlet-preview__carousel {
padding: 2rem 2rem 5rem 2rem;
}
@ -1258,8 +1263,8 @@ scroll-tab-panels > [active] {
}
}
@media only screen and (min-width: 1280px) {
.page {
grid-template-columns: 1fr 80vw 1fr;
#home_page, .page {
grid-template-columns: 1fr 85vw 1fr;
}
.grid-3 {
@ -1269,11 +1274,6 @@ scroll-tab-panels > [active] {
width: 100%;
}
}
@media only screen and (min-width: 1920px) {
.page, #home_page {
grid-template-columns: 1fr 60vw 1fr;
}
}
@media (any-hover: hover) {
::-webkit-scrollbar {
width: 0.5rem;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

221
css/main.scss
View File

@ -17,6 +17,7 @@ body {
--background-color: #F6f6f6;
--error-color: red;
--green: #007936;
--font-weight-factor: 1;
color: rgba(var(--text-color), 1);
height: calc(100%);
background: var(--background-color);
@ -29,11 +30,12 @@ body[data-theme='dark']{
--foreground-color: 20, 20, 20;
--background-color: #0a0a0a;
--error-color: rgb(255, 106, 106);
--font-weight-factor: 0.9;
#outlet_switcher{
background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
}
.outlet__title{
font-weight: 800;
.outlet-preview{
box-shadow: 0 4rem 3rem -2rem rgba(0, 0, 0, 0.3);
}
}
@ -41,9 +43,6 @@ body[data-theme='dark']{
grid-column: 1/4;
}
/* h1, h2, h3, h4, h5{
font-family: 'Manrope', sans-serif;
} */
.h1{
font-size: 2.5rem;
}
@ -68,8 +67,9 @@ body[data-theme='dark']{
}
p {
font-weight: calc(400 * var(--font-weight-factor));
max-width: 70ch;
line-height: 1.7;
line-height: 1.6;
}
img{
@ -99,7 +99,7 @@ button{
cursor: pointer;
outline: none;
color: inherit;
font-weight: 500;
font-weight: calc(500 * var(--font-weight-factor));
-webkit-tap-highlight-color: transparent;
}
.button{
@ -308,18 +308,21 @@ ol[type="1"]{
.color-0-7{
color: rgba(var(--text-color), 0.7);
}
.color-0-3{
color: rgba(var(--text-color), 0.3);
}
.weight-400{
font-weight: 400;
font-weight: calc(400 * var(--font-weight-factor));
}
.weight-500{
font-weight: 500;
font-weight: calc(500 * var(--font-weight-factor));
}
.weight-700{
font-weight: 700;
font-weight: calc(700 * var(--font-weight-factor));
}
.weight-900{
font-weight: 900;
font-weight: calc(900 * var(--font-weight-factor));
}
.popup__header{
@ -415,7 +418,7 @@ ol[type="1"]{
}
.outlet-title{
font-size: 1.2rem;
font-weight: 700;
font-weight: calc(700 * var(--font-weight-factor));
margin-bottom: 0.5rem;
}
.outlet-brief{
@ -435,7 +438,7 @@ ol[type="1"]{
align-items: flex-start;
border-radius: 0.2rem;
font-size: 1.5rem;
font-weight: 900;
font-weight: calc(900 * var(--font-weight-factor));
background: rgba(var(--foreground-color), 1);
&--active{
background: rgba(var(--text-color), 0.2);
@ -539,10 +542,21 @@ ol[type="1"]{
z-index: 5;
}
.line-map__bar{
position: relative;
width: 0.1rem;
height: 100%;
border-radius: 1rem;
background: var(--accent-color);
&::after{
position: absolute;
content: '';
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0.7rem;
height: 0.2rem;
background-color: var(--accent-color);
}
}
.floor-label{
@ -591,13 +605,14 @@ ol[type="1"]{
}
.floor__header{
position: sticky;
position: relative;
/* position: sticky;
top: 0;
z-index: 8;
z-index: 8; */
padding: 0.5rem 0;
transform: translateY(-0.1rem);
background: var(--background-color);
&::before{
/* &::before{
content: '';
position: absolute;
left: -1%;
@ -612,27 +627,20 @@ ol[type="1"]{
width: 1%;
height: 100%;
background: var(--background-color);
}
} */
}
.floor__num{
display: flex;
align-items: center;
font-size: 1.2rem;
font-weight: 700;
color: var(--accent-color);
&::after{
content: '';
width: 4rem;
height: 0.1rem;
background: var(--accent-color);
margin-left: 0.5rem;
}
font-size: 1.8rem;
font-weight: calc(900 * var(--font-weight-factor));
color: rgba(var(--text-color), 0.3);
}
.floor__title{
font-size: 1.5rem;
font-weight: 800;
font-size: 1.3rem;
font-weight: calc(700 * var(--font-weight-factor));
}
.big-icon{
@ -647,60 +655,54 @@ ol[type="1"]{
.outlet-preview{
position: relative;
align-items: center;
display: grid;
}
.outlet-number{
display: grid;
position: relative;
width: 2rem;
height: 2rem;
aspect-ratio: 1/1;
font-size: 1.3rem;
font-weight: 900;
margin-bottom: 1.5rem;
border-radius: 0.2rem;
place-content: center;
justify-self: flex-start;
background: var(--accent-color);
color: white;
box-shadow: 0.2rem 0.2rem 0 rgba(var(--text-color), 1);
}
.outlet-preview__info{
position: relative;
padding: 1rem;
border-radius: 0.5rem;
align-items: center;
border-radius: 0.7rem;
background-color: rgba(var(--foreground-color), 1);
}
.outlet__title{
font-weight: 900;
line-height: 1.1;
max-width: 18ch;
font-size: 1.8rem;
margin-bottom: 0.8rem;
margin-bottom: 1rem;
text-transform: capitalize;
font-weight: calc(900 * var(--font-weight-factor));
}
.svg-outlet-title{
height: 4rem;
margin-bottom: 1.5rem;
fill: rgba(var(--text-color), 1);
font-weight: calc(900 * var(--font-weight-factor));
}
.outlet__description{
color: rgba(var(--text-color), 0.8);
}
.outlet-preview__border{
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
border-radius: 0.5rem;
background: var(--background-color);
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 2rem 3rem -2rem rgba(0, 0, 0, 0.1);
}
.outlet-preview__button{
padding: 0.5rem 0;
justify-self: flex-start;
border-radius: 0.2rem;
padding: 0.3rem 1rem;
// box-shadow: 0 0 0 1px rgba(var(--text-color), 1);
color: white;
background-color: var(--accent-color);
color: var(--accent-color);
font-weight: calc(700 * var(--font-weight-factor));
}
/* .outlet-preview__carousel{
.outlet-preview__number{
position: relative;
line-height: 1;
font-size: 8rem;
font-weight: 900;
-webkit-text-stroke: 1rem var(--accent-color);
-webkit-text-fill-color: rgba(var(--foreground-color), 1);
&::after{
content: attr(data-number);
position: absolute;
line-height: 1;
font-size: 8rem;
font-weight: 900;
-webkit-text-stroke: 0;
color: rgba(var(--foreground-color), 1);
}
}
*/
.label{
position: relative;
font-size: 0.8rem;
@ -713,24 +715,12 @@ ol[type="1"]{
.series-container{
gap: 1.5rem;
padding-bottom: 1.5rem;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
.bit-bond-series__row,
.bob-fund__row{
padding: 1.5rem;
}
}
/* #bit_bond_series__container{
background: url(../assets/bg/bitbonds-bg.png) bottom right no-repeat, rgba(var(--foreground-color), 1);
background-size: 60%;
}
#bob_fund_investors__container{
background: url(../assets/bg/bobsfund-bg.png) bottom left no-repeat, rgba(var(--foreground-color), 1);
background-size: 60%;
}
#ico_investors__container{
background: url(../assets/bg/ico-bg.png) top right no-repeat, rgba(var(--foreground-color), 1);
background-size: 60%;
} */
sm-carousel{
position: relative;
@ -779,7 +769,7 @@ sm-carousel{
margin-right: 0.1em;
}
.percent-gain{
font-weight: 500;
font-weight: calc(500 * var(--font-weight-factor));
color: var(--green);
margin-right: 0.5em;
}
@ -838,7 +828,7 @@ sm-carousel{
font-size: 1rem;
padding: 0.4rem 0;
flex-shrink: 0;
font-weight: 500;
font-weight: calc(500 * var(--font-weight-factor));
&--active{
color: var(--accent-color) !important;
}
@ -906,7 +896,7 @@ scroll-tab-panels{
position: relative;
display: flex;
align-items: center;
font-weight: 500;
font-weight: calc(500 * var(--font-weight-factor));
margin-right: 0.5rem;
padding-right: 1.5rem;
&::after{
@ -923,7 +913,7 @@ scroll-tab-panels{
opacity: 0.6;
flex-shrink: 0;
border-radius: 0;
font-weight: 500;
font-weight: calc(500 * var(--font-weight-factor));
font-size: 1.1rem;
transition: opacity 0.3s, background-color 0.3s;
padding: 0.6rem 0.8rem;
@ -995,6 +985,17 @@ scroll-tab-panels{
.hide-on-mobile{
display: none;
}
.outlet-preview{
gap: 1.5rem;
}
.outlet-preview__number-container{
grid-row: 1/2;
text-align: right;
justify-content: right;
}
.outlet-preview__number::after{
right: 0;
}
#outlet_switcher{
width: calc(100% - 2rem);
}
@ -1018,7 +1019,7 @@ scroll-tab-panels{
}
}
@media only screen and (min-width: 640px) {
.page{
#home_page,.page{
grid-template-columns: 1fr 90vw 1fr;
}
.h1{
@ -1073,9 +1074,6 @@ scroll-tab-panels{
}
}
}
#home_page{
grid-template-columns: 1fr 80vw 1fr;
}
.floor__header{
&::before{
left: -10%;
@ -1087,16 +1085,33 @@ scroll-tab-panels{
}
}
.outlets-container{
gap: 5rem;
gap: 1.5rem;
}
.outlet-preview{
gap: 1rem;
grid-template-columns: repeat(2, 1fr);
padding: 5rem 4rem;
grid-template-columns: 1.2fr 1fr;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 4rem 3rem -2rem rgba(0, 0, 0, 0.06);
&:nth-of-type(even){
grid-template-columns: 1fr 1.2fr;
.outlet-preview__info{
grid-column: 2/3;
}
.outlet-preview__border{
.outlet-preview__number-container{
grid-column: 1/2;
grid-row: 1/2;
}
.outlet-preview__number::after{
left: 0;
}
}
&:nth-of-type(odd){
.outlet-preview__number-container{
margin-left: auto;
text-align: right;
}
.outlet-preview__number::after{
right: 0;
}
}
@ -1104,7 +1119,7 @@ scroll-tab-panels{
.bit-bond-series__row{
grid-auto-flow: column;
}
.carousel-holder{
/* .carousel-holder{
align-self: flex-start;
transform: translateY(-2rem);
z-index: 1;
@ -1113,20 +1128,11 @@ scroll-tab-panels{
grid-row: 1/2;
grid-column: 1/2;
box-shadow: 1px 0.1rem 0.1rem rgba(0, 0, 0, 0.06), -2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
& ~ .outlet-preview__border{
justify-self: flex-end;
}
}
&--right{
box-shadow: 1px 0.1rem 0.1rem rgba(0, 0, 0, 0.06), 2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
}
}
.outlet-preview__border{
width: 66%;
}
.outlet-preview__info{
padding: 2rem;
}
} */
.outlet-preview__carousel{
padding: 2rem 2rem 5rem 2rem;
}
@ -1144,8 +1150,8 @@ scroll-tab-panels{
}
}
@media only screen and (min-width: 1280px) {
.page{
grid-template-columns: 1fr 80vw 1fr;
#home_page, .page{
grid-template-columns: 1fr 85vw 1fr;
}
.grid-3{
justify-content: center;
@ -1154,11 +1160,6 @@ scroll-tab-panels{
}
}
}
@media only screen and (min-width: 1920px) {
.page, #home_page{
grid-template-columns: 1fr 60vw 1fr;
}
}
@media (any-hover: hover){
::-webkit-scrollbar{
width: 0.5rem;

374
index.html
View File

@ -9,7 +9,7 @@
<link rel="shortcut icon" href="assets/RM logo.png" type="image/png">
<link rel="stylesheet" href="css/main.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300..900&display=swap" rel="stylesheet">
</head>
<body data-theme="light">
<sm-notifications id="notification_drawer"></sm-notifications>
@ -77,300 +77,7 @@
</div>
<div id="floor_label_container"></div>
</aside>
<main id="floor_container" class="grid">
<section id="floor_1" class="floor">
<header class="floor__header grid align-center">
<h4 class="floor__num">Floor 1</h5>
<h4 class="floor__title">
Current Projects
</h3>
</header>
<main id="floor_1__outlets" class="grid outlets-container">
<!-- <p>
This floor contains all the products for which we have current paying customers. This floor services our current customers.
</p> -->
<div id="bit_bond_outlet" class="outlet-preview carousel-container">
<div class="grid outlet-preview__info">
<h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
<div class="outlet-number">1</div>
<h3 class="outlet__title">bitcoin bonds</h3>
<p class="outlet__description margin-bottom-1-5r">
Bondholders get a minimum guarantee of 13 percent 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.
</p>
<a href="bitcoinbonds.html" class="button outlet-preview__button">
<span class="button__label">Visit</span>
</a>
</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="outlet-preview__border"></div>
</div>
<div id="bob_fund_outlet" class="outlet-preview carousel-container">
<div class="grid outlet-preview__info">
<h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
<div class="outlet-number">2</div>
<h3 class="outlet__title">Bob's Fund</h3>
<p class="outlet__description margin-bottom-1-5r">
Bobs Fund is a 20 year long term Bitcoin price linked product. Investors are entitled to 100 percent of Bitcoin price gains, but they most hold for 20 years.
</p>
<a href="bob'sfund.html" class="button outlet-preview__button">
<span class="button__label">Visit</span>
</a>
</div>
<div class="grid carousel-holder carousel-holder--left">
<sm-carousel id="bob_fund_investors__container" class="outlet-preview__carousel" indicator></sm-carousel>
</div>
<div class="outlet-preview__border"></div>
</div>
<div id="ico_outlet" class="outlet-preview carousel-container">
<div class="grid outlet-preview__info">
<h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
<div class="outlet-number">3</div>
<h3 class="outlet__title">Initial Coin Offering</h3>
<p class="outlet__description margin-bottom-1-5r">
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.
</p>
<a href="ico.html" class="button outlet-preview__button">
<span class="button__label">Visit</span>
</a>
</div>
<div class="grid carousel-holder carousel-holder--right">
<sm-carousel id="ico_investors__container" class="outlet-preview__carousel" indicator></sm-carousel>
</div>
<div class="outlet-preview__border"></div>
</div>
</main>
</section>
<section id="floor_2" class="floor">
<header class="floor__header grid align-center">
<h4 class="floor__num">Floor 2</h5>
<h4 class="floor__title">
Blockchain Contracts
</h3>
</header>
<main id="floor_2__outlets" class="grid outlets-container">
<p>
Blockchain Contracts are one of RanchiMall's flagship innovations.
We believe each blockchain contract will be transformational in its area and will add
tremendously to our enterprise value.
</p>
<div id="" class="outlet-preview">
<div class="grid outlet-preview__info">
<h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
<div class="outlet-number">2</div>
<h3 class="outlet__title">Incorporation Blockchain Contract</h3>
<p class="outlet__description margin-bottom-1-5r">
RanchiMall is incorporated on the blockchain and structured as Incorporation Blockchain Contract. Incorporation Blockchain Contract owns all the other blockchain contracts of RanchiMall.
</p>
<a href="incorporationblockchaincontract.html" class="button outlet-preview__button">
<span class="button__label">Visit</span>
</a>
</div>
<div class="outlet-preview__border"></div>
</div>
<div id="" class="outlet-preview">
<div class="grid outlet-preview__info">
<h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
<div class="outlet-number">1</div>
<h3 class="outlet__title">Internship Blockchain Contract</h3>
<p class="outlet__description margin-bottom-1-5r">
Internship Blockchain Contract tokenizes all our internship initiatives. This is owned by Incorporation Blockchain Contract.
</p>
<a href="internshipblockchaincontract.html" class="button outlet-preview__button">
<span class="button__label">Visit</span>
</a>
</div>
<div class="outlet-preview__border"></div>
</div>
<div id="" class="outlet-preview">
<div class="grid outlet-preview__info">
<h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
<div class="outlet-number">3</div>
<h3 class="outlet__title">FLO Blockchain Contract</h3>
<p class="outlet__description margin-bottom-1-5r">
FLO Blockchain contract consists of all projects RanchiMall performs on FLO Blockchain (previously called Florincoin).
</p>
<a href="floblockchaincontract.html" class="button outlet-preview__button">
<span class="button__label">Visit</span>
</a>
</div>
<div class="outlet-preview__border"></div>
</div>
</main>
</section>
<section id="floor_3" class="floor">
<header class="floor__header grid align-center">
<h4 class="floor__num">Floor 3</h5>
<h4 class="floor__title">
Blockchain Apps
</h3>
</header>
<main id="floor_3__outlets" class="grid outlets-container">
<div id="" class="outlet-preview">
<div class="grid outlet-preview__info">
<h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
<div class="outlet-number">1</div>
<h3 class="outlet__title">Web Wallet</h3>
<p class="outlet__description margin-bottom-1-5r">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
</p>
<button class="button page-link outlet-preview__button" data-target="bitbonds">
<span class="button__label">Visit</span>
</button>
</div>
<div class="outlet-preview__border"></div>
</div>
<div id="" class="outlet-preview">
<div class="grid outlet-preview__info">
<h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
<div class="outlet-number">2</div>
<h3 class="outlet__title">FLO Messenger</h3>
<p class="outlet__description margin-bottom-1-5r">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
</p>
<button class="button page-link outlet-preview__button" data-target="bitbonds">
<span class="button__label">Visit</span>
</button>
</div>
<div class="outlet-preview__border"></div>
</div>
<div id="" class="outlet-preview">
<div class="grid outlet-preview__info">
<h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
<div class="outlet-number">3</div>
<h3 class="outlet__title">Content Collaboration</h3>
<p class="outlet__description margin-bottom-1-5r">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
</p>
<button class="button page-link outlet-preview__button" data-target="bitbonds">
<span class="button__label">Visit</span>
</button>
</div>
<div class="outlet-preview__border"></div>
</div>
<div id="" class="outlet-preview">
<div class="grid outlet-preview__info">
<h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
<div class="outlet-number">4</div>
<h3 class="outlet__title">RanchiMall Times</h3>
<p class="outlet__description margin-bottom-1-5r">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
</p>
<button class="button page-link outlet-preview__button" data-target="bitbonds">
<span class="button__label">Visit</span>
</button>
</div>
<div class="outlet-preview__border"></div>
</div>
</main>
</section>
<section id="floor_4" class="floor">
<header class="floor__header grid align-center">
<h4 class="floor__num">Floor 4</h5>
<h4 class="floor__title">
Experimental Ideas
</h3>
</header>
<main id="floor_4__outlets" class="grid outlets-container">
<div id="" class="outlet-preview">
<div class="grid outlet-preview__info">
<h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
<div class="outlet-number">1</div>
<h3 class="outlet__title">Blockchain Cloud</h3>
<p class="outlet__description margin-bottom-1-5r">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
</p>
<button class="button page-link outlet-preview__button" data-target="bitbonds">
<span class="button__label">Visit</span>
</button>
</div>
<div class="outlet-preview__border"></div>
</div>
<div id="" class="outlet-preview">
<div class="grid outlet-preview__info">
<h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
<div class="outlet-number">2</div>
<h3 class="outlet__title">UPI on Blockchain</h3>
<p class="outlet__description margin-bottom-1-5r">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
</p>
<button class="button page-link outlet-preview__button" data-target="bob'sfund">
<span class="button__label">Visit</span>
</button>
</div>
<div class="outlet-preview__border"></div>
</div>
<div id="" class="outlet-preview">
<div class="grid outlet-preview__info">
<h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
<div class="outlet-number">3</div>
<h3 class="outlet__title">E-Commerce on Blockchain</h3>
<p class="outlet__description margin-bottom-1-5r">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
</p>
<button class="button page-link outlet-preview__button" data-target="ico">
<span class="button__label">Visit</span>
</button>
</div>
<div class="outlet-preview__border"></div>
</div>
</main>
</section>
<section id="floor_5" class="floor">
<header class="floor__header grid align-center">
<h4 class="floor__num">Floor 5</h5>
<h4 class="floor__title">
Statistics and Administration
</h3>
</header>
<main id="floor_5__outlets" class="grid outlets-container">
<div id="" class="outlet-preview">
<div class="grid outlet-preview__info">
<h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
<div class="outlet-number">1</div>
<h3 class="outlet__title">Incorporation</h3>
<p class="outlet__description margin-bottom-1-5r">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
</p>
<button class="button page-link outlet-preview__button" data-target="bitbonds">
<span class="button__label">Visit</span>
</button>
</div>
<div class="outlet-preview__border"></div>
</div>
<div id="" class="outlet-preview">
<div class="grid outlet-preview__info">
<h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
<div class="outlet-number">2</div>
<h3 class="outlet__title">Team</h3>
<p class="outlet__description margin-bottom-1-5r">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
</p>
<button class="button page-link outlet-preview__button" data-target="bob'sfund">
<span class="button__label">Visit</span>
</button>
</div>
<div class="outlet-preview__border"></div>
</div>
<div id="" class="outlet-preview">
<div class="grid outlet-preview__info">
<h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
<div class="outlet-number">3</div>
<h3 class="outlet__title">Operational Statistics</h3>
<p class="outlet__description margin-bottom-1-5r">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
</p>
<button class="button page-link outlet-preview__button" data-target="ico">
<span class="button__label">Visit</span>
</button>
</div>
<div class="outlet-preview__border"></div>
</div>
</main>
</section>
</main>
<main id="floor_container" class="grid"></main>
</article>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
@ -496,9 +203,9 @@
})
getRef('ico_investors__container').append(frag)
}
renderAllIcoInvestors()
/* renderAllIcoInvestors()
renderAllSeries()
renderAllFundInvestors()
renderAllFundInvestors() */
function showOutletSwitcher(button){
@ -568,6 +275,79 @@
})
document.querySelectorAll('.floor').forEach(floor => floorObserver.observe(floor))
function renderFloor(obj){
console.log(obj)
const {floorNo, floor, brief, outlets} = obj
const floorSection = document.createElement('section')
floorSection.classList.add('floor')
floorSection.id = `floor_${floorNo + 1}`
floorSection.innerHTML = `
<header class="floor__header grid align-center">
<h4 class="floor__num">Floor ${floorNo + 1}</h5>
<h4 class="floor__title">${floor}</h3>
</header>
<main id="floor_${floorNo + 1}__outlets" class="grid outlets-container">
<p>${brief}</p>
</main>
`
floorSection.querySelector(`#floor_${floorNo + 1}__outlets`).append(outlets)
return floorSection;
}
function renderAllFloors(){
const frag = document.createDocumentFragment()
siteMap.forEach((floor, floorNo) => {
frag.append(renderFloor({...floor, floorNo, outlets: renderFloorOutlets(floor.outlets)}))
})
getRef('floor_container').append(frag)
}
renderAllFloors()
function renderOutletPreview(obj){
const {outletNo, name, brief, url, isSold} = obj
const preview = document.createElement('section')
preview.classList.add('outlet-preview', 'carousel-container')
let composed = `
<div class="grid outlet-preview__info">
<h3 class="outlet__title">${name}</h3>
<p class="outlet__description margin-bottom-1-5r">${brief}</p>
<div class="grid flow-column gap-1-5 justify-start">
`
if(isSold){
composed += `
<a href="${url}" 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">Learn more</span>
</a>
</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">
<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>
</div>
`
preview.innerHTML = composed
return preview;
}
function renderFloorOutlets(outlets){
const frag = document.createDocumentFragment()
outlets.forEach((outlet, outletNo) => {
frag.append(renderOutletPreview({...outlet, outletNo}))
})
return frag
}
</script>
</body>
</html>

24
js/index.js
View File

@ -231,40 +231,55 @@ function throttle(func, delay) {
const siteMap = [
{
floor: "Current Products",
brief: ``,
outlets: [
{
name: "Bitcoin Bonds",
url: "bitcoinbonds",
brief: `Bondholders get a minimum guarantee of 13% interest per annum during the lock-in period or 50% of all Bitcoin price gains whichever is higher. It offers full capital protection if
Bitcoin prices fall below acquisition price.`,
isSold: true
},
{
name: `Bob's Fund`,
url: `bob'sfund`,
brief: `Bobs Fund is a 20 year long term Bitcoin price linked product. Investors are entitled to 100% of Bitcoin price gains, but they most hold for 20 years.`,
isSold: true
},
{
name: "Initial Coin Offering",
url: "ico",
brief: `The Initial Coin Offering (ICO) of RanchiMall was launched in 2017. It was envisioned to sell 21 million tokens over 14 phases over 3 years.`,
isSold: true
},
],
},
{
floor: "Blockchain Contracts",
brief: `Blockchain Contracts are one of RanchiMall's flagship innovations.
We believe each blockchain contract will be transformational in its area and will add
tremendously to our enterprise value.`,
outlets: [
{
name: "Incorporation Blockchain Contract",
url: "incorporationblockchaincontract",
brief: `RanchiMall is incorporated on the blockchain and structured as Incorporation Blockchain Contract. Incorporation Blockchain Contract owns all the other blockchain contracts of RanchiMall.`
},
{
name: `Internship Blockchain Contract`,
url: `internshipblockchaincontract`,
brief: `Internship Blockchain Contract tokenizes all our internship initiatives. This is owned by Incorporation Blockchain Contract.`
},
{
name: "FLO Blockchain Contract",
url: "floblockchaincontract",
brief: `FLO Blockchain contract consists of all projects RanchiMall performs on FLO Blockchain (previously called Florincoin).`
}
],
},
/* {
floor: 'Blockchain Apps',
brief: ``,
outlets: [
{
name: "Web Wallet",
@ -289,6 +304,7 @@ const siteMap = [
},
{
floor: 'Experimental Ideas',
brief: ``,
outlets: [
{
name: "Blockchain Cloud",
@ -306,6 +322,7 @@ const siteMap = [
},
{
floor: 'Statistics and Administration',
brief: ``,
outlets: [
{
name: "Incorporation",
@ -506,7 +523,7 @@ const render = {
const li = outletListitemTemplate.content.cloneNode(true).firstElementChild
li.querySelector('a').href = `${url}.html`
li.querySelector('.outlet-title').textContent = name
li.querySelector('.outlet-brief').textContent = brief ? brief : ''
// li.querySelector('.outlet-brief').textContent = brief ? brief : ''
return li
},
floorListitem(floorObj, index) {
@ -670,9 +687,9 @@ const outletObserver = new IntersectionObserver(
}
);
document
/* document
.querySelectorAll(".carousel-container")
.forEach((outlet) => outletObserver.observe(outlet));
.forEach((outlet) => outletObserver.observe(outlet)); */
let isOutletSwitcherOpen = false;
document.addEventListener("click", (e) => {
@ -738,7 +755,6 @@ function renderSiteMap() {
for (outlet of floor.outlets) {
currentPage = pathArray[pathArray.length - 1]
if (pathArray[pathArray.length - 1].includes(outlet.url)) {
console.log(pathArray[pathArray.length - 1], outlet.url)
renderFloorOutlets(floor, outlet.url)
break;
}