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

v0.14.15

Browse Source 
Added
-- floor changing from elevator popup

Changed
-- homepage floor layout
-- body font
This commit is contained in:
sairaj mote 2021-04-09 16:57:57 +05:30
parent 60effc09f1
commit 311e377240
8 changed files with 342 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/bg/bg1.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 7.0 KiB

1
assets/bg/bg2.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1600"><defs><linearGradient id="a" x1="-11.31" y1="904.24" x2="1015.26" y2="-122.32" gradientTransform="translate(-79.97 109.85)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="0.33" stop-color="#fff" stop-opacity="0.01"/><stop offset="0.51" stop-color="#fff" stop-opacity="0.04"/><stop offset="0.65" stop-color="#fff" stop-opacity="0.09"/><stop offset="0.78" stop-color="#fff" stop-opacity="0.17"/><stop offset="0.89" stop-color="#fff" stop-opacity="0.27"/><stop offset="0.99" stop-color="#fff" stop-opacity="0.39"/><stop offset="1" stop-color="#fff" stop-opacity="0.4"/></linearGradient><linearGradient id="b" x1="-164.43" y1="1060.21" x2="862.13" y2="33.64" gradientTransform="translate(-82.81 -199.23)" xlink:href="#a"/><linearGradient id="c" x1="-377.03" y1="1225.29" x2="649.54" y2="198.73" gradientTransform="translate(-35.31 -576.91)" xlink:href="#a"/><linearGradient id="d" x1="-591.44" y1="1423.47" x2="435.13" y2="396.91" gradientTransform="translate(-19.08 -989.51)" xlink:href="#a"/><linearGradient id="e" x1="-783.64" y1="1608.56" x2="242.93" y2="581.99" gradientTransform="translate(-11.96 -1366.79)" xlink:href="#a"/></defs><rect x="-118.83" y="29.01" width="1093.21" height="932.04" transform="translate(922.81 67.25) rotate(90)" style="fill:url(#a)"/><rect x="-274.79" y="-124.11" width="1093.21" height="932.04" transform="translate(613.73 70.09) rotate(90)" style="fill:url(#b)"/><rect x="-439.88" y="-336.7" width="1093.21" height="932.04" transform="translate(236.05 22.59) rotate(90)" style="fill:url(#c)"/><rect x="-638.06" y="-551.12" width="1093.21" height="932.04" transform="translate(-176.55 6.36) rotate(90)" style="fill:url(#d)"/><rect x="-823.14" y="-743.32" width="1093.21" height="932.04" transform="translate(-553.83 -0.76) rotate(90)" style="fill:url(#e)"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

17
assets/bg/floor-1-bg.svg
View File

@ -1,17 +0,0 @@
<svg width="1280" height="720" viewBox="0 0 1280 720" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<line x1="148" y1="151" x2="7" y2="151" stroke="#1050CB" stroke-width="14" stroke-linecap="round"/>
<line x1="207" y1="178" x2="7" y2="178" stroke="#1050CB" stroke-width="14" stroke-linecap="round"/>
<line x1="196" y1="205" x2="7" y2="205" stroke="#1050CB" stroke-width="14" stroke-linecap="round"/>
<line x1="128" y1="232" x2="7" y2="232" stroke="#1050CB" stroke-width="14" stroke-linecap="round"/>
<line x1="1217.53" y1="701.125" x2="1317.23" y2="800.827" stroke="#1050CB" stroke-width="14" stroke-linecap="round"/>
<line x1="1194.9" y1="640.313" x2="1336.32" y2="781.734" stroke="#1050CB" stroke-width="14" stroke-linecap="round"/>
<line x1="1221.77" y1="629" x2="1355.41" y2="762.643" stroke="#1050CB" stroke-width="14" stroke-linecap="round"/>
<line x1="1288.95" y1="657.99" x2="1374.51" y2="743.55" stroke="#1050CB" stroke-width="14" stroke-linecap="round"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="1280" height="720" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

44
assets/bg/homepage-bg.svg Normal file
View File

