v0.9.3
Added floor indicator
This commit is contained in:
sairaj mote
parent
253388bf6e
commit
a184c4e386
@ -2498,6 +2498,7 @@ customElements.define('sm-carousel', class extends HTMLElement {
|
||||
}
|
||||
|
||||
startAutoPlay = () => {
|
||||
if(!this.carouselItems) return
|
||||
if((this.activeSlideNum + 1) < this.carouselItems.length)
|
||||
this.showSlide(this.activeSlideNum + 1)
|
||||
else
|
||||
|
||||
163
css/main.css
163
css/main.css
@ -6,10 +6,6 @@
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
--accent-color: #1042e9;
|
||||
--light-shade: rgba(var(--text-color), 0.06);
|
||||
@ -22,6 +18,11 @@ body {
|
||||
height: calc(100%);
|
||||
font-size: clamp(1rem, 1.2vmax, 3rem);
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
display: grid;
|
||||
grid-template-columns: 1rem 1fr 1rem;
|
||||
}
|
||||
body > * {
|
||||
grid-column: 2/3;
|
||||
}
|
||||
|
||||
body[data-theme=dark] {
|
||||
@ -47,6 +48,10 @@ body[data-theme=dark] .outlet-preview sm-carousel {
|
||||
.font-slab{
|
||||
font-family: 'Roboto slab', sans-serif;
|
||||
} */
|
||||
.full-bleed {
|
||||
grid-column: 1/4;
|
||||
}
|
||||
|
||||
.h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
@ -130,6 +135,11 @@ sm-button {
|
||||
--border-radius: 0.2rem;
|
||||
}
|
||||
|
||||
sm-tab-header {
|
||||
-ms-flex-item-align: start;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
@ -144,6 +154,10 @@ ul {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
|
||||
}
|
||||
|
||||
.flow-column {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
@ -450,8 +464,101 @@ ul {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
#home_page {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 5rem);
|
||||
padding: 0;
|
||||
grid-template-columns: 3rem 1fr;
|
||||
}
|
||||
|
||||
#floor_line_map {
|
||||
position: relative;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 2rem;
|
||||
height: 40vh;
|
||||
z-index: 5;
|
||||
grid-template-columns: 2rem 1fr;
|
||||
}
|
||||
|
||||
.line-map {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.line-map__circle {
|
||||
position: absolute;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: -0.5rem;
|
||||
border-radius: 1rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
border: solid 0.2rem rgba(var(--text-color), 1);
|
||||
-webkit-transition: -webkit-transform 0.1s linear;
|
||||
transition: -webkit-transform 0.1s linear;
|
||||
transition: transform 0.1s linear;
|
||||
transition: transform 0.1s linear, -webkit-transform 0.1s linear;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.line-map__bar {
|
||||
width: 0.1rem;
|
||||
height: 100%;
|
||||
background: rgba(var(--text-color), 0.4);
|
||||
}
|
||||
|
||||
.floor-label {
|
||||
position: absolute;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
left: 0.7rem;
|
||||
margin-top: -0.9rem;
|
||||
padding-bottom: 1rem;
|
||||
-webkit-transition: opacity 0.3s;
|
||||
transition: opacity 0.3s;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.floor-label--active {
|
||||
opacity: 1;
|
||||
}
|
||||
.floor-label--active .floor-title {
|
||||
-webkit-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.floor-circle {
|
||||
height: 0.6rem;
|
||||
width: 0.6rem;
|
||||
background: rgba(var(--text-color), 1);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.floor-title {
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
padding: 0.4rem 0.6rem;
|
||||
margin-left: 0.5rem;
|
||||
border-radius: 0.2rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
-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;
|
||||
}
|
||||
|
||||
#floor_container {
|
||||
width: calc(100% - 1rem);
|
||||
}
|
||||
|
||||
.floor {
|
||||
margin-bottom: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#floor_1__outlets {
|
||||
@ -550,6 +657,28 @@ sm-carousel {
|
||||
grid-area: para;
|
||||
}
|
||||
|
||||
.outlet-hero-section {
|
||||
margin-top: 6rem;
|
||||
}
|
||||
|
||||
.outlet-label {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
color: var(--accent-color);
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.outlet-label::after {
|
||||
content: "";
|
||||
height: 0.1rem;
|
||||
width: 2rem;
|
||||
background: var(--accent-color);
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
|
||||
sm-tab-header {
|
||||
padding: 0.3rem;
|
||||
border-radius: 0.3rem;
|
||||
@ -626,6 +755,10 @@ table {
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px) {
|
||||
body {
|
||||
grid-template-columns: 1fr 90vw 1fr;
|
||||
}
|
||||
|
||||
.h1 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
@ -646,38 +779,26 @@ table {
|
||||
padding: 1.5rem 2rem;
|
||||
}
|
||||
|
||||
.page {
|
||||
padding: 0 3rem;
|
||||
}
|
||||
|
||||
.common-padding {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.floor__aside {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%) rotate(-90deg);
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
#home_page {
|
||||
grid-template-columns: 8rem 1fr;
|
||||
}
|
||||
|
||||
.outlet-preview {
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
table {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
#elevator_sections {
|
||||
gap: 3rem;
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1280px) {
|
||||
.page {
|
||||
padding: 0 10vw;
|
||||
body {
|
||||
grid-template-columns: 1fr 80vw 1fr;
|
||||
}
|
||||
|
||||
#elevator_popup {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
132
css/main.scss
132
css/main.scss
@ -5,9 +5,6 @@
|
||||
box-sizing: border-box;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
--accent-color: #1042e9;
|
||||
@ -21,6 +18,11 @@ body {
|
||||
height: calc(100%);
|
||||
font-size: clamp(1rem, 1.2vmax, 3rem);
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
display: grid;
|
||||
grid-template-columns: 1rem 1fr 1rem;
|
||||
& > * {
|
||||
grid-column: 2/3;
|
||||
}
|
||||
}
|
||||
body[data-theme='dark']{
|
||||
--accent-color:#2fb3ff;
|
||||
@ -44,6 +46,10 @@ body[data-theme='dark']{
|
||||
font-family: 'Roboto slab', sans-serif;
|
||||
} */
|
||||
|
||||
.full-bleed{
|
||||
grid-column: 1/4;
|
||||
}
|
||||
|
||||
.h1{
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
@ -111,6 +117,9 @@ sm-textarea{
|
||||
sm-button{
|
||||
--border-radius: 0.2rem;
|
||||
}
|
||||
sm-tab-header{
|
||||
align-self: flex-start;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
}
|
||||
@ -120,6 +129,9 @@ ul{
|
||||
.grid{
|
||||
display: grid;
|
||||
}
|
||||
.grid-3{
|
||||
grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
|
||||
}
|
||||
.flow-column{
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
@ -358,8 +370,81 @@ ul{
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
#home_page{
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 5rem);
|
||||
padding: 0;
|
||||
grid-template-columns: 3rem 1fr;
|
||||
}
|
||||
|
||||
#floor_line_map{
|
||||
position: relative;
|
||||
position: sticky;
|
||||
top: 2rem;
|
||||
height: 40vh;
|
||||
z-index: 5;
|
||||
grid-template-columns: 2rem 1fr;
|
||||
}
|
||||
.line-map{
|
||||
height: 100%;
|
||||
}
|
||||
.line-map__circle{
|
||||
position: absolute;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: -0.5rem;
|
||||
border-radius: 1rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
border: solid 0.2rem rgba(var(--text-color), 1);
|
||||
transition: transform 0.1s linear;
|
||||
z-index: 1;
|
||||
}
|
||||
.line-map__bar{
|
||||
width: 0.1rem;
|
||||
height: 100%;
|
||||
background: rgba(var(--text-color), 0.4);
|
||||
}
|
||||
|
||||
.floor-label{
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
left: 0.7rem;
|
||||
margin-top: -0.9rem;
|
||||
padding-bottom: 1rem;
|
||||
transition: opacity 0.3s;
|
||||
opacity: 0.5;
|
||||
&--active{
|
||||
opacity: 1;
|
||||
.floor-title{
|
||||
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
.floor-circle{
|
||||
height: 0.6rem;
|
||||
width: 0.6rem;
|
||||
background: rgba(var(--text-color), 1);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.floor-title{
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
padding: 0.4rem 0.6rem;
|
||||
margin-left: 0.5rem;
|
||||
border-radius: 0.2rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
transition: box-shadow 0.3s;
|
||||
}
|
||||
|
||||
#floor_container{
|
||||
width: calc(100% - 1rem);
|
||||
}
|
||||
|
||||
.floor{
|
||||
margin-bottom: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#floor_1__outlets{
|
||||
@ -451,6 +536,23 @@ sm-carousel{
|
||||
}
|
||||
|
||||
|
||||
.outlet-hero-section{
|
||||
margin-top: 6rem;
|
||||
}
|
||||
.outlet-label{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--accent-color);
|
||||
margin-bottom: 0.3rem;
|
||||
&::after{
|
||||
content: '';
|
||||
height: 0.1rem;
|
||||
width: 2rem;
|
||||
background: var(--accent-color);
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
sm-tab-header{
|
||||
padding: 0.3rem;
|
||||
@ -524,6 +626,9 @@ table{
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px) {
|
||||
body{
|
||||
grid-template-columns: 1fr 90vw 1fr;
|
||||
}
|
||||
.h1{
|
||||
font-size: 4rem;
|
||||
}
|
||||
@ -539,32 +644,23 @@ table{
|
||||
#main_header{
|
||||
padding: 1.5rem 2rem;
|
||||
}
|
||||
.page{
|
||||
padding: 0 3rem;
|
||||
}
|
||||
.common-padding{
|
||||
padding: 0 2rem;
|
||||
}
|
||||
.floor__aside{
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
}
|
||||
#home_page{
|
||||
grid-template-columns: 8rem 1fr;
|
||||
}
|
||||
.outlet-preview{
|
||||
padding-top: 3rem;
|
||||
}
|
||||
table{
|
||||
justify-self: center;
|
||||
}
|
||||
#elevator_sections{
|
||||
gap: 3rem;
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1280px) {
|
||||
.page{
|
||||
padding: 0 10vw;
|
||||
body{
|
||||
grid-template-columns: 1fr 80vw 1fr;
|
||||
}
|
||||
#elevator_popup{
|
||||
--width: min(100%, 54rem)
|
||||
|
||||
281
index.html
281
index.html
@ -37,7 +37,7 @@
|
||||
<!-- Component templates -->
|
||||
|
||||
<template id="bit_bond_row">
|
||||
<div class="bit-bond-series__row grid flow-column gap-1-5 common-padding">
|
||||
<div class="bit-bond-series__row grid grid-3 gap-1 common-padding">
|
||||
<div class="flex direction-column">
|
||||
<h5 class="label color-0-8 weight-500">Series</h5>
|
||||
<h3 class="value original-value"></h3>
|
||||
@ -59,7 +59,7 @@
|
||||
<h5 class="label color-0-8 weight-500">Investor</h5>
|
||||
<h3 class="value investor__name"></h3>
|
||||
</div>
|
||||
<div class="grid flow-column">
|
||||
<div class="grid grid-3 gap-1">
|
||||
<div class="flex direction-column">
|
||||
<h5 class="label color-0-8 weight-500">Invested</h5>
|
||||
<h3 class="value original-value"></h3>
|
||||
@ -104,6 +104,13 @@
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<template id="floor_indicator_template">
|
||||
<div class="floor-label interact">
|
||||
<span class="floor-circle"></span>
|
||||
<span class="floor-title weight-500 color-0-8 h5"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- -->
|
||||
|
||||
|
||||
@ -155,7 +162,7 @@
|
||||
|
||||
<!-- -->
|
||||
|
||||
<header id="main_header" class="grid align-center margin-bottom-1r">
|
||||
<header id="main_header" class="grid align-center full-bleed">
|
||||
<button id="elevator_button" class="button" onclick="showPopup('elevator_popup')">Elevator</button>
|
||||
<div id="main_logo" class="flex align-center">
|
||||
<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>
|
||||
@ -163,61 +170,79 @@
|
||||
</div>
|
||||
<sm-switch id="theme_switcher"></sm-switch>
|
||||
</header>
|
||||
<article id="home_page" class="page hide-completely">
|
||||
<section id="floor_1" class="floor">
|
||||
<aside class="floor__aside margin-bottom-2r">
|
||||
<h4 class="font-slab h4 weight-900">Floor 1</h4>
|
||||
</aside>
|
||||
<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 text-center">
|
||||
<h3 class="font-slab h3 outlet__title margin-bottom-1r">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">
|
||||
<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>
|
||||
<article id="home_page" class="page grid hide-completely full-bleed">
|
||||
<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>
|
||||
<div class="line-map__bar"></div>
|
||||
</div>
|
||||
<div id="floor_label_container"></div>
|
||||
</aside>
|
||||
<main id="floor_container" class="grid">
|
||||
<section id="floor_1" class="floor">
|
||||
<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="font-slab h3 outlet__title margin-bottom-1r">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">
|
||||
<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 autoplay></sm-carousel>
|
||||
</div>
|
||||
<sm-carousel id="bit_bond_series__container" indicator autoplay></sm-carousel>
|
||||
</div>
|
||||
<div id="bob_fund_outlet" class="flex direction-column card outlet-preview carousel-container">
|
||||
<div class="flex direction-column margin-bottom-1-5r text-center common-padding">
|
||||
<h3 class="font-slab h3 outlet__title margin-bottom-1r">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">
|
||||
<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 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="font-slab h3 outlet__title margin-bottom-1r">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">
|
||||
<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>
|
||||
<sm-carousel id="bob_fund_investors__container" indicator></sm-carousel>
|
||||
</div>
|
||||
<div id="ico_outlet" class="flex direction-column card outlet-preview carousel-container">
|
||||
<div class="flex direction-column margin-bottom-1-5r text-center common-padding">
|
||||
<h3 class="font-slab h3 outlet__title margin-bottom-1r">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">
|
||||
<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 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="font-slab h3 outlet__title margin-bottom-1r">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">
|
||||
<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>
|
||||
<sm-carousel id="ico_investors__container" indicator></sm-carousel>
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
</main>
|
||||
</section>
|
||||
<section id="floor_2" class="floor">
|
||||
<h1 class="h1">Lorem ipsumnimi rerum e laudantium voluptatem quisquam cum alias.</h1>
|
||||
<h1 class="h1">Lorem ipsumnimi rerum e laudantium voluptatem quisquam cum alias.</h1>
|
||||
<h1 class="h1">Lorem ipsumnimi rerum e laudantium voluptatem quisquam cum alias.</h1>
|
||||
</section>
|
||||
<section id="floor_3" class="floor">
|
||||
<h1 class="h1">Lorem ipsumusto animi rum. Odit laudantium voluptatem quisquam cum alias.</h1>
|
||||
<h1 class="h1">Lorem ipsumusto animi rum. Odit laudantium voluptatem quisquam cum alias.</h1>
|
||||
<h1 class="h1">Lorem ipsumusto animi rum. Odit laudantium voluptatem quisquam cum alias.</h1>
|
||||
<h1 class="h1">Lorem ipsumusto animi rum. Odit laudantium voluptatem quisquam cum alias.</h1>
|
||||
</section>
|
||||
</main>
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<!-- Seperate pages -->
|
||||
|
||||
<article id="bitbonds" class="page flex direction-column align-center hide-completely">
|
||||
<section class="text-center margin-bottom-3r">
|
||||
<article id="bitbonds" class="page flex direction-column hide-completely">
|
||||
<section class="outlet-hero-section margin-bottom-3r">
|
||||
<h5 class="outlet-label">Outlet</h5>
|
||||
<h2 class="h2 weight-900 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>
|
||||
@ -266,8 +291,9 @@
|
||||
</sm-tab-panels>
|
||||
</article>
|
||||
|
||||
<article id="bob'sfund" class="page flex direction-column align-center hide-completely">
|
||||
<section class="text-center margin-bottom-3r">
|
||||
<article id="bob'sfund" class="page flex direction-column hide-completely">
|
||||
<section class="outlet-hero-section margin-bottom-3r">
|
||||
<h5 class="outlet-label">Outlet</h5>
|
||||
<h2 class="h2 weight-900 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>
|
||||
@ -287,11 +313,12 @@
|
||||
</article>
|
||||
|
||||
<article id="ico" class="page flex direction-column hide-completely">
|
||||
<section class="grid justify-center text-center margin-bottom-3r">
|
||||
<section class="outlet-hero-section grid margin-bottom-3r">
|
||||
<h5 class="outlet-label">Outlet</h5>
|
||||
<h2 class="h2 weight-900 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>
|
||||
<sm-tab-header target="ico_rooms" variant="tab" class="align-self-center margin-bottom-1-5r">
|
||||
<sm-tab-header target="ico_rooms" variant="tab" class="margin-bottom-1-5r">
|
||||
<sm-tab>
|
||||
Investors
|
||||
</sm-tab>
|
||||
@ -303,7 +330,7 @@
|
||||
</sm-tab>
|
||||
</sm-tab-header>
|
||||
<sm-tab-panels id="ico_rooms" class="flex w-100">
|
||||
<sm-panel class="flex justify-center carousel-container">
|
||||
<sm-panel class="flex carousel-container">
|
||||
<sm-carousel id="ico_page__carousel" indicator autoplay></sm-carousel>
|
||||
</sm-panel>
|
||||
<sm-panel>
|
||||
@ -719,7 +746,24 @@
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) func.apply(context, args);
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
let timerId
|
||||
function throttle(func, delay) {
|
||||
// If setTimeout is already scheduled, no need to do anything
|
||||
if (timerId) {
|
||||
return
|
||||
}
|
||||
|
||||
// Schedule a setTimeout after delay seconds
|
||||
timerId = setTimeout(function () {
|
||||
func()
|
||||
|
||||
// Once setTimeout function execution is finished, timerId = undefined so that in <br>
|
||||
// the next scroll event function execution can be scheduled by the setTimeout
|
||||
timerId = undefined;
|
||||
}, delay)
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
@ -767,6 +811,13 @@
|
||||
template.querySelector('.phase__date').textContent = date
|
||||
template.querySelector('.phase__description').textContent = info
|
||||
return template
|
||||
},
|
||||
floorLabel(floorNumber, offsetTop){
|
||||
const floorLabel = getRef('floor_indicator_template').content.cloneNode(true).firstElementChild
|
||||
floorLabel.setAttribute('style', `top: ${offsetTop}px`)
|
||||
floorLabel.dataset.target = `floor_${floorNumber}`
|
||||
floorLabel.querySelector('.floor-title').textContent = `Floor ${floorNumber}`
|
||||
return floorLabel
|
||||
}
|
||||
}
|
||||
|
||||
@ -785,48 +836,6 @@
|
||||
{opacity: 0},
|
||||
]
|
||||
|
||||
//Fly animation
|
||||
const flyInZoom = [
|
||||
{
|
||||
transform: 'scale(0.9)',
|
||||
opacity: 0
|
||||
},
|
||||
{
|
||||
transform: 'scale(1)',
|
||||
opacity: 1
|
||||
}
|
||||
]
|
||||
const flyInShrink = [
|
||||
{
|
||||
transform: 'scale(1.1)',
|
||||
opacity: 0
|
||||
},
|
||||
{
|
||||
transform: 'scale(1)',
|
||||
opacity: 1
|
||||
},
|
||||
]
|
||||
const flyOutZoom = [
|
||||
{
|
||||
transform: 'scale(1)',
|
||||
opacity: 1
|
||||
},
|
||||
{
|
||||
transform: 'scale(1.1)',
|
||||
opacity: 0
|
||||
}
|
||||
]
|
||||
const flyOutShrink = [
|
||||
{
|
||||
transform: 'scale(1)',
|
||||
opacity: 1
|
||||
},
|
||||
{
|
||||
transform: 'scale(0.9)',
|
||||
opacity: 0
|
||||
},
|
||||
]
|
||||
|
||||
// Slide animations
|
||||
const slideInLeft = [
|
||||
{
|
||||
@ -1146,8 +1155,10 @@
|
||||
hidePopup()
|
||||
}
|
||||
}
|
||||
else if(e.target.closest('.floor__button')){
|
||||
|
||||
else if(e.target.closest('.floor-label')){
|
||||
const label = e.target.closest('.floor-label')
|
||||
const target = label.dataset.target
|
||||
getRef(target).scrollIntoView({behavior: 'smooth'})
|
||||
}
|
||||
})
|
||||
|
||||
@ -1175,21 +1186,21 @@
|
||||
fill: 'forwards'
|
||||
}
|
||||
if(currentPage){
|
||||
/* let pageEnterAnimation = flyInZoom
|
||||
let pageExitAnimation = flyOutZoom
|
||||
let pageEnterAnimation = slideInLeft
|
||||
let pageExitAnimation = slideOutLeft
|
||||
if(pageId === 'home_page'){
|
||||
pageEnterAnimation = flyInShrink
|
||||
pageExitAnimation = flyOutShrink
|
||||
} */
|
||||
let pageEnterAnimation = slideInUp
|
||||
let pageExitAnimation = slideOutDown
|
||||
pageEnterAnimation = slideInRight
|
||||
pageExitAnimation = slideOutRight
|
||||
}
|
||||
/* let pageEnterAnimation = slideInUp
|
||||
let pageExitAnimation = slideOutDown */
|
||||
document.body.setAttribute('style', 'pointer-events: none; overflow-x: hidden')
|
||||
getRef(currentPage).animate(pageExitAnimation, {...options, easing: easeInOvershoot})
|
||||
getRef(currentPage).animate(pageExitAnimation, {...options, easing: 'ease'})
|
||||
.onfinish = () => {
|
||||
document.body.setAttribute('style', 'pointer-events: all; overflow-x: auto')
|
||||
getRef(currentPage).classList.add('hide-completely')
|
||||
getRef(pageId).classList.remove('hide-completely')
|
||||
getRef(pageId).animate(pageEnterAnimation, {...options, easing: easeOutOvershoot})
|
||||
getRef(pageId).animate(pageEnterAnimation, {...options, easing: 'ease'})
|
||||
currentPage = pageId
|
||||
}
|
||||
}
|
||||
@ -1208,7 +1219,59 @@
|
||||
showPage(location.hash.split('#')[1])
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
let homepagePercent = floorLineMapPercent = 0
|
||||
const RO = new ResizeObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
homepagePercent = getRef('floor_container').scrollHeight / 100
|
||||
floorLineMapPercent = getRef('floor_line_map').getBoundingClientRect().height / 100
|
||||
renderAllFloorLabels()
|
||||
updatePos()
|
||||
});
|
||||
})
|
||||
RO.observe(document.body)
|
||||
function getScrollPercent() {
|
||||
const root = getRef('home_page')
|
||||
return (root.scrollTop) / ((root.scrollHeight) - root.clientHeight) * 100;
|
||||
}
|
||||
|
||||
getRef('home_page').addEventListener('scroll', e => {
|
||||
throttle(updatePos, 1000 / 30)
|
||||
// window.requestAnimationFrame(updatePos)
|
||||
}, {passive: true})
|
||||
function updatePos(){
|
||||
window.requestAnimationFrame(() => {
|
||||
getRef('floor_line_map__circle').setAttribute('style', `transform: translateY(${(getScrollPercent()) * (floorLineMapPercent)}px)`)
|
||||
})
|
||||
}
|
||||
|
||||
function renderAllFloorLabels(){
|
||||
const frag = document.createDocumentFragment()
|
||||
document.querySelectorAll('.floor').forEach((floor, index) => {
|
||||
getRef('floor_label_container').innerHTML = ''
|
||||
const top = ((floor.getBoundingClientRect().top - getRef('floor_container').getBoundingClientRect().top + getRef('floor_container').offsetTop) / homepagePercent) * floorLineMapPercent
|
||||
const label = render.floorLabel(index + 1, top)
|
||||
frag.append(label)
|
||||
})
|
||||
getRef('floor_label_container').append(frag)
|
||||
}
|
||||
|
||||
const floorObserver = new IntersectionObserver( entries => {
|
||||
entries.forEach(entry => {
|
||||
if(entry.isIntersecting){
|
||||
document.querySelector(`[data-target="${entry.target.id}"]`).classList.add('floor-label--active')
|
||||
}
|
||||
else{
|
||||
document.querySelector(`[data-target="${entry.target.id}"]`).classList.remove('floor-label--active')
|
||||
}
|
||||
})
|
||||
},
|
||||
{
|
||||
threshold: 0.2
|
||||
})
|
||||
document.querySelectorAll('.floor').forEach(floor => floorObserver.observe(floor))
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user