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

v0.15.26

Browse Source 
Added new floors and outlets
This commit is contained in:
sairaj mote 2021-04-14 01:08:41 +05:30
parent 7ad961b011
commit d514ad2f09
4 changed files with 529 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

183
css/main.css
View File

@ -7,14 +7,14 @@
} }
body { body {
--accent-color: #1042e9; --primary-color: #115FF0;
--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;
--red: #E84545; --accent-color: #F55B5D;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
height: calc(100%); height: calc(100%);
font-size: clamp(1rem, 1.2vmax, 3rem); font-size: clamp(1rem, 1.2vmax, 3rem);
@ -22,7 +22,7 @@ body {
} }
body[data-theme=dark] { body[data-theme=dark] {
--accent-color:#2babf5; --primary-color:#79A5F6;
--text-color: 240, 240, 240; --text-color: 240, 240, 240;
--text-color-light: 170, 170, 170; --text-color-light: 170, 170, 170;
--foreground-color: 20, 20, 20; --foreground-color: 20, 20, 20;
@ -97,7 +97,7 @@ button {
} }
.button--primary { .button--primary {
background: var(--accent-color); background: var(--primary-color);
color: rgba(var(--foreground-color), 1); color: rgba(var(--foreground-color), 1);
} }
.button--primary .icon { .button--primary .icon {
@ -379,7 +379,6 @@ ul {
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 10; z-index: 10;
overflow-y: auto;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
} }
@ -398,31 +397,60 @@ ul {
z-index: 1; z-index: 1;
} }
#elevator_sections { #floor_list {
align-content: flex-start; align-content: flex-start;
padding: 0 1.5rem 4rem 1.5rem; padding: 0 1.5rem 4rem 1.5rem;
gap: 2rem;
overflow-y: auto;
transform-origin: top;
counter-reset: floor-counter;
} }
#elevator_button_panel { .floor_list__item {
gap: 2rem;
overflow: auto;
scroll-snap-type: x proximity;
grid-template-columns: repeat(3, min(40ch, 80%));
}
#elevator_button_panel li {
display: grid; display: grid;
gap: 2rem; gap: 1.5rem;
align-content: flex-start; counter-increment: floor-counter;
scroll-snap-align: start;
} }
#elevator_button_panel sup { .floor_list__item .floor-num::after {
font-weight: 500; content: " " counter(floor-counter);
font-size: 1rem; }
.floor_list__item:last-of-type {
padding-bottom: 25vh;
}
.item__title {
position: sticky;
top: 0;
padding-bottom: 0.5rem;
background: rgba(var(--foreground-color), 1);
z-index: 1;
}
.outlet-list {
gap: 2rem;
padding: 0 0 1rem 2rem;
border-left: 0.15rem solid var(--accent-color);
counter-reset: outlet-counter;
} }
.outlet-section { .outlet-section {
display: grid; display: grid;
user-select: none; user-select: none;
width: min(50ch, 100%);
counter-increment: outlet-counter;
}
.outlet-section .outlet-title::before {
content: counter(outlet-counter) ". ";
}
.outlet-title {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.outlet-brief {
color: rgba(var(--text-color), 0.8);
} }
.popup__header__close { .popup__header__close {
@ -432,11 +460,11 @@ ul {
.floor__button { .floor__button {
position: relative; position: relative;
padding: 1rem; padding: 0.5rem 1rem;
height: 4rem; max-width: 20ch;
width: 4rem;
justify-content: center; justify-content: center;
border-radius: 0.5rem; text-align: left;
border-radius: 0.2rem;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 900; font-weight: 900;
background: rgba(var(--text-color), 0.06); background: rgba(var(--text-color), 0.06);
@ -446,11 +474,16 @@ ul {
box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 1) inset; box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 1) inset;
} }
.floor-name {
margin-top: 0.2rem;
font-size: 0.8rem;
}
.elevator__floor-line { .elevator__floor-line {
flex: 1; flex: 1;
height: 0.1rem; height: 0.1rem;
margin-left: 2rem; margin-left: 2rem;
background-color: var(--red); background-color: var(--accent-color);
} }
#main_header { #main_header {
@ -502,11 +535,12 @@ ul {
} }
.tag { .tag {
background: var(--accent-color); background: var(--primary-color);
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
} }
#home_page { #home_page {
will-change: scroll-position;
overflow-y: auto; overflow-y: auto;
max-height: calc(100vh - 5rem); max-height: calc(100vh - 5rem);
grid-template-columns: 2rem 1fr; grid-template-columns: 2rem 1fr;
@ -515,7 +549,7 @@ ul {
#floor_line_map { #floor_line_map {
position: sticky; position: sticky;
top: 1rem; top: 1rem;
height: 40vh; height: 60vh;
z-index: 5; z-index: 5;
grid-template-columns: 2rem 1fr; grid-template-columns: 2rem 1fr;
grid-column: 1/2; grid-column: 1/2;
@ -532,7 +566,7 @@ ul {
height: 1rem; height: 1rem;
margin-top: -0.5rem; margin-top: -0.5rem;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
border: solid 0.2rem var(--red); border: solid 0.2rem var(--accent-color);
transition: transform 0.1s linear; transition: transform 0.1s linear;
z-index: 5; z-index: 5;
} }
@ -541,7 +575,7 @@ ul {
width: 0.1rem; width: 0.1rem;
height: 100%; height: 100%;
border-radius: 1rem; border-radius: 1rem;
background: var(--red); background: var(--accent-color);
} }
.floor-label { .floor-label {
@ -549,13 +583,23 @@ ul {
display: flex; display: flex;
align-items: center; align-items: center;
left: 0.75rem; left: 0.75rem;
margin-top: -0.9rem; margin-top: -1.4rem;
padding-bottom: 1rem; padding-bottom: 1rem;
user-select: none; user-select: none;
transition: transform 0.3s;
}
.floor-label .floor-title {
opacity: 0;
transform: translateX(-1rem);
transition: opacity 0.3s, transform 0.3s;
}
.floor-label--active {
opacity: 1;
} }
.floor-label--active .floor-title { .floor-label--active .floor-title {
opacity: 1; opacity: 1;
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2); box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
transform: none;
} }
.floor-circle { .floor-circle {
@ -585,29 +629,13 @@ ul {
padding-bottom: 3rem; padding-bottom: 3rem;
width: 100%; width: 100%;
} }
.floor:nth-of-type(2), .floor:nth-of-type(3) {
display: flex;
justify-content: center;
background-image: linear-gradient(135deg, #000000 25%, #ffd900 25%, #ffd900 50%, #000000 50%, #000000 75%, #ffd900 75%, #ffd900 100%);
background-size: 84.85px 84.85px;
margin-bottom: 4rem;
padding: 2rem 0;
}
.floor:nth-of-type(2) .h2, .floor:nth-of-type(3) .h2 {
text-align: center;
background: #ffde26;
padding: 1rem 2rem;
margin: 1rem 0;
justify-self: center;
color: black;
}
.big-icon { .big-icon {
height: 2rem; height: 2rem;
width: 2rem; width: 2rem;
} }
#floor_1__outlets { .outlets-container {
margin: 3rem 0; margin: 3rem 0;
gap: 1.5rem; gap: 1.5rem;
} }
@ -632,7 +660,7 @@ ul {
justify-self: flex-start; justify-self: flex-start;
background: rgba(var(--text-color), 1); background: rgba(var(--text-color), 1);
color: rgba(var(--foreground-color), 1); color: rgba(var(--foreground-color), 1);
box-shadow: 0.2rem 0.2rem 0 var(--red); box-shadow: 0.2rem 0.2rem 0 var(--accent-color);
} }
.outlet-preview__info { .outlet-preview__info {
@ -642,7 +670,7 @@ ul {
} }
.outlet__title { .outlet__title {
font-weight: 700; font-weight: 900;
font-size: 1.8rem; font-size: 1.8rem;
margin-bottom: 0.8rem; margin-bottom: 0.8rem;
text-transform: capitalize; text-transform: capitalize;
@ -662,9 +690,10 @@ ul {
} }
.outlet-preview__button { .outlet-preview__button {
background-color: rgba(var(--text-color), 0.1);
justify-self: flex-start; justify-self: flex-start;
border-radius: 0.3rem; border-radius: 0.2rem;
padding: 0.3rem 1rem;
box-shadow: 0 0 0 1px rgba(var(--text-color), 1);
} }
/* .outlet-preview__carousel{ /* .outlet-preview__carousel{
@ -708,6 +737,7 @@ sm-carousel {
--arrow-box-shadow: none; --arrow-box-shadow: none;
--arrow-bottom: -3.5rem; --arrow-bottom: -3.5rem;
--indicator-bottom: -2.5rem; --indicator-bottom: -2.5rem;
--active-indicator-color: var(--primary-color);
} }
.bit-bond-series__row, .bit-bond-series__row,
@ -763,7 +793,7 @@ sm-carousel {
padding: 0.4rem 0; padding: 0.4rem 0;
} }
.outlet_switcher__button--active { .outlet_switcher__button--active {
color: var(--accent-color); color: var(--primary-color);
} }
.outlet_switcher__button:not(:last-of-type)::after { .outlet_switcher__button:not(:last-of-type)::after {
content: ""; content: "";
@ -771,19 +801,19 @@ sm-carousel {
width: 4vw; width: 4vw;
height: 0.1rem; height: 0.1rem;
margin: 0 0.5rem; margin: 0 0.5rem;
background: var(--red); background: var(--accent-color);
} }
.outlet-label { .outlet-label {
display: flex; display: flex;
align-items: center; align-items: center;
justify-self: flex-start; justify-self: flex-start;
color: var(--accent-color); color: var(--primary-color);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-size: 1rem; font-size: 1rem;
} }
.outlet-label .icon { .outlet-label .icon {
fill: var(--accent-color); fill: var(--primary-color);
margin-right: 0.5rem; margin-right: 0.5rem;
} }
@ -830,10 +860,10 @@ scroll-tab-panels > [active] {
} }
.room-button[active] { .room-button[active] {
opacity: 1; opacity: 1;
color: var(--accent-color); color: var(--primary-color);
} }
.room-button[active] .icon { .room-button[active] .icon {
fill: var(--accent-color); fill: var(--primary-color);
} }
.room-button[active]::after { .room-button[active]::after {
content: ""; content: "";
@ -843,7 +873,7 @@ scroll-tab-panels > [active] {
bottom: 0; bottom: 0;
left: 0; left: 0;
border-radius: 0.2rem 0.2rem 0 0; border-radius: 0.2rem 0.2rem 0 0;
background: var(--accent-color); background: var(--primary-color);
} }
table { table {
@ -913,23 +943,6 @@ table {
display: none; display: none;
} }
.floor-label {
transition: transform 0.3s;
}
.floor-label .floor-title {
opacity: 0;
transform: translateX(-1rem);
transition: opacity 0.3s, transform 0.3s;
}
.floor-label--active {
opacity: 1;
}
.floor-label--active .floor-title {
opacity: 1;
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
transform: none;
}
#outlet_switcher { #outlet_switcher {
width: calc(100% - 2rem); width: calc(100% - 2rem);
} }
@ -963,7 +976,7 @@ table {
padding: 1.2rem 2rem; padding: 1.2rem 2rem;
} }
#elevator_sections { #floor_list {
padding: 0 3rem 4rem 4.6rem; padding: 0 3rem 4rem 4.6rem;
} }
@ -971,11 +984,7 @@ table {
grid-template-columns: 1fr 80vw 1fr; grid-template-columns: 1fr 80vw 1fr;
} }
#floor_line_map { .outlets-container {
margin-left: 0.8rem;
}
#floor_1__outlets {
gap: 5rem; gap: 5rem;
} }
@ -1045,7 +1054,7 @@ table {
height: 4rem; height: 4rem;
width: 1px; width: 1px;
right: 0.5rem; right: 0.5rem;
background-color: var(--red); background-color: var(--accent-color);
} }
} */ } */
} }
@ -1077,18 +1086,10 @@ table {
transition: color 0.3s; transition: color 0.3s;
} }
.page-link:hover { .page-link:hover {
color: var(--accent-color); color: var(--primary-color);
} }
.page-link:hover .icon { .page-link:hover .icon {
fill: var(--accent-color); fill: var(--primary-color);
}
.outlet-section .icon {
transform: translateX(-0.5rem);
transition: transform 0.3s;
}
.outlet-section:hover .icon {
transform: none;
} }
.floor__button:hover { .floor__button:hover {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

179
css/main.scss
View File

@ -7,21 +7,21 @@
} }
body { body {
--accent-color: #1042e9; --primary-color: #115FF0;
--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;
--red: #E84545; --accent-color: #F55B5D;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
height: calc(100%); height: calc(100%);
font-size: clamp(1rem, 1.2vmax, 3rem); font-size: clamp(1rem, 1.2vmax, 3rem);
background: var(--background-color); background: var(--background-color);
} }
body[data-theme='dark']{ body[data-theme='dark']{
--accent-color:#2babf5; --primary-color:#79A5F6;
--text-color: 240, 240, 240; --text-color: 240, 240, 240;
--text-color-light: 170, 170, 170; --text-color-light: 170, 170, 170;
--foreground-color: 20, 20, 20; --foreground-color: 20, 20, 20;
@ -89,7 +89,7 @@ button{
padding: 0.5rem 0.6rem; padding: 0.5rem 0.6rem;
} }
.button--primary{ .button--primary{
background: var(--accent-color); background: var(--primary-color);
color: rgba(var(--foreground-color), 1); color: rgba(var(--foreground-color), 1);
.icon{ .icon{
fill: rgba(var(--foreground-color), 1); fill: rgba(var(--foreground-color), 1);
@ -316,7 +316,6 @@ ul{
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 10; z-index: 10;
overflow-y: auto;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
} }
@ -334,29 +333,55 @@ ul{
z-index: 1; z-index: 1;
} }
#elevator_sections{ #floor_list{
align-content: flex-start; align-content: flex-start;
padding: 0 1.5rem 4rem 1.5rem; padding: 0 1.5rem 4rem 1.5rem;
}
#elevator_button_panel{
gap: 2rem; gap: 2rem;
overflow: auto; overflow-y: auto;
scroll-snap-type: x proximity; transform-origin: top;
grid-template-columns: repeat(3, min(40ch, 80%)); counter-reset: floor-counter;
li{ }
display: grid; .floor_list__item{
gap: 2rem; display: grid;
align-content: flex-start; gap: 1.5rem;
scroll-snap-align: start; counter-increment: floor-counter;
.floor-num::after{
content: " " counter(floor-counter);
} }
sup{ &:last-of-type{
font-weight: 500; padding-bottom: 25vh;
font-size: 1rem;
} }
} }
.item__title{
position: sticky;
top: 0;
padding-bottom: 0.5rem;
background: rgba(var(--foreground-color), 1);
z-index: 1;
}
.outlet-list{
gap: 2rem;
padding: 0 0 1rem 2rem;
border-left: 0.15rem solid var(--accent-color);
counter-reset: outlet-counter;
}
.outlet-section{ .outlet-section{
display: grid; display: grid;
user-select: none; user-select: none;
width: min(50ch, 100%);
counter-increment: outlet-counter;
.outlet-title::before{
content: counter(outlet-counter)". ";
}
}
.outlet-title{
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.outlet-brief{
color: rgba(var(--text-color), 0.8);
} }
.popup__header__close{ .popup__header__close{
@ -367,11 +392,11 @@ ul{
.floor__button{ .floor__button{
position: relative; position: relative;
padding: 1rem; padding: 0.5rem 1rem;
height: 4rem; max-width: 20ch;
width: 4rem;
justify-content: center; justify-content: center;
border-radius: 0.5rem; text-align: left;
border-radius: 0.2rem;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 900; font-weight: 900;
background: rgba(var(--text-color), 0.06); background: rgba(var(--text-color), 0.06);
@ -380,11 +405,16 @@ ul{
box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 1) inset; box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 1) inset;
} }
} }
.floor-name{
margin-top: 0.2rem;
font-size: 0.8rem;
}
.elevator__floor-line{ .elevator__floor-line{
flex: 1; flex: 1;
height: 0.1rem; height: 0.1rem;
margin-left: 2rem; margin-left: 2rem;
background-color: var(--red); background-color: var(--accent-color);
} }
@ -433,11 +463,12 @@ ul{
} }
.tag{ .tag{
background: var(--accent-color); background: var(--primary-color);
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
} }
#home_page{ #home_page{
will-change: scroll-position;
overflow-y: auto; overflow-y: auto;
max-height: calc(100vh - 5rem); max-height: calc(100vh - 5rem);
grid-template-columns: 2rem 1fr; grid-template-columns: 2rem 1fr;
@ -446,7 +477,7 @@ ul{
#floor_line_map{ #floor_line_map{
position: sticky; position: sticky;
top: 1rem; top: 1rem;
height: 40vh; height: 60vh;
z-index: 5; z-index: 5;
grid-template-columns: 2rem 1fr; grid-template-columns: 2rem 1fr;
grid-column: 1/2; grid-column: 1/2;
@ -461,7 +492,7 @@ ul{
height: 1rem; height: 1rem;
margin-top: -0.5rem; margin-top: -0.5rem;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
border: solid 0.2rem var(--red); border: solid 0.2rem var(--accent-color);
transition: transform 0.1s linear; transition: transform 0.1s linear;
z-index: 5; z-index: 5;
} }
@ -469,7 +500,7 @@ ul{
width: 0.1rem; width: 0.1rem;
height: 100%; height: 100%;
border-radius: 1rem; border-radius: 1rem;
background: var(--red); background: var(--accent-color);
} }
.floor-label{ .floor-label{
@ -477,13 +508,21 @@ ul{
display: flex; display: flex;
align-items: center; align-items: center;
left: 0.75rem; left: 0.75rem;
margin-top: -0.9rem; margin-top: -1.4rem;
padding-bottom: 1rem; padding-bottom: 1rem;
user-select: none; user-select: none;
transition: transform 0.3s;
.floor-title{
opacity: 0;
transform: translateX(-1rem);
transition: opacity 0.3s, transform 0.3s;
}
&--active{ &--active{
opacity: 1;
.floor-title{ .floor-title{
opacity: 1; opacity: 1;
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2); box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
transform: none;
} }
} }
} }
@ -512,24 +551,6 @@ ul{
.floor{ .floor{
padding-bottom: 3rem; padding-bottom: 3rem;
width: 100%; width: 100%;
&:nth-of-type(2),
&:nth-of-type(3){
display: flex;
justify-content: center;
background-image: linear-gradient(135deg, #000000 25%, #ffd900 25%, #ffd900 50%, #000000 50%, #000000 75%, #ffd900 75%, #ffd900 100%);
background-size: 84.85px 84.85px;
margin-bottom: 4rem;
padding: 2rem 0;
}
&:nth-of-type(2) .h2,
&:nth-of-type(3) .h2{
text-align: center;
background: #ffde26;
padding: 1rem 2rem;
margin: 1rem 0;
justify-self: center;
color: black;
}
} }
.big-icon{ .big-icon{
@ -537,7 +558,7 @@ ul{
width: 2rem; width: 2rem;
} }
#floor_1__outlets{ .outlets-container{
margin: 3rem 0; margin: 3rem 0;
gap: 1.5rem; gap: 1.5rem;
} }
@ -561,7 +582,7 @@ ul{
justify-self: flex-start; justify-self: flex-start;
background: rgba(var(--text-color), 1); background: rgba(var(--text-color), 1);
color: rgba(var(--foreground-color), 1); color: rgba(var(--foreground-color), 1);
box-shadow: 0.2rem 0.2rem 0 var(--red); box-shadow: 0.2rem 0.2rem 0 var(--accent-color);
} }
.outlet-preview__info{ .outlet-preview__info{
position: relative; position: relative;
@ -569,7 +590,7 @@ ul{
border-radius: 0.5rem; border-radius: 0.5rem;
} }
.outlet__title{ .outlet__title{
font-weight: 700; font-weight: 900;
font-size: 1.8rem; font-size: 1.8rem;
margin-bottom: 0.8rem; margin-bottom: 0.8rem;
text-transform: capitalize; text-transform: capitalize;
@ -586,9 +607,10 @@ ul{
border-radius: 0.5rem; border-radius: 0.5rem;
} }
.outlet-preview__button{ .outlet-preview__button{
background-color: rgba(var(--text-color), 0.1);
justify-self: flex-start; justify-self: flex-start;
border-radius: 0.3rem; border-radius: 0.2rem;
padding: 0.3rem 1rem;
box-shadow: 0 0 0 1px rgba(var(--text-color), 1);
} }
/* .outlet-preview__carousel{ /* .outlet-preview__carousel{
@ -629,6 +651,7 @@ sm-carousel{
--arrow-box-shadow: none; --arrow-box-shadow: none;
--arrow-bottom: -3.5rem; --arrow-bottom: -3.5rem;
--indicator-bottom: -2.5rem; --indicator-bottom: -2.5rem;
--active-indicator-color: var(--primary-color);
} }
.bit-bond-series__row, .bit-bond-series__row,
@ -678,7 +701,7 @@ sm-carousel{
font-size: 1rem; font-size: 1rem;
padding: 0.4rem 0; padding: 0.4rem 0;
&--active{ &--active{
color: var(--accent-color); color: var(--primary-color);
} }
&:not(:last-of-type)::after{ &:not(:last-of-type)::after{
content: ''; content: '';
@ -686,18 +709,18 @@ sm-carousel{
width: 4vw; width: 4vw;
height: 0.1rem; height: 0.1rem;
margin: 0 0.5rem; margin: 0 0.5rem;
background: var(--red); background: var(--accent-color);
} }
} }
.outlet-label{ .outlet-label{
display: flex; display: flex;
align-items: center; align-items: center;
justify-self: flex-start; justify-self: flex-start;
color: var(--accent-color); color: var(--primary-color);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-size: 1rem; font-size: 1rem;
.icon{ .icon{
fill: var(--accent-color); fill: var(--primary-color);
margin-right: 0.5rem; margin-right: 0.5rem;
} }
} }
@ -740,9 +763,9 @@ scroll-tab-panels{
padding: 0.6rem 0.8rem; padding: 0.6rem 0.8rem;
&[active]{ &[active]{
opacity: 1; opacity: 1;
color: var(--accent-color); color: var(--primary-color);
.icon{ .icon{
fill: var(--accent-color); fill: var(--primary-color);
} }
&::after{ &::after{
content: ''; content: '';
@ -752,7 +775,7 @@ scroll-tab-panels{
bottom: 0; bottom: 0;
left: 0; left: 0;
border-radius: 0.2rem 0.2rem 0 0; border-radius: 0.2rem 0.2rem 0 0;
background: var(--accent-color); background: var(--primary-color);
} }
} }
@ -823,22 +846,6 @@ table{
.hide-on-mobile{ .hide-on-mobile{
display: none; display: none;
} }
.floor-label{
transition: transform 0.3s;
.floor-title{
opacity: 0;
transform: translateX(-1rem);
transition: opacity 0.3s, transform 0.3s;
}
&--active{
opacity: 1;
.floor-title{
opacity: 1;
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
transform: none;
}
}
}
#outlet_switcher{ #outlet_switcher{
width: calc(100% - 2rem); width: calc(100% - 2rem);
} }
@ -865,16 +872,13 @@ table{
#main_header{ #main_header{
padding: 1.2rem 2rem; padding: 1.2rem 2rem;
} }
#elevator_sections{ #floor_list{
padding: 0 3rem 4rem 4.6rem; padding: 0 3rem 4rem 4.6rem;
} }
#home_page{ #home_page{
grid-template-columns: 1fr 80vw 1fr; grid-template-columns: 1fr 80vw 1fr;
} }
#floor_line_map{ .outlets-container{
margin-left: 0.8rem;
}
#floor_1__outlets{
gap: 5rem; gap: 5rem;
} }
.outlet-preview{ .outlet-preview{
@ -937,7 +941,7 @@ table{
height: 4rem; height: 4rem;
width: 1px; width: 1px;
right: 0.5rem; right: 0.5rem;
background-color: var(--red); background-color: var(--accent-color);
} }
} */ } */
} }
@ -964,21 +968,12 @@ table{
cursor: pointer; cursor: pointer;
transition: color 0.3s; transition: color 0.3s;
&:hover{ &:hover{
color: var(--accent-color); color: var(--primary-color);
.icon{ .icon{
fill: var(--accent-color); fill: var(--primary-color);
} }
} }
} }
.outlet-section{
.icon{
transform: translateX(-0.5rem);
transition: transform 0.3s;
}
&:hover .icon{
transform: none;
}
}
.floor__button:hover{ .floor__button:hover{
background: rgba(var(--text-color), 0.2); background: rgba(var(--text-color), 0.2);
} }

