v0.15.26
Added new floors and outlets
This commit is contained in:
sairaj mote
parent
7ad961b011
commit
d514ad2f09
183
css/main.css
183
css/main.css
@ -7,14 +7,14 @@
|
||||
}
|
||||
|
||||
body {
|
||||
--accent-color: #1042e9;
|
||||
--primary-color: #115FF0;
|
||||
--light-shade: rgba(var(--text-color), 0.06);
|
||||
--text-color: 17, 17, 17;
|
||||
--text-color-light: 100, 100, 100;
|
||||
--foreground-color: 255, 255, 255;
|
||||
--background-color: #F6f6f6;
|
||||
--error-color: red;
|
||||
--red: #E84545;
|
||||
--accent-color: #F55B5D;
|
||||
color: rgba(var(--text-color), 1);
|
||||
height: calc(100%);
|
||||
font-size: clamp(1rem, 1.2vmax, 3rem);
|
||||
@ -22,7 +22,7 @@ body {
|
||||
}
|
||||
|
||||
body[data-theme=dark] {
|
||||
--accent-color:#2babf5;
|
||||
--primary-color:#79A5F6;
|
||||
--text-color: 240, 240, 240;
|
||||
--text-color-light: 170, 170, 170;
|
||||
--foreground-color: 20, 20, 20;
|
||||
@ -97,7 +97,7 @@ button {
|
||||
}
|
||||
|
||||
.button--primary {
|
||||
background: var(--accent-color);
|
||||
background: var(--primary-color);
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.button--primary .icon {
|
||||
@ -379,7 +379,6 @@ ul {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
overflow-y: auto;
|
||||
grid-template-rows: auto 1fr;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
@ -398,31 +397,60 @@ ul {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#elevator_sections {
|
||||
#floor_list {
|
||||
align-content: flex-start;
|
||||
padding: 0 1.5rem 4rem 1.5rem;
|
||||
gap: 2rem;
|
||||
overflow-y: auto;
|
||||
transform-origin: top;
|
||||
counter-reset: floor-counter;
|
||||
}
|
||||
|
||||
#elevator_button_panel {
|
||||
gap: 2rem;
|
||||
overflow: auto;
|
||||
scroll-snap-type: x proximity;
|
||||
grid-template-columns: repeat(3, min(40ch, 80%));
|
||||
}
|
||||
#elevator_button_panel li {
|
||||
.floor_list__item {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
align-content: flex-start;
|
||||
scroll-snap-align: start;
|
||||
gap: 1.5rem;
|
||||
counter-increment: floor-counter;
|
||||
}
|
||||
#elevator_button_panel sup {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
.floor_list__item .floor-num::after {
|
||||
content: " " counter(floor-counter);
|
||||
}
|
||||
.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 {
|
||||
display: grid;
|
||||
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 {
|
||||
@ -432,11 +460,11 @@ ul {
|
||||
|
||||
.floor__button {
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
padding: 0.5rem 1rem;
|
||||
max-width: 20ch;
|
||||
justify-content: center;
|
||||
border-radius: 0.5rem;
|
||||
text-align: left;
|
||||
border-radius: 0.2rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 900;
|
||||
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;
|
||||
}
|
||||
|
||||
.floor-name {
|
||||
margin-top: 0.2rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.elevator__floor-line {
|
||||
flex: 1;
|
||||
height: 0.1rem;
|
||||
margin-left: 2rem;
|
||||
background-color: var(--red);
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
#main_header {
|
||||
@ -502,11 +535,12 @@ ul {
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: var(--accent-color);
|
||||
background: var(--primary-color);
|
||||
padding: 0.4rem 0.6rem;
|
||||
}
|
||||
|
||||
#home_page {
|
||||
will-change: scroll-position;
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 5rem);
|
||||
grid-template-columns: 2rem 1fr;
|
||||
@ -515,7 +549,7 @@ ul {
|
||||
#floor_line_map {
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
height: 40vh;
|
||||
height: 60vh;
|
||||
z-index: 5;
|
||||
grid-template-columns: 2rem 1fr;
|
||||
grid-column: 1/2;
|
||||
@ -532,7 +566,7 @@ ul {
|
||||
height: 1rem;
|
||||
margin-top: -0.5rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
border: solid 0.2rem var(--red);
|
||||
border: solid 0.2rem var(--accent-color);
|
||||
transition: transform 0.1s linear;
|
||||
z-index: 5;
|
||||
}
|
||||
@ -541,7 +575,7 @@ ul {
|
||||
width: 0.1rem;
|
||||
height: 100%;
|
||||
border-radius: 1rem;
|
||||
background: var(--red);
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
||||
.floor-label {
|
||||
@ -549,13 +583,23 @@ ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
left: 0.75rem;
|
||||
margin-top: -0.9rem;
|
||||
margin-top: -1.4rem;
|
||||
padding-bottom: 1rem;
|
||||
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 {
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.floor-circle {
|
||||
@ -585,29 +629,13 @@ ul {
|
||||
padding-bottom: 3rem;
|
||||
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 {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
#floor_1__outlets {
|
||||
.outlets-container {
|
||||
margin: 3rem 0;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
@ -632,7 +660,7 @@ ul {
|
||||
justify-self: flex-start;
|
||||
background: rgba(var(--text-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 {
|
||||
@ -642,7 +670,7 @@ ul {
|
||||
}
|
||||
|
||||
.outlet__title {
|
||||
font-weight: 700;
|
||||
font-weight: 900;
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 0.8rem;
|
||||
text-transform: capitalize;
|
||||
@ -662,9 +690,10 @@ ul {
|
||||
}
|
||||
|
||||
.outlet-preview__button {
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
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{
|
||||
@ -708,6 +737,7 @@ sm-carousel {
|
||||
--arrow-box-shadow: none;
|
||||
--arrow-bottom: -3.5rem;
|
||||
--indicator-bottom: -2.5rem;
|
||||
--active-indicator-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.bit-bond-series__row,
|
||||
@ -763,7 +793,7 @@ sm-carousel {
|
||||
padding: 0.4rem 0;
|
||||
}
|
||||
.outlet_switcher__button--active {
|
||||
color: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.outlet_switcher__button:not(:last-of-type)::after {
|
||||
content: "";
|
||||
@ -771,19 +801,19 @@ sm-carousel {
|
||||
width: 4vw;
|
||||
height: 0.1rem;
|
||||
margin: 0 0.5rem;
|
||||
background: var(--red);
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
||||
.outlet-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-self: flex-start;
|
||||
color: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.outlet-label .icon {
|
||||
fill: var(--accent-color);
|
||||
fill: var(--primary-color);
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
@ -830,10 +860,10 @@ scroll-tab-panels > [active] {
|
||||
}
|
||||
.room-button[active] {
|
||||
opacity: 1;
|
||||
color: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.room-button[active] .icon {
|
||||
fill: var(--accent-color);
|
||||
fill: var(--primary-color);
|
||||
}
|
||||
.room-button[active]::after {
|
||||
content: "";
|
||||
@ -843,7 +873,7 @@ scroll-tab-panels > [active] {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-radius: 0.2rem 0.2rem 0 0;
|
||||
background: var(--accent-color);
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
table {
|
||||
@ -913,23 +943,6 @@ table {
|
||||
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 {
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
@ -963,7 +976,7 @@ table {
|
||||
padding: 1.2rem 2rem;
|
||||
}
|
||||
|
||||
#elevator_sections {
|
||||
#floor_list {
|
||||
padding: 0 3rem 4rem 4.6rem;
|
||||
}
|
||||
|
||||
@ -971,11 +984,7 @@ table {
|
||||
grid-template-columns: 1fr 80vw 1fr;
|
||||
}
|
||||
|
||||
#floor_line_map {
|
||||
margin-left: 0.8rem;
|
||||
}
|
||||
|
||||
#floor_1__outlets {
|
||||
.outlets-container {
|
||||
gap: 5rem;
|
||||
}
|
||||
|
||||
@ -1045,7 +1054,7 @@ table {
|
||||
height: 4rem;
|
||||
width: 1px;
|
||||
right: 0.5rem;
|
||||
background-color: var(--red);
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
} */
|
||||
}
|
||||
@ -1077,18 +1086,10 @@ table {
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.page-link:hover {
|
||||
color: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.page-link:hover .icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
|
||||
.outlet-section .icon {
|
||||
transform: translateX(-0.5rem);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.outlet-section:hover .icon {
|
||||
transform: none;
|
||||
fill: var(--primary-color);
|
||||
}
|
||||
|
||||
.floor__button:hover {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
179
css/main.scss
179
css/main.scss
@ -7,21 +7,21 @@
|
||||
}
|
||||
|
||||
body {
|
||||
--accent-color: #1042e9;
|
||||
--primary-color: #115FF0;
|
||||
--light-shade: rgba(var(--text-color), 0.06);
|
||||
--text-color: 17, 17, 17;
|
||||
--text-color-light: 100, 100, 100;
|
||||
--foreground-color: 255, 255, 255;
|
||||
--background-color: #F6f6f6;
|
||||
--error-color: red;
|
||||
--red: #E84545;
|
||||
--accent-color: #F55B5D;
|
||||
color: rgba(var(--text-color), 1);
|
||||
height: calc(100%);
|
||||
font-size: clamp(1rem, 1.2vmax, 3rem);
|
||||
background: var(--background-color);
|
||||
}
|
||||
body[data-theme='dark']{
|
||||
--accent-color:#2babf5;
|
||||
--primary-color:#79A5F6;
|
||||
--text-color: 240, 240, 240;
|
||||
--text-color-light: 170, 170, 170;
|
||||
--foreground-color: 20, 20, 20;
|
||||
@ -89,7 +89,7 @@ button{
|
||||
padding: 0.5rem 0.6rem;
|
||||
}
|
||||
.button--primary{
|
||||
background: var(--accent-color);
|
||||
background: var(--primary-color);
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
.icon{
|
||||
fill: rgba(var(--foreground-color), 1);
|
||||
@ -316,7 +316,6 @@ ul{
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
overflow-y: auto;
|
||||
grid-template-rows: auto 1fr;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
@ -334,29 +333,55 @@ ul{
|
||||
z-index: 1;
|
||||
|
||||
}
|
||||
#elevator_sections{
|
||||
#floor_list{
|
||||
align-content: flex-start;
|
||||
padding: 0 1.5rem 4rem 1.5rem;
|
||||
}
|
||||
#elevator_button_panel{
|
||||
gap: 2rem;
|
||||
overflow: auto;
|
||||
scroll-snap-type: x proximity;
|
||||
grid-template-columns: repeat(3, min(40ch, 80%));
|
||||
li{
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
align-content: flex-start;
|
||||
scroll-snap-align: start;
|
||||
overflow-y: auto;
|
||||
transform-origin: top;
|
||||
counter-reset: floor-counter;
|
||||
}
|
||||
.floor_list__item{
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
counter-increment: floor-counter;
|
||||
.floor-num::after{
|
||||
content: " " counter(floor-counter);
|
||||
}
|
||||
sup{
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
&: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{
|
||||
display: grid;
|
||||
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{
|
||||
@ -367,11 +392,11 @@ ul{
|
||||
|
||||
.floor__button{
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
padding: 0.5rem 1rem;
|
||||
max-width: 20ch;
|
||||
justify-content: center;
|
||||
border-radius: 0.5rem;
|
||||
text-align: left;
|
||||
border-radius: 0.2rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 900;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.floor-name{
|
||||
margin-top: 0.2rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.elevator__floor-line{
|
||||
flex: 1;
|
||||
height: 0.1rem;
|
||||
margin-left: 2rem;
|
||||
background-color: var(--red);
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
|
||||
@ -433,11 +463,12 @@ ul{
|
||||
}
|
||||
|
||||
.tag{
|
||||
background: var(--accent-color);
|
||||
background: var(--primary-color);
|
||||
padding: 0.4rem 0.6rem;
|
||||
}
|
||||
|
||||
#home_page{
|
||||
will-change: scroll-position;
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 5rem);
|
||||
grid-template-columns: 2rem 1fr;
|
||||
@ -446,7 +477,7 @@ ul{
|
||||
#floor_line_map{
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
height: 40vh;
|
||||
height: 60vh;
|
||||
z-index: 5;
|
||||
grid-template-columns: 2rem 1fr;
|
||||
grid-column: 1/2;
|
||||
@ -461,7 +492,7 @@ ul{
|
||||
height: 1rem;
|
||||
margin-top: -0.5rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
border: solid 0.2rem var(--red);
|
||||
border: solid 0.2rem var(--accent-color);
|
||||
transition: transform 0.1s linear;
|
||||
z-index: 5;
|
||||
}
|
||||
@ -469,7 +500,7 @@ ul{
|
||||
width: 0.1rem;
|
||||
height: 100%;
|
||||
border-radius: 1rem;
|
||||
background: var(--red);
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
||||
.floor-label{
|
||||
@ -477,13 +508,21 @@ ul{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
left: 0.75rem;
|
||||
margin-top: -0.9rem;
|
||||
margin-top: -1.4rem;
|
||||
padding-bottom: 1rem;
|
||||
user-select: none;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -512,24 +551,6 @@ ul{
|
||||
.floor{
|
||||
padding-bottom: 3rem;
|
||||
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{
|
||||
@ -537,7 +558,7 @@ ul{
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
#floor_1__outlets{
|
||||
.outlets-container{
|
||||
margin: 3rem 0;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
@ -561,7 +582,7 @@ ul{
|
||||
justify-self: flex-start;
|
||||
background: rgba(var(--text-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{
|
||||
position: relative;
|
||||
@ -569,7 +590,7 @@ ul{
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.outlet__title{
|
||||
font-weight: 700;
|
||||
font-weight: 900;
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 0.8rem;
|
||||
text-transform: capitalize;
|
||||
@ -586,9 +607,10 @@ ul{
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.outlet-preview__button{
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
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{
|
||||
@ -629,6 +651,7 @@ sm-carousel{
|
||||
--arrow-box-shadow: none;
|
||||
--arrow-bottom: -3.5rem;
|
||||
--indicator-bottom: -2.5rem;
|
||||
--active-indicator-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.bit-bond-series__row,
|
||||
@ -678,7 +701,7 @@ sm-carousel{
|
||||
font-size: 1rem;
|
||||
padding: 0.4rem 0;
|
||||
&--active{
|
||||
color: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
&:not(:last-of-type)::after{
|
||||
content: '';
|
||||
@ -686,18 +709,18 @@ sm-carousel{
|
||||
width: 4vw;
|
||||
height: 0.1rem;
|
||||
margin: 0 0.5rem;
|
||||
background: var(--red);
|
||||
background: var(--accent-color);
|
||||
}
|
||||
}
|
||||
.outlet-label{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-self: flex-start;
|
||||
color: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1rem;
|
||||
.icon{
|
||||
fill: var(--accent-color);
|
||||
fill: var(--primary-color);
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
@ -740,9 +763,9 @@ scroll-tab-panels{
|
||||
padding: 0.6rem 0.8rem;
|
||||
&[active]{
|
||||
opacity: 1;
|
||||
color: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
.icon{
|
||||
fill: var(--accent-color);
|
||||
fill: var(--primary-color);
|
||||
}
|
||||
&::after{
|
||||
content: '';
|
||||
@ -752,7 +775,7 @@ scroll-tab-panels{
|
||||
bottom: 0;
|
||||
left: 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{
|
||||
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{
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
@ -865,16 +872,13 @@ table{
|
||||
#main_header{
|
||||
padding: 1.2rem 2rem;
|
||||
}
|
||||
#elevator_sections{
|
||||
#floor_list{
|
||||
padding: 0 3rem 4rem 4.6rem;
|
||||
}
|
||||
#home_page{
|
||||
grid-template-columns: 1fr 80vw 1fr;
|
||||
}
|
||||
#floor_line_map{
|
||||
margin-left: 0.8rem;
|
||||
}
|
||||
#floor_1__outlets{
|
||||
.outlets-container{
|
||||
gap: 5rem;
|
||||
}
|
||||
.outlet-preview{
|
||||
@ -937,7 +941,7 @@ table{
|
||||
height: 4rem;
|
||||
width: 1px;
|
||||
right: 0.5rem;
|
||||
background-color: var(--red);
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
} */
|
||||
}
|
||||
@ -964,21 +968,12 @@ table{
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
&:hover{
|
||||
color: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
.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{
|
||||
background: rgba(var(--text-color), 0.2);
|
||||
}
|
||||
|
||||
413
index.html
413
index.html
@ -107,7 +107,10 @@
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
@ -126,50 +129,112 @@
|
||||
<h4 class="h4 header__company-name">RanchiMall</h4>
|
||||
</div> -->
|
||||
</header>
|
||||
<div id="elevator_sections" class="grid">
|
||||
<h4 class="h4 margin-bottom-2r">Floors</h4>
|
||||
<ul id="elevator_button_panel" class="grid">
|
||||
<li>
|
||||
<div class="flex align-center">
|
||||
<button class="button floor__button" data-target="floor_1">
|
||||
<span>
|
||||
1<sup>st</sup>
|
||||
</span>
|
||||
</button>
|
||||
<div class="elevator__floor-line"></div>
|
||||
</div>
|
||||
<div class="outlet-section page-link interact" data-target="bitbonds">
|
||||
<h3 class="h3 margin-bottom-0-5r">1. BitCoin Bonds</h3>
|
||||
<p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
|
||||
</div>
|
||||
<div class="outlet-section page-link interact" data-target="bob'sfund">
|
||||
<h3 class="h3 margin-bottom-0-5r">2. Bob's Fund</h3>
|
||||
<p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
|
||||
</div>
|
||||
<div class="outlet-section page-link interact" data-target="ico">
|
||||
<h3 class="h3 margin-bottom-0-5r">3. ICO</h3>
|
||||
<p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="flex align-center">
|
||||
<button class="button floor__button" data-target="floor_2">
|
||||
<span>
|
||||
2<sup>nd</sup>
|
||||
</span>
|
||||
</button>
|
||||
<div class="elevator__floor-line"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<button class="button floor__button" data-target="floor_3">
|
||||
<span>
|
||||
3<sup>rd</sup>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul id="floor_list" class="grid">
|
||||
<li class="floor_list__item">
|
||||
<div class="item__title">
|
||||
<h5 class="h5 floor-num">Floor</h5>
|
||||
<h4 class="h3">Current Products</h4>
|
||||
</div>
|
||||
<ul class="outlet-list grid">
|
||||
<li class="outlet-section page-link interact" tabindex="0" data-target="bitbonds">
|
||||
<h4 class="outlet-title">BitCoin Bonds</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="bob'sfund">
|
||||
<h4 class="outlet-title">Bob's Fund</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="ico">
|
||||
<h4 class="outlet-title">ICO</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 Contracts</h4>
|
||||
</div>
|
||||
<ul class="outlet-list grid">
|
||||
<li class="outlet-section page-link interact" tabindex="0" data-target="">
|
||||
<h4 class="outlet-title">Incorporation 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">Internship 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">FLO 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">Startup 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">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>
|
||||
|
||||
<!-- -->
|
||||
@ -201,13 +266,13 @@
|
||||
</aside>
|
||||
<main id="floor_container" class="grid">
|
||||
<section id="floor_1" class="floor">
|
||||
<!-- <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
|
||||
<span class="grid align-center margin-bottom-1-5r">
|
||||
<h5 class="h5">Floor</h5>
|
||||
<h4 class="h4 weight-700">
|
||||
Current Projects
|
||||
</h4>
|
||||
</span> -->
|
||||
<main id="floor_1__outlets" class="grid">
|
||||
</span>
|
||||
<main id="floor_1__outlets" class="grid outlets-container">
|
||||
<div id="bit_bond_outlet" class="outlet-preview carousel-container">
|
||||
<div class="grid outlet-preview__info">
|
||||
<div class="outlet-number">1</div>
|
||||
@ -217,7 +282,6 @@
|
||||
</p>
|
||||
<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.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid carousel-holder carousel-holder--right">
|
||||
@ -234,7 +298,6 @@
|
||||
</p>
|
||||
<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.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid carousel-holder carousel-holder--left">
|
||||
@ -251,7 +314,6 @@
|
||||
</p>
|
||||
<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.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid carousel-holder carousel-holder--right">
|
||||
@ -262,10 +324,226 @@
|
||||
</main>
|
||||
</section>
|
||||
<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 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>
|
||||
</main>
|
||||
</article>
|
||||
@ -429,7 +707,6 @@
|
||||
<!-- -->
|
||||
<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/ScrollTrigger.min.js"></script>
|
||||
<script id="standard_UI_functions">
|
||||
|
||||
const domRefs = {}
|
||||
@ -855,7 +1132,6 @@
|
||||
</script>
|
||||
|
||||
<script>
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
const render = {
|
||||
bitBondRow(obj){
|
||||
const {series, currentValue, timeElapsed} = obj
|
||||
@ -904,11 +1180,14 @@
|
||||
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}`
|
||||
floorLabel.querySelector('.floor-num').textContent = `Floor ${floorNumber}`
|
||||
floorLabel.querySelector('.floor-name').textContent = floors[floorNumber - 1]
|
||||
return floorLabel
|
||||
}
|
||||
}
|
||||
|
||||
const floors = ['Current Products', 'Blockchain Contracts', 'Blockchain Applications', 'Experimental Ideas', 'Statistics and Administration']
|
||||
|
||||
|
||||
/*
|
||||
Animations
|
||||
@ -1435,24 +1714,30 @@
|
||||
easing: 'ease'
|
||||
}
|
||||
|
||||
const siteMapTimeline = gsap.timeline({defaults: {ease: 'power2'}, onReverseComplete: resumeScrolling, paused: true})
|
||||
siteMapTimeline.from('#elevator_popup', {opacity: 0})
|
||||
const siteMapTimeline = gsap.timeline({defaults: {ease: 'power3'}, onReverseComplete: resumeScrolling, paused: true})
|
||||
siteMapTimeline.from('#elevator_popup', {duration: 0.3, opacity: 0})
|
||||
.from('.close-button', {scale: 0}, '-= 0.2')
|
||||
.from('#elevator_sections', {opacity: 0, y: 10})
|
||||
.from('.outlet-section', {opacity: 0, x: 10, stagger: 0.1}, '-=0.1')
|
||||
.from('.floor_list__item', {opacity: 0, y: 16, stagger: 0.1})
|
||||
.from('.outlet-section', {opacity: 0, y: 16, stagger: 0.1}, '-=0.7')
|
||||
|
||||
function showSiteMap(){
|
||||
document.querySelectorAll('.page').forEach(page => {
|
||||
page.setAttribute('aria-hidden', 'true')
|
||||
})
|
||||
isSiteMapOpen = true
|
||||
document.body.style.overflow = 'hidden';
|
||||
document.body.style.top= `-${window.scrollY}px`
|
||||
getRef('elevator_popup').classList.remove('hide-completely')
|
||||
siteMapTimeline.duration(1).play()
|
||||
siteMapTimeline.duration(2).play()
|
||||
}
|
||||
|
||||
function hideSiteMap(){
|
||||
const scrollY = document.body.style.top;
|
||||
window.scrollTo(0, parseInt(scrollY || '0') * -1);
|
||||
siteMapTimeline.duration(0.4).reverse()
|
||||
document.querySelectorAll('.page').forEach(page => {
|
||||
page.removeAttribute('aria-hidden')
|
||||
})
|
||||
}
|
||||
|
||||
function resumeScrolling(){
|
||||
|
||||
Loading…
Reference in New Issue
Block a user