@ -0,0 +1,44 @@
<svg width="1280" height="720" viewBox="0 0 1280 720" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<ellipse cx="24.5" cy="565" rx="33.5" ry="33" fill="#FF9292"/>
<ellipse cx="57.5" cy="598" rx="12.5" ry="12" fill="#FFB4B4"/>
<path d="M1214.81 243.61L1370.03 243.61L1292.42 378.036L1214.81 243.61Z" fill="#FFDCDC"/>
<circle cx="667.964" cy="126.052" r="4" transform="rotate(30 667.964 126.052)" fill="#FFB4B4"/>
<circle cx="667.964" cy="126.052" r="4" transform="rotate(30 667.964 126.052)" fill="#FFB4B4"/>
<circle cx="680.32" cy="136.652" r="4" transform="rotate(30 680.32 136.652)" fill="#FFB4B4"/>
<circle cx="680.32" cy="136.652" r="4" transform="rotate(30 680.32 136.652)" fill="#FFB4B4"/>
<circle cx="692.675" cy="147.249" r="4" transform="rotate(30 692.675 147.249)" fill="#FFB4B4"/>
<circle cx="692.675" cy="147.249" r="4" transform="rotate(30 692.675 147.249)" fill="#FFB4B4"/>
<circle cx="705.034" cy="157.847" r="4" transform="rotate(30 705.034 157.847)" fill="#FFB4B4"/>
<circle cx="705.034" cy="157.847" r="4" transform="rotate(30 705.034 157.847)" fill="#FFB4B4"/>
<circle cx="668.894" cy="140.445" r="4" transform="rotate(30 668.894 140.445)" fill="#FFB4B4"/>
<circle cx="668.894" cy="140.445" r="4" transform="rotate(30 668.894 140.445)" fill="#FFB4B4"/>
<circle cx="681.249" cy="151.042" r="4" transform="rotate(30 681.249 151.042)" fill="#FFB4B4"/>
<circle cx="681.249" cy="151.042" r="4" transform="rotate(30 681.249 151.042)" fill="#FFB4B4"/>
<circle cx="693.605" cy="161.642" r="4" transform="rotate(30 693.605 161.642)" fill="#FFB4B4"/>
<circle cx="693.605" cy="161.642" r="4" transform="rotate(30 693.605 161.642)" fill="#FFB4B4"/>
<circle cx="705.96" cy="172.239" r="4" transform="rotate(30 705.96 172.239)" fill="#FFB4B4"/>
<circle cx="705.96" cy="172.239" r="4" transform="rotate(30 705.96 172.239)" fill="#FFB4B4"/>
<circle cx="692.554" cy="119.464" r="4" transform="rotate(30 692.554 119.464)" fill="#FFB4B4"/>
<circle cx="692.554" cy="119.464" r="4" transform="rotate(30 692.554 119.464)" fill="#FFB4B4"/>
<circle cx="704.909" cy="130.062" r="4" transform="rotate(30 704.909 130.062)" fill="#FFB4B4"/>
<circle cx="704.909" cy="130.062" r="4" transform="rotate(30 704.909 130.062)" fill="#FFB4B4"/>
<circle cx="717.265" cy="140.659" r="4" transform="rotate(30 717.265 140.659)" fill="#FFB4B4"/>
<circle cx="717.265" cy="140.659" r="4" transform="rotate(30 717.265 140.659)" fill="#FFB4B4"/>
<circle cx="729.62" cy="151.259" r="4" transform="rotate(30 729.62 151.259)" fill="#FFB4B4"/>
<circle cx="729.62" cy="151.259" r="4" transform="rotate(30 729.62 151.259)" fill="#FFB4B4"/>
<circle cx="693.48" cy="133.857" r="4" transform="rotate(30 693.48 133.857)" fill="#FFB4B4"/>
<circle cx="693.48" cy="133.857" r="4" transform="rotate(30 693.48 133.857)" fill="#FFB4B4"/>
<circle cx="705.839" cy="144.454" r="4" transform="rotate(30 705.839 144.454)" fill="#FFB4B4"/>
<circle cx="705.839" cy="144.454" r="4" transform="rotate(30 705.839 144.454)" fill="#FFB4B4"/>
<circle cx="718.195" cy="155.052" r="4" transform="rotate(30 718.195 155.052)" fill="#FFB4B4"/>
<circle cx="718.195" cy="155.052" r="4" transform="rotate(30 718.195 155.052)" fill="#FFB4B4"/>
<circle cx="730.55" cy="165.652" r="4" transform="rotate(30 730.55 165.652)" fill="#FFB4B4"/>
<circle cx="730.55" cy="165.652" r="4" transform="rotate(30 730.55 165.652)" fill="#FFB4B4"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="1280" height="720" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