413
index.html
View File

@ -107,7 +107,10 @@
<template id="floor_indicator_template"> <template id="floor_indicator_template">
<div class="floor-label interact"> <div class="floor-label interact">
<span class="floor-circle"></span> <span class="floor-circle"></span>
<span class="floor-title weight-500 color-0-8 h5"></span> <span class="grid floor-title">
<h5 class="floor-num weight-400 color-0-7 h5"></h5>
<h5 class="floor-name weight-400"></h5>
</span>
</div> </div>
</template> </template>
@ -126,50 +129,112 @@
<h4 class="h4 header__company-name">RanchiMall</h4> <h4 class="h4 header__company-name">RanchiMall</h4>
</div> --> </div> -->
</header> </header>
<div id="elevator_sections" class="grid"> <ul id="floor_list" class="grid">
<h4 class="h4 margin-bottom-2r">Floors</h4> <li class="floor_list__item">
<ul id="elevator_button_panel" class="grid"> <div class="item__title">
<li> <h5 class="h5 floor-num">Floor</h5>
<div class="flex align-center"> <h4 class="h3">Current Products</h4>
<button class="button floor__button" data-target="floor_1"> </div>
<span> <ul class="outlet-list grid">
1<sup>st</sup> <li class="outlet-section page-link interact" tabindex="0" data-target="bitbonds">
</span> <h4 class="outlet-title">BitCoin Bonds</h4>
</button> <p class="outlet-brief">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, praesentium.</p>
<div class="elevator__floor-line"></div> </li>
</div> <li class="outlet-section page-link interact" tabindex="0" data-target="bob'sfund">
<div class="outlet-section page-link interact" data-target="bitbonds"> <h4 class="outlet-title">Bob's Fund</h4>
<h3 class="h3 margin-bottom-0-5r">1. BitCoin Bonds</h3> <p class="outlet-brief">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, praesentium.</p>
<p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p> </li>
</div> <li class="outlet-section page-link interact" tabindex="0" data-target="ico">
<div class="outlet-section page-link interact" data-target="bob'sfund"> <h4 class="outlet-title">ICO</h4>
<h3 class="h3 margin-bottom-0-5r">2. Bob's Fund</h3> <p class="outlet-brief">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, praesentium.</p>
<p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p> </li>
</div> </ul>
<div class="outlet-section page-link interact" data-target="ico"> </li>
<h3 class="h3 margin-bottom-0-5r">3. ICO</h3> <li class="floor_list__item">
<p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p> <div class="item__title">
</div> <h5 class="h5 floor-num">Floor</h5>
</li> <h4 class="h3">Blockchain Contracts</h4>
<li> </div>
<div class="flex align-center"> <ul class="outlet-list grid">
<button class="button floor__button" data-target="floor_2"> <li class="outlet-section page-link interact" tabindex="0" data-target="">
<span> <h4 class="outlet-title">Incorporation Blockchain Contract</h4>
2<sup>nd</sup> <p class="outlet-brief">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, praesentium.</p>
</span> </li>
</button> <li class="outlet-section page-link interact" tabindex="0" data-target="">
<div class="elevator__floor-line"></div> <h4 class="outlet-title">Internship Blockchain Contract</h4>
</div> <p class="outlet-brief">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, praesentium.</p>
</li> </li>
<li> <li class="outlet-section page-link interact" tabindex="0" data-target="">
<button class="button floor__button" data-target="floor_3"> <h4 class="outlet-title">FLO Blockchain Contract</h4>
<span> <p class="outlet-brief">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, praesentium.</p>
3<sup>rd</sup> </li>
</span> <li class="outlet-section page-link interact" tabindex="0" data-target="">
</button> <h4 class="outlet-title">Startup Blockchain Contract</h4>
</li> <p class="outlet-brief">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, praesentium.</p>
</ul> </li>
</div> <li class="outlet-section page-link interact" tabindex="0" data-target="">
<h4 class="outlet-title">Real Estate Blockchain Contract</h4>
<p class="outlet-brief">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, praesentium.</p>
</li>
<li class="outlet-section page-link interact" tabindex="0" data-target="">
<h4 class="outlet-title">Painting Blockchain Contract</h4>
<p class="outlet-brief">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, praesentium.</p>
</li>
</ul>
</li>
<li class="floor_list__item">
<div class="item__title">
<h5 class="h5 floor-num">Floor</h5>
<h4 class="h3">Blockchain Apps</h4>
</div>
<ul class="outlet-list grid">
<li class="outlet-section page-link interact" tabindex="0" data-target="">
<h4 class="outlet-title">Web Wallet</h4>
<p class="outlet-brief">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, praesentium.</p>
</li>
</ul>
</li>
<li class="floor_list__item">
<div class="item__title">
<h5 class="h5 floor-num">Floor</h5>
<h4 class="h3">Experimental Ideas</h4>
</div>
<ul class="outlet-list grid">
<li class="outlet-section page-link interact" tabindex="0" data-target="">
<h4 class="outlet-title">Blockchain Cloud</h4>
<p class="outlet-brief">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, praesentium.</p>
</li>
<li class="outlet-section page-link interact" tabindex="0" data-target="">
<h4 class="outlet-title">UPI on Blockchain</h4>
<p class="outlet-brief">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, praesentium.</p>
</li>
<li class="outlet-section page-link interact" tabindex="0" data-target="">
<h4 class="outlet-title">E-Commerce on Blockchain</h4>
<p class="outlet-brief">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, praesentium.</p>
</li>
</ul>
</li>
<li class="floor_list__item">
<div class="item__title">
<h5 class="h5 floor-num">Floor</h5>
<h4 class="h3">Statistics and Administration</h4>
</div>
<ul class="outlet-list grid">
<li class="outlet-section page-link interact" tabindex="0" data-target="">
<h4 class="outlet-title">Incorporation</h4>
<p class="outlet-brief">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, praesentium.</p>
</li>
<li class="outlet-section page-link interact" tabindex="0" data-target="">
<h4 class="outlet-title">Team</h4>
<p class="outlet-brief">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, praesentium.</p>
</li>
<li class="outlet-section page-link interact" tabindex="0" data-target="">
<h4 class="outlet-title">Operational Statistics</h4>
<p class="outlet-brief">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, praesentium.</p>
</li>
</ul>
</li>
</ul>
</section> </section>
<!-- --> <!-- -->
@ -201,13 +266,13 @@
</aside> </aside>
<main id="floor_container" class="grid"> <main id="floor_container" class="grid">
<section id="floor_1" class="floor"> <section id="floor_1" class="floor">
<!-- <span class="flex align-center margin-bottom-1-5r"> <span class="grid align-center margin-bottom-1-5r">
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z"/></svg> <h5 class="h5">Floor</h5>
<h4 class="h4 weight-500"> <h4 class="h4 weight-700">
Outlets Current Projects
</h4> </h4>
</span> --> </span>
<main id="floor_1__outlets" class="grid"> <main id="floor_1__outlets" class="grid outlets-container">
<div id="bit_bond_outlet" class="outlet-preview carousel-container"> <div id="bit_bond_outlet" class="outlet-preview carousel-container">
<div class="grid outlet-preview__info"> <div class="grid outlet-preview__info">
<div class="outlet-number">1</div> <div class="outlet-number">1</div>
@ -217,7 +282,6 @@
</p> </p>
<button class="button page-link outlet-preview__button" data-target="bitbonds"> <button class="button page-link outlet-preview__button" data-target="bitbonds">
<span class="button__label">Visit</span> <span class="button__label">Visit</span>
<svg class="icon button__icon--right" 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>
</button> </button>
</div> </div>
<div class="grid carousel-holder carousel-holder--right"> <div class="grid carousel-holder carousel-holder--right">
@ -234,7 +298,6 @@
</p> </p>
<button class="button page-link outlet-preview__button" data-target="bob'sfund"> <button class="button page-link outlet-preview__button" data-target="bob'sfund">
<span class="button__label">Visit</span> <span class="button__label">Visit</span>
<svg class="icon button__icon--right" 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>
</button> </button>
</div> </div>
<div class="grid carousel-holder carousel-holder--left"> <div class="grid carousel-holder carousel-holder--left">
@ -251,7 +314,6 @@
</p> </p>
<button class="button page-link outlet-preview__button" data-target="ico"> <button class="button page-link outlet-preview__button" data-target="ico">
<span class="button__label">Visit</span> <span class="button__label">Visit</span>
<svg class="icon button__icon--right" 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>
</button> </button>
</div> </div>
<div class="grid carousel-holder carousel-holder--right"> <div class="grid carousel-holder carousel-holder--right">
@ -262,10 +324,226 @@
</main> </main>
</section> </section>
<section id="floor_2" class="floor"> <section id="floor_2" class="floor">
<h4 class="h2">Under construction</h4> <span class="grid align-center margin-bottom-1-5r">
<h5 class="h5">Floor 2</h5>
<h4 class="h4 weight-700">
Blockchain Contracts
</h4>
</span>
<main id="floor_2__outlets" class="grid outlets-container">
<div id="" class="outlet-preview">
<div class="grid outlet-preview__info">
<div class="outlet-number">1</div>
<h3 class="outlet__title">Internship Blockchain Contract</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">
<div class="outlet-number">2</div>
<h3 class="outlet__title">FLO Blockchain Contract</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">
<div class="outlet-number">3</div>
<h3 class="outlet__title">Startup Blockchain Contract</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>
<div id="" class="outlet-preview">
<div class="grid outlet-preview__info">
<div class="outlet-number">4</div>
<h3 class="outlet__title">Real Estate Blockchain Contract</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>
<div id="" class="outlet-preview">
<div class="grid outlet-preview__info">
<div class="outlet-number">5</div>
<h3 class="outlet__title">Painting Blockchain Contract</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>
<section id="floor_3" class="floor"> <section id="floor_3" class="floor">
<h4 class="h2">Under construction</h4> <span class="grid align-center margin-bottom-1-5r">
<h5 class="h5">Floor 3</h5>
<h4 class="h4 weight-700">
Blockchain Apps
</h4>
</span>
<main id="floor_3__outlets" class="grid outlets-container">
<div id="" class="outlet-preview">
<div class="grid outlet-preview__info">
<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">
<div class="outlet-number">2</div>
<h3 class="outlet__title">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">
<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>
</main>
</section>
<section id="floor_4" class="floor">
<span class="grid align-center margin-bottom-1-5r">
<h5 class="h5">Floor 4</h5>
<h4 class="h4 weight-700">
Experimental Ideas
</h4>
</span>
<main id="floor_4__outlets" class="grid outlets-container">
<div id="" class="outlet-preview">
<div class="grid outlet-preview__info">
<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">
<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">
<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">
<span class="grid align-center margin-bottom-1-5r">
<h5 class="h5">Floor 5</h5>
<h4 class="h4 weight-700">
Statistics and Administration
</h4>
</span>
<main id="floor_5__outlets" class="grid outlets-container">
<div id="" class="outlet-preview">
<div class="grid outlet-preview__info">
<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">
<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">
<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> </section>
</main> </main>
</article> </article>
@ -429,7 +707,6 @@
<!-- --> <!-- -->
<script src="components.js"></script> <script src="components.js"></script>
<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.6.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>
<script id="standard_UI_functions"> <script id="standard_UI_functions">
const domRefs = {} const domRefs = {}
@ -855,7 +1132,6 @@
</script> </script>
<script> <script>
gsap.registerPlugin(ScrollTrigger);
const render = { const render = {
bitBondRow(obj){ bitBondRow(obj){
const {series, currentValue, timeElapsed} = obj const {series, currentValue, timeElapsed} = obj
@ -904,11 +1180,14 @@
const floorLabel = getRef('floor_indicator_template').content.cloneNode(true).firstElementChild const floorLabel = getRef('floor_indicator_template').content.cloneNode(true).firstElementChild
floorLabel.setAttribute('style', `top: ${offsetTop}px`) floorLabel.setAttribute('style', `top: ${offsetTop}px`)
floorLabel.dataset.target = `floor_${floorNumber}` floorLabel.dataset.target = `floor_${floorNumber}`
floorLabel.querySelector('.floor-title').textContent = `Floor ${floorNumber}` floorLabel.querySelector('.floor-num').textContent = `Floor ${floorNumber}`
floorLabel.querySelector('.floor-name').textContent = floors[floorNumber - 1]
return floorLabel return floorLabel
} }
} }
const floors = ['Current Products', 'Blockchain Contracts', 'Blockchain Applications', 'Experimental Ideas', 'Statistics and Administration']
/* /*
Animations Animations
@ -1435,24 +1714,30 @@
easing: 'ease' easing: 'ease'
} }
const siteMapTimeline = gsap.timeline({defaults: {ease: 'power2'}, onReverseComplete: resumeScrolling, paused: true}) const siteMapTimeline = gsap.timeline({defaults: {ease: 'power3'}, onReverseComplete: resumeScrolling, paused: true})
siteMapTimeline.from('#elevator_popup', {opacity: 0}) siteMapTimeline.from('#elevator_popup', {duration: 0.3, opacity: 0})
.from('.close-button', {scale: 0}, '-= 0.2') .from('.close-button', {scale: 0}, '-= 0.2')
.from('#elevator_sections', {opacity: 0, y: 10}) .from('.floor_list__item', {opacity: 0, y: 16, stagger: 0.1})
.from('.outlet-section', {opacity: 0, x: 10, stagger: 0.1}, '-=0.1') .from('.outlet-section', {opacity: 0, y: 16, stagger: 0.1}, '-=0.7')
function showSiteMap(){ function showSiteMap(){
document.querySelectorAll('.page').forEach(page => {
page.setAttribute('aria-hidden', 'true')
})
isSiteMapOpen = true isSiteMapOpen = true
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
document.body.style.top= `-${window.scrollY}px` document.body.style.top= `-${window.scrollY}px`
getRef('elevator_popup').classList.remove('hide-completely') getRef('elevator_popup').classList.remove('hide-completely')
siteMapTimeline.duration(1).play() siteMapTimeline.duration(2).play()
} }
function hideSiteMap(){ function hideSiteMap(){
const scrollY = document.body.style.top; const scrollY = document.body.style.top;
window.scrollTo(0, parseInt(scrollY || '0') * -1); window.scrollTo(0, parseInt(scrollY || '0') * -1);
siteMapTimeline.duration(0.4).reverse() siteMapTimeline.duration(0.4).reverse()
document.querySelectorAll('.page').forEach(page => {
page.removeAttribute('aria-hidden')
})
} }
function resumeScrolling(){ function resumeScrolling(){