189
css/main.css
View File

@ -3,7 +3,7 @@
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Roboto", serif;
font-family: "Roboto Slab", serif;
}
body {
@ -14,11 +14,11 @@ body {
--foreground-color: 255, 255, 255;
--background-color: #efefef;
--error-color: red;
--red: #e8505b;
--red: #E84545;
color: rgba(var(--text-color), 1);
height: calc(100%);
font-size: clamp(1rem, 1.2vmax, 3rem);
background: rgba(var(--text-color), 0.04);
background: #F3F3F3;
}
body[data-theme=dark] {
@ -27,29 +27,20 @@ body[data-theme=dark] {
--text-color-light: 170, 170, 170;
--foreground-color: 20, 20, 20;
--error-color: rgb(255, 106, 106);
background: rgba(var(--foreground-color), 1);
}
body[data-theme=dark] .outlet-preview {
background: rgba(var(--text-color), 0.02);
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 5px -1px, rgba(0, 0, 0, 0.4) 0px 1px 3px -1px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 5px -1px, rgba(0, 0, 0, 0.4) 0px 1px 3px -1px;
}
body[data-theme=dark] .outlet-preview sm-carousel {
border-top: dashed 0.5rem rgba(var(--foreground-color), 0.7);
background: #0a0a0a;
}
body[data-theme=dark] #outlet_switcher {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(var(--text-color), 0.06)), to(rgba(var(--text-color), 0.06))), rgba(var(--foreground-color), 1);
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-preview {
background-color: #0a0a0a;
}
.full-bleed {
grid-column: 1/4;
}
.h1, .h2, .h3, .h4, .h5 {
font-family: "Roboto Slab", serif;
}
.h1 {
font-size: 2.5rem;
}
@ -80,7 +71,7 @@ body[data-theme=dark] #outlet_switcher {
p {
max-width: 60ch;
line-height: 1.5;
line-height: 1.7;
}
img {
@ -153,7 +144,7 @@ ul {
}
.grid-3 {
grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}
.flow-column {
@ -433,6 +424,7 @@ ul {
#elevator_button {
justify-self: flex-start;
margin-left: -1rem;
}
#main_logo {
@ -450,25 +442,26 @@ ul {
width: 1.5rem;
height: 1.5rem;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.theme-switcher .icon {
position: absolute;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
-webkit-transition: -webkit-transform 0.6s;
transition: -webkit-transform 0.6s;
transition: transform 0.6s;
transition: transform 0.6s, -webkit-transform 0.6s;
}
.theme-switcher__checkbox {
display: none;
}
.theme-switcher__checkbox:checked ~ .moon-icon {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform: scale(0) rotate(90deg);
transform: scale(0) rotate(90deg);
}
.theme-switcher__checkbox:not(:checked) ~ .sun-icon {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform: scale(0) rotate(-90deg);
transform: scale(0) rotate(-90deg);
}
.page {
@ -485,19 +478,15 @@ ul {
padding: 0.4rem 0.6rem;
}
.common-padding {
padding: 0 1rem;
}
#home_page {
overflow-y: auto;
max-height: calc(100vh - 5rem);
padding: 0;
grid-template-columns: 2rem 1fr;
background: url(../assets/bg/homepage-bg.svg) no-repeat center;
background-size: cover;
}
#floor_line_map {
position: relative;
position: -webkit-sticky;
position: sticky;
top: 1rem;
@ -592,26 +581,27 @@ ul {
}
#floor_1__outlets {
margin: 1rem 0;
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
margin: 3rem 0;
gap: 1.5rem;
}
.outlet-preview {
padding-top: 2rem;
background: rgba(var(--foreground-color), 1);
border-radius: 0.5rem;
-webkit-transition: -webkit-box-shadow 0.3s;
transition: -webkit-box-shadow 0.3s;
transition: box-shadow 0.3s;
transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
background-color: #F3F3F3;
position: relative;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: grid;
}
.outlet-preview sm-carousel {
border-top: dashed 0.5rem rgba(var(--foreground-color), 1);
.outlet-preview__info {
padding: 1rem;
}
.outlet__title {
font-weight: 700;
font-size: 1.8rem;
margin-bottom: 0.8rem;
text-transform: capitalize;
}
@ -619,19 +609,34 @@ ul {
color: rgba(var(--text-color), 0.8);
}
.outlet-preview__border {
position: absolute;
height: 100%;
width: 100%;
-webkit-box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.3) inset;
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.3) inset;
border-radius: 0.5rem;
}
.outlet-preview__button {
justify-self: flex-start;
}
.label {
position: relative;
font-size: 0.8rem;
color: var(--accent-color);
margin-bottom: 0.3rem;
}
.value {
font-size: 1.5rem;
}
sm-carousel {
position: relative;
height: 100%;
background: rgba(var(--text-color), 0.06);
padding-bottom: 4rem;
padding-top: 1.5rem;
padding: 1.5rem 1.5rem 4rem 1.5rem;
background: rgba(var(--foreground-color), 1);
--arrow-left: 1.5rem;
--arrow-right: 1.5rem;
--arrow-fill: rgba(var(--text-color), 1);
@ -918,23 +923,52 @@ table {
}
#main_header {
padding: 1.5rem 2rem;
}
.common-padding {
padding: 0 2rem;
padding: 1.2rem 2rem;
}
#home_page {
grid-template-columns: 8rem 1fr;
grid-template-columns: 1fr 80vw 1fr;
}
#floor_line_map {
margin-left: 0.8rem;
}
#floor_1__outlets {
gap: 4rem;
}
.outlet-preview {
padding-top: 3rem;
gap: 1rem;
grid-template-columns: repeat(2, 1fr);
}
.carousel-holder {
-ms-flex-item-align: start;
align-self: flex-start;
-webkit-transform: translateY(-2rem);
transform: translateY(-2rem);
z-index: 1;
}
.carousel-holder sm-carousel {
border-radius: 0.5rem;
}
.carousel-holder--left {
grid-row: 1/2;
grid-column: 1/2;
-webkit-box-shadow: -2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
box-shadow: -2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
}
.carousel-holder--left ~ .outlet-preview__border {
justify-self: flex-end;
}
.carousel-holder--right {
-webkit-box-shadow: 2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
box-shadow: 2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
}
.outlet-preview__border {
width: 66%;
}
#elevator_sections {
@ -942,6 +976,14 @@ table {
grid-template-columns: auto 1fr;
}
.outlet-preview__info {
padding: 2rem 3rem;
}
.outlet-preview__carousel {
padding: 2rem 3rem 5rem 3rem;
}
#outlet_switcher {
padding: 1rem 1.5rem;
}
@ -970,6 +1012,31 @@ table {
#elevator_popup {
--width: min(100%, 54rem) ;
}
.grid-3 {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.grid-3 > .grid {
width: 100%;
}
.grid-3 > .grid:not(:last-of-type) {
position: relative;
}
.grid-3 > .grid:not(:last-of-type)::after {
content: "";
position: absolute;
height: 4rem;
width: 1px;
right: 0.5rem;
background-color: var(--red);
}
}
@media only screen and (min-width: 1920px) {
.page, #home_page {
grid-template-columns: 1fr 60vw 1fr;
}
}
@media (any-hover: hover) {
::-webkit-scrollbar {
@ -985,18 +1052,6 @@ table {
background: rgba(var(--text-color), 0.5);
}
body[data-theme=dark] .outlet-preview:hover {
z-index: 1;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 48px 100px 0px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 48px 100px 0px;
}
.outlet-preview:hover {
z-index: 1;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 48px 100px 0px;
box-shadow: rgba(0, 0, 0, 0.15) 0px 48px 100px 0px;
}
.page-link {
cursor: pointer;
-webkit-transition: color 0.3s;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

158
css/main.scss
View File

@ -3,7 +3,7 @@
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Roboto', serif;
font-family: 'Roboto Slab', serif;
}
body {
@ -14,11 +14,11 @@ body {
--foreground-color: 255, 255, 255;
--background-color: #efefef;
--error-color: red;
--red: #e8505b;
--red: #E84545;
color: rgba(var(--text-color), 1);
height: calc(100%);
font-size: clamp(1rem, 1.2vmax, 3rem);
background: rgba(var(--text-color), 0.04);
background: #F3F3F3;
}
body[data-theme='dark']{
--accent-color:#2fb3ff;
@ -26,17 +26,13 @@ body[data-theme='dark']{
--text-color-light: 170, 170, 170;
--foreground-color: 20, 20, 20;
--error-color: rgb(255, 106, 106);
background: rgba(var(--foreground-color), 1);
.outlet-preview{
background: rgba(var(--text-color), 0.02);
box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 5px -1px, rgba(0, 0, 0, 0.4) 0px 1px 3px -1px;
sm-carousel{
border-top: dashed 0.5rem rgba(var(--foreground-color), 0.7);
}
}
background: #0a0a0a;
#outlet_switcher{
background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
}
.outlet-preview{
background-color: #0a0a0a;
}
}
.full-bleed{
@ -44,7 +40,7 @@ body[data-theme='dark']{
}
.h1, .h2, .h3, .h4, .h5{
font-family: 'Roboto Slab', serif;
// font-family: 'Lorr', serif;
}
.h1{
font-size: 2.5rem;
@ -71,7 +67,7 @@ body[data-theme='dark']{
p {
max-width: 60ch;
line-height: 1.5;
line-height: 1.7;
}
img{
@ -126,7 +122,7 @@ ul{
display: grid;
}
.grid-3{
grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}
.flow-column{
grid-auto-flow: column;
@ -340,6 +336,7 @@ ul{
}
#elevator_button{
justify-self: flex-start;
margin-left: -1rem;
}
#main_logo{
justify-self: center;
@ -354,18 +351,19 @@ ul{
width: 1.5rem;
height: 1.5rem;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
.icon{
position: absolute;
transition: transform 0.3s;
transition: transform 0.6s;
}
}
.theme-switcher__checkbox{
display: none;
&:checked ~ .moon-icon{
transform: scale(0);
transform: scale(0) rotate(90deg);
}
&:not(:checked) ~ .sun-icon{
transform: scale(0);
transform: scale(0) rotate(-90deg);
}
}
@ -383,19 +381,15 @@ ul{
padding: 0.4rem 0.6rem;
}
.common-padding{
padding: 0 1rem;
}
#home_page{
overflow-y: auto;
max-height: calc(100vh - 5rem);
padding: 0;
grid-template-columns: 2rem 1fr;
background: url(../assets/bg/homepage-bg.svg) no-repeat center;
background-size: cover;
}
#floor_line_map{
position: relative;
position: sticky;
top: 1rem;
height: 40vh;
@ -472,42 +466,56 @@ ul{
}
#floor_1__outlets{
margin: 1rem 0;
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
margin: 3rem 0;
gap: 1.5rem;
}
.outlet-preview{
padding-top: 2rem;
background: rgba(var(--foreground-color), 1);
border-radius: 0.5rem;
transition: box-shadow 0.3s;
sm-carousel{
border-top: dashed 0.5rem rgba(var(--foreground-color), 1);
}
background-color: #F3F3F3;
position: relative;
align-items: center;
display: grid;
}
.outlet-preview__info{
padding: 1rem;
}
.outlet__title{
font-weight: 700;
font-size: 1.8rem;
margin-bottom: 0.8rem;
text-transform: capitalize;
}
.outlet__description{
color: rgba(var(--text-color), 0.8);
}
.outlet-preview__button{}
.outlet-preview__border{
position: absolute;
height: 100%;
width: 100%;
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.3) inset;
border-radius: 0.5rem;
}
.outlet-preview__button{
justify-self: flex-start;
}
.outlet-preview__carousel{
}
.label{
position: relative;
font-size: 0.8rem;
color: var(--accent-color);
margin-bottom: 0.3rem;
}
.value{
font-size: 1.5rem;
}
sm-carousel{
position: relative;
height: 100%;
background: rgba(var(--text-color), 0.06);
padding-bottom: 4rem;
padding-top: 1.5rem;
padding: 1.5rem 1.5rem 4rem 1.5rem;
background: rgba(var(--foreground-color), 1);
--arrow-left: 1.5rem;
--arrow-right: 1.5rem;
--arrow-fill: rgba(var(--text-color), 1);
@ -748,24 +756,53 @@ table{
font-size: 1.1rem;
}
#main_header{
padding: 1.5rem 2rem;
}
.common-padding{
padding: 0 2rem;
padding: 1.2rem 2rem;
}
#home_page{
grid-template-columns: 8rem 1fr;
grid-template-columns: 1fr 80vw 1fr;
}
#floor_line_map{
margin-left: 0.8rem;
}
#floor_1__outlets{
gap: 4rem;
}
.outlet-preview{
padding-top: 3rem;
gap: 1rem;
grid-template-columns: repeat(2, 1fr);
}
.carousel-holder{
align-self: flex-start;
transform: translateY(-2rem);
z-index: 1;
sm-carousel{
border-radius: 0.5rem;
}
&--left{
grid-row: 1/2;
grid-column: 1/2;
box-shadow: -2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
& ~ .outlet-preview__border{
justify-self: flex-end;
}
}
&--right{
box-shadow: 2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
}
}
.outlet-preview__border{
width: 66%;
}
#elevator_sections{
gap: 3rem;
grid-template-columns: auto 1fr;
}
.outlet-preview__info{
padding: 2rem 3rem;
}
.outlet-preview__carousel{
padding: 2rem 3rem 5rem 3rem;
}
#outlet_switcher{
padding: 1rem 1.5rem;
}
@ -789,8 +826,29 @@ table{
#elevator_popup{
--width: min(100%, 54rem)
}
.grid-3{
justify-content: center;
& > .grid{
width: 100%;
}
& > .grid:not(:last-of-type){
position: relative;
&::after{
content: '';
position: absolute;
height: 4rem;
width: 1px;
right: 0.5rem;
background-color: var(--red);
}
}
}
}
@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;
@ -804,16 +862,6 @@ table{
background: rgba(var(--text-color), 0.5);
}
}
body[data-theme='dark']{
.outlet-preview:hover{
z-index: 1;
box-shadow: rgba(0, 0, 0, 0.3) 0px 48px 100px 0px;
}
}
.outlet-preview:hover{
z-index: 1;
box-shadow: rgba(0, 0, 0, 0.15) 0px 48px 100px 0px;
}
.page-link{
cursor: pointer;
transition: color 0.3s;

122
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;500;700;900&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;500;700&family=Roboto+Slab:wght@400..900&display=swap" rel="stylesheet">
</head>
<body data-theme="light">
<audio id="notification_sound">
@ -37,16 +37,16 @@
<!-- Component templates -->
<template id="bit_bond_row">
<div class="bit-bond-series__row grid grid-3 gap-1 common-padding">
<div class="flex direction-column">
<div class="bit-bond-series__row grid grid-3 gap-1">
<div class="grid">
<h5 class="label color-0-8 weight-500">Series</h5>
<h3 class="value original-value"></h3>
</div>
<div class="flex direction-column">
<div class="grid">
<h5 class="label color-0-8 weight-500">Current value</h5>
<h3 class="value current-value"></h3>
</div>
<div class="flex direction-column">
<div class="grid">
<h5 class="label color-0-8 weight-500">Time Elapsed</h5>
<h3 class="value time-elapsed"></h3>
</div>
@ -54,21 +54,21 @@
</template>
<template id="bob_fund_row">
<div class="bob-fund__row grid gap-1-5 common-padding">
<div class="flex direction-column">
<div class="bob-fund__row grid gap-1-5">
<div class="grid">
<h5 class="label color-0-8 weight-500">Investor</h5>
<h3 class="value investor__name"></h3>
</div>
<div class="grid grid-3 gap-1">
<div class="flex direction-column">
<div class="grid">
<h5 class="label color-0-8 weight-500">Invested</h5>
<h3 class="value original-value"></h3>
</div>
<div class="flex direction-column">
<div class="grid">
<h4 class="label color-0-8 weight-500">Current value</h4>
<h3 class="value current-value"></h3>
</div>
<div class="flex direction-column">
<div class="grid">
<h4 class="label color-0-8 weight-500">Time Elapsed</h4>
<h3 class="value time-elapsed"></h3>
</div>
@ -77,13 +77,13 @@
</template>
<template id="ico_investor_row">
<div class="investor-card grid gap-1-5 common-padding">
<div class="investor-card grid gap-1-5">
<img class="investor__image" src="" alt="" loading="lazy">
<div class="flex direction-column">
<div class="grid">
<h3 class="investor__name value capitalize"></h3>
<p class="investor__bio color-0-8"></p>
</div>
<div class="flex direction-column investor__contribution-container">
<div class="grid investor__contribution-container">
<h4 class="label color-0-8 weight-500">Contribution</h4>
<p class="investor__contribution weight-700"></p>
</div>
@ -128,13 +128,13 @@
<h5 class="h5 margin-bottom-2r">Floors</h5>
<ul id="elevator_button_panel" class="grid">
<li>
<button class="button floor__button floor__button--active" data-target="first_floor">1</button>
<button class="button floor__button" data-target="floor_1">1</button>
</li>
<li>
<button class="button floor__button" data-target="second_floor">2</button>
<button class="button floor__button" data-target="floor_2">2</button>
</li>
<li>
<button class="button floor__button" data-target="third_floor">3</button>
<button class="button floor__button" data-target="floor_3">3</button>
</li>
</ul>
</section>
@ -163,7 +163,12 @@
<!-- -->
<header id="main_header" class="grid align-center full-bleed">
<button id="elevator_button" class="button" onclick="showPopup('elevator_popup')">Elevator</button>
<button id="elevator_button" class="button" onclick="showPopup('elevator_popup')">
<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">
Elevator
</span>
</button>
<div id="main_logo" class="flex align-center page-link" 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>
<h4 class="h4 header__company-name">RanchiMall</h4>
@ -174,7 +179,7 @@
<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>
<article id="home_page" class="page hide-completely full-bleed">
<article id="home_page" class="page hide-completely">
<aside id="floor_line_map" class="grid">
<div class="flex line-map justify-center">
<div id="floor_line_map__circle" class="line-map__circle"></div>
@ -184,51 +189,60 @@
</aside>
<main id="floor_container" class="grid">
<section id="floor_1" class="floor">
<span class="flex align-center margin-bottom-1-5r">
<!-- <span class="flex 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>
<h4 class="h4 weight-500">
Outlets
</h4>
</span>
</span> -->
<main id="floor_1__outlets" class="grid">
<div id="bit_bond_outlet" class="flex direction-column card outlet-preview carousel-container">
<div class="flex direction-column common-padding margin-bottom-1-5r">
<h3 class="h3 outlet__title margin-bottom-1r">bitcoin bonds</h3>
<div id="bit_bond_outlet" class="outlet-preview carousel-container">
<div class="grid outlet-preview__info">
<h3 class="outlet__title">bitcoin bonds</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 justify-right" data-target="bitbonds">
<button class="button page-link outlet-preview__button" data-target="bitbonds">
<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 12l-6 6V6z"/></svg>
</button>
</div>
<sm-carousel id="bit_bond_series__container" indicator></sm-carousel>
<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="flex direction-column card outlet-preview carousel-container">
<div class="flex direction-column margin-bottom-1-5r common-padding">
<h3 class="h3 outlet__title margin-bottom-1r">Bob's Fund</h3>
<div id="bob_fund_outlet" class="outlet-preview carousel-container">
<div class="grid outlet-preview__info">
<h3 class="outlet__title">Bob's Fund</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 justify-right" data-target="bob'sfund">
<button class="button page-link outlet-preview__button" data-target="bob'sfund">
<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 12l-6 6V6z"/></svg>
</button>
</div>
<sm-carousel id="bob_fund_investors__container" indicator></sm-carousel>
<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="flex direction-column card outlet-preview carousel-container">
<div class="flex direction-column margin-bottom-1-5r common-padding">
<h3 class="h3 outlet__title margin-bottom-1r">ICO</h3>
<div id="ico_outlet" class="outlet-preview carousel-container">
<div class="grid outlet-preview__info">
<h3 class="outlet__title">ICO</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 justify-right" data-target="ico">
<button class="button page-link outlet-preview__button" data-target="ico">
<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 12l-6 6V6z"/></svg>
</button>
</div>
<sm-carousel id="ico_investors__container" indicator></sm-carousel>
<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>
@ -262,14 +276,14 @@
</section>
</div>
<article id="bitbonds" class="page flex direction-column hide-completely">
<article id="bitbonds" class="page grid hide-completely">
<section class="outlet-hero-section margin-bottom-3r">
<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>
Outlet
<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>
<h1 class="h1 weight-900 margin-bottom-1r">BitCoin Bonds</h1>
<h2 class="h2 weight-700 margin-bottom-1r">BitCoin Bonds</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
</section>
<h3 class="h3 margin-bottom-1r">Rooms</h3>
@ -330,14 +344,14 @@
</div>
</article>
<article id="bob'sfund" class="page flex direction-column hide-completely">
<article id="bob'sfund" class="page grid hide-completely">
<section class="outlet-hero-section margin-bottom-3r">
<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>
Outlet
<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>
<h1 class="h1 weight-900 margin-bottom-1r">Bob's Fund</h1>
<h2 class="h2 weight-700 margin-bottom-1r">Bob's Fund</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
</section>
<h3 class="h3 margin-bottom-1r">Rooms</h3>
@ -368,14 +382,14 @@
</div>
</article>
<article id="ico" class="page flex direction-column hide-completely">
<article id="ico" class="page grid hide-completely">
<section class="outlet-hero-section grid margin-bottom-3r">
<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>
Outlet
<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>
<h1 class="h1 weight-900 margin-bottom-1r">ICO</h1>
<h2 class="h2 weight-700 margin-bottom-1r">ICO</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
</section>
<h3 class="h3 margin-bottom-1r">Rooms</h3>
@ -1192,18 +1206,18 @@
const outletObserver = new IntersectionObserver( entries => {
entries.forEach(entry => {
if(window.innerWidth < 640){
// if(window.innerWidth < 640){
if(entry.isIntersecting){
entry.target.querySelector('sm-carousel').startAutoPlay()
}
else{
entry.target.querySelector('sm-carousel').stopAutoPlay()
}
}
// }
})
},
{
threshold: 0.9
threshold: 1
})
document.querySelectorAll('.carousel-container').forEach(outlet => outletObserver.observe(outlet))
@ -1225,9 +1239,16 @@
hideOutletSwitcher()
}
else{
if(e.target.closest('.floor-label')){
const label = e.target.closest('.floor-label')
if(e.target.closest('.floor-label, .floor__button')){
const label = e.target.closest('.floor-label, .floor__button')
const target = label.dataset.target
if(currentPage !== 'home_page'){
history.pushState({type: 'page', id: 'home_page'}, null, `#${'home_page'}`)
showPage('home_page')
}
if(getRef('elevator_popup').open){
hidePopup()
}
getRef('home_page').scrollTo({
top: getRef(target).getBoundingClientRect().top - getRef('home_page').getBoundingClientRect().top + getRef('home_page').scrollTop,
behavior: 'smooth'
@ -1280,7 +1301,7 @@
let activeOutletIndex = 0
const allOutletCarousels = document.querySelectorAll('.outlet-preview sm-carousel')
function changeOutletFocus(){
/* function changeOutletFocus(){
allOutletCarousels[activeOutletIndex].nextSlide()
activeOutletIndex = activeOutletIndex + 1 < allOutletCarousels.length ? activeOutletIndex + 1 : 0
@ -1292,7 +1313,7 @@
}
setTimeout(() => {
changeOutletFocus()
}, 5000);
}, 5000); */
let currentPage = ''
@ -1362,6 +1383,7 @@
getRef('home_page').addEventListener('scroll', e => {
throttle(updatePos, 1000 / 30)
}, {passive: true})
function updatePos(){
window.requestAnimationFrame(() => {
getRef('floor_line_map__circle').setAttribute('style', `transform: translateY(${(getScrollPercent()) * (floorLineMapPercent)}px)`)
@ -1382,10 +1404,10 @@
const floorObserver = new IntersectionObserver( entries => {
entries.forEach(entry => {
if(entry.isIntersecting){
document.querySelector(`[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{
document.querySelector(`[data-target="${entry.target.id}"]`).classList.remove('floor-label--active')
document.querySelector(`.floor-label[data-target="${entry.target.id}"]`).classList.remove('floor-label--active')
}
})
},