diff --git a/assets/RM logo.png b/assets/RM logo.png new file mode 100644 index 0000000..9d8819c Binary files /dev/null and b/assets/RM logo.png differ diff --git a/assets/bg/bg1.svg b/assets/bg/bg1.svg new file mode 100644 index 0000000..fae73e3 --- /dev/null +++ b/assets/bg/bg1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/bg/bg2.svg b/assets/bg/bg2.svg new file mode 100644 index 0000000..eb6add3 --- /dev/null +++ b/assets/bg/bg2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/bg/floor-1-bg.svg b/assets/bg/floor-1-bg.svg new file mode 100644 index 0000000..3adb097 --- /dev/null +++ b/assets/bg/floor-1-bg.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/assets/investors-thumbnail/Abhijeet Das Gupta.jpg b/assets/investors-thumbnail/Abhijeet Das Gupta.jpg new file mode 100644 index 0000000..ba33683 Binary files /dev/null and b/assets/investors-thumbnail/Abhijeet Das Gupta.jpg differ diff --git a/assets/investors-thumbnail/Amit Jagetia.jpg b/assets/investors-thumbnail/Amit Jagetia.jpg new file mode 100644 index 0000000..fae9fc4 Binary files /dev/null and b/assets/investors-thumbnail/Amit Jagetia.jpg differ diff --git a/assets/investors-thumbnail/Amitesh Anand.jpg b/assets/investors-thumbnail/Amitesh Anand.jpg new file mode 100644 index 0000000..dc54e45 Binary files /dev/null and b/assets/investors-thumbnail/Amitesh Anand.jpg differ diff --git a/assets/investors-thumbnail/Atul Agarwal.jpg b/assets/investors-thumbnail/Atul Agarwal.jpg new file mode 100644 index 0000000..c5f2f2e Binary files /dev/null and b/assets/investors-thumbnail/Atul Agarwal.jpg differ diff --git a/assets/investors-thumbnail/Barun Kumar.jpg b/assets/investors-thumbnail/Barun Kumar.jpg new file mode 100644 index 0000000..b12b049 Binary files /dev/null and b/assets/investors-thumbnail/Barun Kumar.jpg differ diff --git a/assets/investors-thumbnail/Janardan Tiwary.jpg b/assets/investors-thumbnail/Janardan Tiwary.jpg new file mode 100644 index 0000000..49f2a4a Binary files /dev/null and b/assets/investors-thumbnail/Janardan Tiwary.jpg differ diff --git a/assets/investors-thumbnail/Kanwal Koul.jpg b/assets/investors-thumbnail/Kanwal Koul.jpg new file mode 100644 index 0000000..d8f5852 Binary files /dev/null and b/assets/investors-thumbnail/Kanwal Koul.jpg differ diff --git a/assets/investors-thumbnail/Mansoor Ahmed.jpg b/assets/investors-thumbnail/Mansoor Ahmed.jpg new file mode 100644 index 0000000..a41aa08 Binary files /dev/null and b/assets/investors-thumbnail/Mansoor Ahmed.jpg differ diff --git a/assets/investors-thumbnail/Meghna Patel.jpg b/assets/investors-thumbnail/Meghna Patel.jpg new file mode 100644 index 0000000..3e0f7dd Binary files /dev/null and b/assets/investors-thumbnail/Meghna Patel.jpg differ diff --git a/assets/investors-thumbnail/Nikhil Kulkarni.jpg b/assets/investors-thumbnail/Nikhil Kulkarni.jpg new file mode 100644 index 0000000..9ddafcc Binary files /dev/null and b/assets/investors-thumbnail/Nikhil Kulkarni.jpg differ diff --git a/assets/investors-thumbnail/Pankaj Miglani.jpg b/assets/investors-thumbnail/Pankaj Miglani.jpg new file mode 100644 index 0000000..3d66b04 Binary files /dev/null and b/assets/investors-thumbnail/Pankaj Miglani.jpg differ diff --git a/assets/investors-thumbnail/Rajeev Kumar Gupta.jpg b/assets/investors-thumbnail/Rajeev Kumar Gupta.jpg new file mode 100644 index 0000000..2bc063b Binary files /dev/null and b/assets/investors-thumbnail/Rajeev Kumar Gupta.jpg differ diff --git a/assets/investors-thumbnail/Sudhir Taneja.jpg b/assets/investors-thumbnail/Sudhir Taneja.jpg new file mode 100644 index 0000000..18a39b8 Binary files /dev/null and b/assets/investors-thumbnail/Sudhir Taneja.jpg differ diff --git a/assets/investors-thumbnail/Varucchi Dubey.jpg b/assets/investors-thumbnail/Varucchi Dubey.jpg new file mode 100644 index 0000000..0d36af8 Binary files /dev/null and b/assets/investors-thumbnail/Varucchi Dubey.jpg differ diff --git a/assets/investors-thumbnail/Venkat Narayanan.jpg b/assets/investors-thumbnail/Venkat Narayanan.jpg new file mode 100644 index 0000000..ea39c46 Binary files /dev/null and b/assets/investors-thumbnail/Venkat Narayanan.jpg differ diff --git a/assets/investors/Abhijeet Das Gupta.jpg b/assets/investors/Abhijeet Das Gupta.jpg new file mode 100644 index 0000000..e3148e5 Binary files /dev/null and b/assets/investors/Abhijeet Das Gupta.jpg differ diff --git a/assets/investors/Amit Jagetia.jpg b/assets/investors/Amit Jagetia.jpg new file mode 100644 index 0000000..b24c89e Binary files /dev/null and b/assets/investors/Amit Jagetia.jpg differ diff --git a/assets/investors/Amitesh Anand.jpg b/assets/investors/Amitesh Anand.jpg new file mode 100644 index 0000000..b14753a Binary files /dev/null and b/assets/investors/Amitesh Anand.jpg differ diff --git a/assets/investors/Atul Agarwal.jpg b/assets/investors/Atul Agarwal.jpg new file mode 100644 index 0000000..9a7aedf Binary files /dev/null and b/assets/investors/Atul Agarwal.jpg differ diff --git a/assets/investors/Barun Kumar.jpg b/assets/investors/Barun Kumar.jpg new file mode 100644 index 0000000..e5afd41 Binary files /dev/null and b/assets/investors/Barun Kumar.jpg differ diff --git a/assets/investors/Janardan Tiwary.jpeg b/assets/investors/Janardan Tiwary.jpeg new file mode 100644 index 0000000..2d9a095 Binary files /dev/null and b/assets/investors/Janardan Tiwary.jpeg differ diff --git a/assets/investors/Kanwal Koul.jpeg b/assets/investors/Kanwal Koul.jpeg new file mode 100644 index 0000000..ba24643 Binary files /dev/null and b/assets/investors/Kanwal Koul.jpeg differ diff --git a/assets/investors/Mansoor Ahmed.jpg b/assets/investors/Mansoor Ahmed.jpg new file mode 100644 index 0000000..81035a4 Binary files /dev/null and b/assets/investors/Mansoor Ahmed.jpg differ diff --git a/assets/investors/Meghna Patel.jpeg b/assets/investors/Meghna Patel.jpeg new file mode 100644 index 0000000..b42d8b9 Binary files /dev/null and b/assets/investors/Meghna Patel.jpeg differ diff --git a/assets/investors/Nikhil Kulkarni.jpg b/assets/investors/Nikhil Kulkarni.jpg new file mode 100644 index 0000000..0a4ee88 Binary files /dev/null and b/assets/investors/Nikhil Kulkarni.jpg differ diff --git a/assets/investors/Pankaj Miglani.jpg b/assets/investors/Pankaj Miglani.jpg new file mode 100644 index 0000000..0f972ff Binary files /dev/null and b/assets/investors/Pankaj Miglani.jpg differ diff --git a/assets/investors/Rajeev Kumar Gupta.jpg b/assets/investors/Rajeev Kumar Gupta.jpg new file mode 100644 index 0000000..5970515 Binary files /dev/null and b/assets/investors/Rajeev Kumar Gupta.jpg differ diff --git a/assets/investors/Sudhir Taneja.jpg b/assets/investors/Sudhir Taneja.jpg new file mode 100644 index 0000000..5c23825 Binary files /dev/null and b/assets/investors/Sudhir Taneja.jpg differ diff --git a/assets/investors/Varucchi Dubey.jpg b/assets/investors/Varucchi Dubey.jpg new file mode 100644 index 0000000..329d4a9 Binary files /dev/null and b/assets/investors/Varucchi Dubey.jpg differ diff --git a/assets/investors/Venkat Narayanan.jpg b/assets/investors/Venkat Narayanan.jpg new file mode 100644 index 0000000..85df6a4 Binary files /dev/null and b/assets/investors/Venkat Narayanan.jpg differ diff --git a/components.js b/components.js index e2f99c7..67f9f22 100644 --- a/components.js +++ b/components.js @@ -2080,6 +2080,11 @@ customElements.define('sm-popup', class extends HTMLElement { }).append(smPopup.content.cloneNode(true)) this.allowClosing = false + this.isOpen = false + } + + get open() { + return this.isOpen } resumeScrolling = () => { @@ -2113,6 +2118,7 @@ customElements.define('sm-popup', class extends HTMLElement { ) this.setAttribute('open', '') this.pinned = pinned + this.isOpen = true } this.popupContainer.classList.remove('hide') this.popup.style.transform = 'none'; @@ -2158,6 +2164,7 @@ customElements.define('sm-popup', class extends HTMLElement { } }) ) + this.isOpen = false }, 300); } @@ -2278,6 +2285,7 @@ smCarousel.innerHTML = ` --arrow-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040; --indicator-top: auto; --indicator-bottom: -1rem; + --active-indicator-color: var(--accent-color); } .carousel__button{ position: absolute; @@ -2300,6 +2308,9 @@ smCarousel.innerHTML = ` border-radius: 3rem; padding: 0.5rem; } +.carousel__button:active{ + background: rgba(var(--text-color), 0.1); +} button:focus{ outline: none; } @@ -2373,7 +2384,7 @@ button:focus-visible{ -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); - background: var(--accent-color); + background: var(--active-indicator-color); } slot::slotted(*){ scroll-snap-align: center; @@ -2394,6 +2405,9 @@ slot::slotted(*){ .left,.right{ display: none; } + .carousel__button:hover{ + background: rgba(var(--text-color), 0.06); + } } @media (hover: none){ ::-webkit-scrollbar-track { @@ -2435,15 +2449,27 @@ customElements.define('sm-carousel', class extends HTMLElement { this.attachShadow({ mode: 'open' }).append(smCarousel.content.cloneNode(true)) + + this.isAutoPlaying = false + this.autoPlayInterval = 3000 + this.activeSlideNum = 0 + this.carouselItems + this.indicators + this.showIndicator = false + this.carousel = this.shadowRoot.querySelector('.carousel') + this.carouselContainer = this.shadowRoot.querySelector('.carousel-container') + this.carouselSlot = this.shadowRoot.querySelector('slot') + this.nextArrow = this.shadowRoot.querySelector('.carousel__button--right') + this.previousArrow = this.shadowRoot.querySelector('.carousel__button--left') + this.indicatorsContainer = this.shadowRoot.querySelector('.indicators') } static get observedAttributes() { - return ['indicator'] + return ['indicator', 'autoplay', 'interval'] } scrollLeft = () => { this.carousel.scrollBy({ - top: 0, left: -this.scrollDistance, behavior: 'smooth' }) @@ -2451,7 +2477,6 @@ customElements.define('sm-carousel', class extends HTMLElement { scrollRight = () => { this.carousel.scrollBy({ - top: 0, left: this.scrollDistance, behavior: 'smooth' }) @@ -2459,29 +2484,37 @@ customElements.define('sm-carousel', class extends HTMLElement { handleIndicatorClick = (e) => { if (e.target.closest('.dot')) { - const slideNum = e.target.closest('.dot').getAttribute('rank') + const slideNum = parseInt(e.target.closest('.dot').getAttribute('rank')) if (this.activeSlideNum !== slideNum) { this.showSlide(slideNum) - this.activeSlideNum = slideNum } } } showSlide = (slideNum) => { - this.carouselItems[slideNum].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' }) + this.carousel.scrollTo({ + left: (this.carouselItems[slideNum].getBoundingClientRect().left - this.carousel.getBoundingClientRect().left + this.carousel.scrollLeft), + behavior: 'smooth' + }) + } + + startAutoPlay = () => { + if((this.activeSlideNum + 1) < this.carouselItems.length) + this.showSlide(this.activeSlideNum + 1) + else + this.showSlide(0) + if (this.isAutoPlaying) { + setTimeout(() => { + this.startAutoPlay() + }, this.autoPlayInterval); + } + } + + stopAutoPlay = () => { + this.isAutoPlaying = false } connectedCallback() { - this.activeSlideNum - this.carousel = this.shadowRoot.querySelector('.carousel') - this.carouselContainer = this.shadowRoot.querySelector('.carousel-container') - this.carouselSlot = this.shadowRoot.querySelector('slot') - this.nextArrow = this.shadowRoot.querySelector('.carousel__button--right') - this.previousArrow = this.shadowRoot.querySelector('.carousel__button--left') - this.indicatorsContainer = this.shadowRoot.querySelector('.indicators') - this.carouselItems - this.indicators - this.showIndicator = false this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3 let frag = document.createDocumentFragment(); if (this.hasAttribute('indicator')) @@ -2492,12 +2525,15 @@ customElements.define('sm-carousel', class extends HTMLElement { lastVisible = false const allElementsObserver = new IntersectionObserver(entries => { entries.forEach(entry => { - if (this.showIndicator) + if (this.showIndicator) { + const activeRank = parseInt(entry.target.attributes.rank.textContent) if (entry.isIntersecting) { - this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.add('active') + this.indicators[activeRank].classList.add('active') + this.activeSlideNum = activeRank } - else - this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.remove('active') + else + this.indicators[activeRank].classList.remove('active') + } if (!entry.target.previousElementSibling) if (entry.isIntersecting) { this.previousArrow.classList.remove('expand') @@ -2514,7 +2550,6 @@ customElements.define('sm-carousel', class extends HTMLElement { } else { this.nextArrow.classList.add('expand') - lastVisible = false } if (firstVisible && lastVisible) @@ -2550,6 +2585,9 @@ customElements.define('sm-carousel', class extends HTMLElement { this.indicatorsContainer.append(frag) this.indicators = this.indicatorsContainer.children } + if (this.hasAttribute('autoplay')) { + this.startAutoPlay() + } }) this.addEventListener('keyup', e => { @@ -2564,12 +2602,33 @@ customElements.define('sm-carousel', class extends HTMLElement { this.indicatorsContainer.addEventListener('click', this.handleIndicatorClick) } - attributeChangedCallback(name, oldValue, newValue) { - if (name === 'indicator') { - if (this.hasAttribute('indicator')) - this.showIndicator = true - else - this.showIndicator = false + async attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (name === 'indicator') { + if (this.hasAttribute('indicator')) + this.showIndicator = true + else + this.showIndicator = false + } + if (name === 'autoplay') { + if (this.hasAttribute('autoplay')) { + this.isAutoPlaying = true + if(this.carouselSlot.assignedElements().length > 1) + this.startAutoPlay() + } + else { + this.stopAutoPlay() + } + + } + if (name === 'interval') { + if (this.hasAttribute('interval') && this.getAttribute('interval').trim() !== '') { + this.autoPlayInterval = Math.abs(parseInt(this.getAttribute('interval').trim())) + } + else { + this.autoPlayInterval = 3000 + } + } } } diff --git a/css/main.css b/css/main.css index a8ed718..3dc9d93 100644 --- a/css/main.css +++ b/css/main.css @@ -11,7 +11,7 @@ html { } body { - --accent-color: #4d00a5; + --accent-color: #1042e9; --light-shade: rgba(var(--text-color), 0.06); --text-color: 17, 17, 17; --text-color-light: 100, 100, 100; @@ -25,22 +25,28 @@ body { } body[data-theme=dark] { - --accent-color:#9600fa; + --accent-color:#2fb3ff; --text-color: 240, 240, 240; --text-color-light: 170, 170, 170; --foreground-color: 20, 20, 20; --error-color: rgb(255, 106, 106); background: rgba(var(--foreground-color), 1); } - -.font-mono { - font-family: "Roboto Mono", sans-serif; +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] sm-carousel { + border-top: dashed 0.5rem rgba(var(--foreground-color), 0.7); } -.font-slab { - font-family: "Roboto slab", sans-serif; +/* .font-mono{ + font-family: 'Roboto Mono', sans-serif; } - +.font-slab{ + font-family: 'Roboto slab', sans-serif; +} */ .h1 { font-size: 2.5rem; } @@ -154,6 +160,14 @@ ul { gap: 1.5rem; } +.gap-2 { + gap: 2rem; +} + +.gap-3 { + gap: 3rem; +} + .align-center { -webkit-box-align: center; -ms-flex-align: center; @@ -335,12 +349,55 @@ ul { font-weight: 900; } +.popup__header { + padding: 0.5rem 1.5rem 0 1rem; + display: grid; + grid-template-columns: auto 1fr; + gap: 0.5rem; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 100%; +} + +.popup__header__close { + padding: 0.5rem; + cursor: pointer; +} + +#elevator_button_panel { + gap: 1rem; + grid-template-columns: repeat(3, 1fr); +} + +.floor__button { + padding: 1rem; + height: 4rem; + width: 4rem; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + border-radius: 0.5rem; + font-size: 1.5rem; + font-weight: 900; + background: rgba(var(--text-color), 0.06); +} +.floor__button--active { + background: rgba(var(--text-color), 0.2); + -webkit-box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 1) inset; + box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 1) inset; +} + #main_header { position: relative; padding: 1rem; grid-template-columns: repeat(3, 1fr); } +#elevator_button { + justify-self: flex-start; +} + #main_logo { justify-self: center; } @@ -350,7 +407,12 @@ ul { width: 1.8rem; } +#theme_switcher { + justify-self: flex-end; +} + .page { + position: relative; padding: 0 1rem; } @@ -369,14 +431,18 @@ ul { } .outlet-preview { - padding-top: 1rem; + padding-top: 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; - -webkit-box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; - box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; + -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; + box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; + /* &:nth-of-type(1){ + background: url(../assets/bg/floor-1-bg.svg) no-repeat top center, linear-gradient(rgba(var(--foreground-color), 1), rgba(var(--foreground-color), 1)); + background-size: contain; + } */ } .outlet__title { @@ -389,13 +455,16 @@ ul { } .label { - margin-bottom: 0.4rem; + position: relative; font-size: 0.8rem; + color: var(--accent-color); + margin-bottom: 0.3rem; } sm-carousel { + border-top: dashed 0.5rem rgba(var(--foreground-color), 1); height: 100%; - background: rgba(var(--text-color), 0.04); + background: rgba(var(--text-color), 0.06); padding-bottom: 4rem; padding-top: 1.5rem; --arrow-left: 2rem; @@ -440,6 +509,9 @@ sm-tab-header { table { border-collapse: collapse; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; } .tr { @@ -451,8 +523,14 @@ table { .td { padding: 0.6rem 0.8rem; + white-space: nowrap; } +@media only screen and (max-width: 640px) { + .hide-on-mobile { + display: none; + } +} @media only screen and (min-width: 640px) { .h1 { font-size: 4rem; @@ -482,14 +560,35 @@ table { padding: 0 2rem; } + .floor__aside { + position: absolute; + left: 1rem; + top: 50%; + -webkit-transform: translateY(-50%) rotate(-90deg); + transform: translateY(-50%) rotate(-90deg); + } + .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; } + + #elevator_popup { + --width: min(100%, 54rem) ; + } } @media (any-hover: hover) { ::-webkit-scrollbar { @@ -505,9 +604,31 @@ 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(17, 12, 46, 0.15) 0px 48px 100px 0px; - box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; + -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; + transition: color 0.3s; + } + .page-link:hover { + color: var(--accent-color); + } + .page-link:hover .icon { + fill: var(--accent-color); + } + + .floor__button:hover { + background: rgba(var(--text-color), 0.2); } } \ No newline at end of file diff --git a/css/main.min.css b/css/main.min.css index 6d57870..c7c558d 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto",sans-serif}html{scroll-behavior:smooth}body{--accent-color: #4d00a5;--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: #efefef;--error-color: red;color:rgba(var(--text-color), 1);height:calc(100%);font-size:clamp(1rem, 1.2vmax, 3rem);background:rgba(var(--text-color), 0.06)}body[data-theme=dark]{--accent-color:#9600fa;--text-color: 240, 240, 240;--text-color-light: 170, 170, 170;--foreground-color: 20, 20, 20;--error-color: rgb(255, 106, 106);background:rgba(var(--foreground-color), 1)}.font-mono{font-family:"Roboto Mono",sans-serif}.font-slab{font-family:"Roboto slab",sans-serif}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}p{max-width:60ch;line-height:1.5}img{-o-object-fit:cover;object-fit:cover}button{position:relative;overflow:hidden;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;background:none;cursor:pointer;outline:none;color:inherit;font-weight:500;-webkit-tap-highlight-color:transparent}.button{border-radius:.2rem;padding:.5rem .6rem}.button--primary{background:var(--accent-color);color:rgba(var(--foreground-color), 1)}.button--primary .icon{fill:rgba(var(--foreground-color), 1)}button:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input,sm-textarea{--border-radius: 0.2rem;--background: rgba(var(--text-color), 0.06)}sm-button{--border-radius: 0.2rem}ul{list-style:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.text-center{text-align:center}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-right{margin-left:auto}.direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.w-100{width:100%}.margin-top-1-5{margin-top:1.5rem}.margin-bottom-0-5r{margin-bottom:.5rem}.margin-bottom-1r{margin-bottom:1rem}.margin-bottom-1-5r{margin-bottom:1.5rem}.margin-bottom-2r{margin-bottom:2rem}.margin-bottom-3r{margin-bottom:3rem}.margin-bottom-4r{margin-bottom:4rem}.margin-left-0-5{margin-left:.5rem}.margin-right-0-5{margin-right:.5rem}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.no-transformations{-webkit-transform:none !important;transform:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ripple{position:absolute;border-radius:50%;-webkit-transform:scale(0);transform:scale(0);background:rgba(var(--text-color), 0.16);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color), 0.9)}.icon-only{height:2.6rem;width:2.6rem;padding:.6rem}.close-icon{padding:.3rem}.close-button{left:-0.5rem}.button__label{font-size:1rem}.button__icon{height:1.1rem;width:1.1rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.color-0-9{color:rgba(var(--text-color), 0.9)}.color-0-8{color:rgba(var(--text-color), 0.8)}.color-0-7{color:rgba(var(--text-color), 0.7)}.weight-400{font-weight:400}.weight-500{font-weight:500}.weight-700{font-weight:700}.weight-900{font-weight:900}#main_header{position:relative;padding:1rem;grid-template-columns:repeat(3, 1fr)}#main_logo{justify-self:center}#main_header__logo{height:1.8rem;width:1.8rem}.page{padding:0 1rem}.common-padding{padding:0 1rem}.floor{margin-bottom:3rem}#floor_1__outlets{margin:1rem 0;gap:1rem;grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr))}.outlet-preview{padding-top:1rem;background:rgba(var(--foreground-color), 1);-webkit-transition:-webkit-box-shadow .3s;transition:-webkit-box-shadow .3s;transition:box-shadow .3s;transition:box-shadow .3s, -webkit-box-shadow .3s;-webkit-box-shadow:rgba(50,50,93,.25) 0px 2px 5px -1px,rgba(0,0,0,.3) 0px 1px 3px -1px;box-shadow:rgba(50,50,93,.25) 0px 2px 5px -1px,rgba(0,0,0,.3) 0px 1px 3px -1px}.outlet__title{font-weight:900;text-transform:capitalize}.outlet__description{color:rgba(var(--text-color), 0.8)}.label{margin-bottom:.4rem;font-size:.8rem}sm-carousel{height:100%;background:rgba(var(--text-color), 0.04);padding-bottom:4rem;padding-top:1.5rem;--arrow-left: 2rem;--arrow-right: 2rem;--arrow-fill: rgba(var(--text-color), 1);--arrow-background: transparent;--arrow-box-shadow: none;--arrow-bottom: -3.5rem;--indicator-bottom: -2.5rem}.bit-bond-series__row,.bob-fund__row,.investor-card{min-width:100%}.investor-card{-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:auto 1fr;grid-template-areas:"img ." "para para"}.investor__image{grid-area:img;width:4rem;height:4rem;border-radius:50%}.investor__contribution-container{grid-area:para}sm-tab-header{padding:.3rem;border-radius:.3rem;background:rgba(var(--text-color), 0.06)}table{border-collapse:collapse}.tr{margin:.5rem}.tr:nth-of-type(even){background:rgba(var(--text-color), 0.1)}.td{padding:.6rem .8rem}@media only screen and (min-width: 640px){.h1{font-size:4rem}.h2{font-size:2.5rem}.h3{font-size:1.5rem}.h4{font-size:1.1rem}#main_header{padding:1.5rem 2rem}.page{padding:0 3rem}.common-padding{padding:0 2rem}.outlet-preview{padding-top:3rem}}@media only screen and (min-width: 1280px){.page{padding:0 10vw}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.outlet-preview:hover{z-index:1;-webkit-box-shadow:rgba(17,12,46,.15) 0px 48px 100px 0px;box-shadow:rgba(17,12,46,.15) 0px 48px 100px 0px}} \ No newline at end of file +*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto",sans-serif}html{scroll-behavior:smooth}body{--accent-color: #1042e9;--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: #efefef;--error-color: red;color:rgba(var(--text-color), 1);height:calc(100%);font-size:clamp(1rem, 1.2vmax, 3rem);background:rgba(var(--text-color), 0.06)}body[data-theme=dark]{--accent-color:#2fb3ff;--text-color: 240, 240, 240;--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,.3) 0px 2px 5px -1px,rgba(0,0,0,.4) 0px 1px 3px -1px;box-shadow:rgba(0,0,0,.3) 0px 2px 5px -1px,rgba(0,0,0,.4) 0px 1px 3px -1px}body[data-theme=dark] sm-carousel{border-top:dashed .5rem rgba(var(--foreground-color), 0.7)}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}p{max-width:60ch;line-height:1.5}img{-o-object-fit:cover;object-fit:cover}button{position:relative;overflow:hidden;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;background:none;cursor:pointer;outline:none;color:inherit;font-weight:500;-webkit-tap-highlight-color:transparent}.button{border-radius:.2rem;padding:.5rem .6rem}.button--primary{background:var(--accent-color);color:rgba(var(--foreground-color), 1)}.button--primary .icon{fill:rgba(var(--foreground-color), 1)}button:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input,sm-textarea{--border-radius: 0.2rem;--background: rgba(var(--text-color), 0.06)}sm-button{--border-radius: 0.2rem}ul{list-style:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.text-center{text-align:center}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-right{margin-left:auto}.direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.w-100{width:100%}.margin-top-1-5{margin-top:1.5rem}.margin-bottom-0-5r{margin-bottom:.5rem}.margin-bottom-1r{margin-bottom:1rem}.margin-bottom-1-5r{margin-bottom:1.5rem}.margin-bottom-2r{margin-bottom:2rem}.margin-bottom-3r{margin-bottom:3rem}.margin-bottom-4r{margin-bottom:4rem}.margin-left-0-5{margin-left:.5rem}.margin-right-0-5{margin-right:.5rem}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.no-transformations{-webkit-transform:none !important;transform:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ripple{position:absolute;border-radius:50%;-webkit-transform:scale(0);transform:scale(0);background:rgba(var(--text-color), 0.16);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color), 0.9)}.icon-only{height:2.6rem;width:2.6rem;padding:.6rem}.close-icon{padding:.3rem}.close-button{left:-0.5rem}.button__label{font-size:1rem}.button__icon{height:1.1rem;width:1.1rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.color-0-9{color:rgba(var(--text-color), 0.9)}.color-0-8{color:rgba(var(--text-color), 0.8)}.color-0-7{color:rgba(var(--text-color), 0.7)}.weight-400{font-weight:400}.weight-500{font-weight:500}.weight-700{font-weight:700}.weight-900{font-weight:900}.popup__header{padding:.5rem 1.5rem 0 1rem;display:grid;grid-template-columns:auto 1fr;gap:.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.popup__header__close{padding:.5rem;cursor:pointer}#elevator_button_panel{gap:1rem;grid-template-columns:repeat(3, 1fr)}.floor__button{padding:1rem;height:4rem;width:4rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:.5rem;font-size:1.5rem;font-weight:900;background:rgba(var(--text-color), 0.06)}.floor__button--active{background:rgba(var(--text-color), 0.2);-webkit-box-shadow:0 0 0 .4rem rgba(var(--text-color), 1) inset;box-shadow:0 0 0 .4rem rgba(var(--text-color), 1) inset}#main_header{position:relative;padding:1rem;grid-template-columns:repeat(3, 1fr)}#elevator_button{justify-self:flex-start}#main_logo{justify-self:center}#main_header__logo{height:1.8rem;width:1.8rem}#theme_switcher{justify-self:flex-end}.page{position:relative;padding:0 1rem}.common-padding{padding:0 1rem}.floor{margin-bottom:3rem}#floor_1__outlets{margin:1rem 0;gap:1rem;grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr))}.outlet-preview{padding-top:2rem;background:rgba(var(--foreground-color), 1);-webkit-transition:-webkit-box-shadow .3s;transition:-webkit-box-shadow .3s;transition:box-shadow .3s;transition:box-shadow .3s, -webkit-box-shadow .3s;-webkit-box-shadow:rgba(0,0,0,.2) 0px 2px 5px -1px,rgba(0,0,0,.3) 0px 1px 3px -1px;box-shadow:rgba(0,0,0,.2) 0px 2px 5px -1px,rgba(0,0,0,.3) 0px 1px 3px -1px}.outlet__title{font-weight:900;text-transform:capitalize}.outlet__description{color:rgba(var(--text-color), 0.8)}.label{position:relative;font-size:.8rem;color:var(--accent-color);margin-bottom:.3rem}sm-carousel{border-top:dashed .5rem rgba(var(--foreground-color), 1);height:100%;background:rgba(var(--text-color), 0.06);padding-bottom:4rem;padding-top:1.5rem;--arrow-left: 2rem;--arrow-right: 2rem;--arrow-fill: rgba(var(--text-color), 1);--arrow-background: transparent;--arrow-box-shadow: none;--arrow-bottom: -3.5rem;--indicator-bottom: -2.5rem}.bit-bond-series__row,.bob-fund__row,.investor-card{min-width:100%}.investor-card{-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:auto 1fr;grid-template-areas:"img ." "para para"}.investor__image{grid-area:img;width:4rem;height:4rem;border-radius:50%}.investor__contribution-container{grid-area:para}sm-tab-header{padding:.3rem;border-radius:.3rem;background:rgba(var(--text-color), 0.06)}table{border-collapse:collapse;width:-webkit-max-content;width:-moz-max-content;width:max-content}.tr{margin:.5rem}.tr:nth-of-type(even){background:rgba(var(--text-color), 0.1)}.td{padding:.6rem .8rem;white-space:nowrap}@media only screen and (max-width: 640px){.hide-on-mobile{display:none}}@media only screen and (min-width: 640px){.h1{font-size:4rem}.h2{font-size:2.5rem}.h3{font-size:1.5rem}.h4{font-size:1.1rem}#main_header{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)}.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}#elevator_popup{--width: min(100%, 54rem) }}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}body[data-theme=dark] .outlet-preview:hover{z-index:1;-webkit-box-shadow:rgba(0,0,0,.3) 0px 48px 100px 0px;box-shadow:rgba(0,0,0,.3) 0px 48px 100px 0px}.outlet-preview:hover{z-index:1;-webkit-box-shadow:rgba(0,0,0,.15) 0px 48px 100px 0px;box-shadow:rgba(0,0,0,.15) 0px 48px 100px 0px}.page-link{cursor:pointer;-webkit-transition:color .3s;transition:color .3s}.page-link:hover{color:var(--accent-color)}.page-link:hover .icon{fill:var(--accent-color)}.floor__button:hover{background:rgba(var(--text-color), 0.2)}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index cd055e4..e6354d8 100644 --- a/css/main.scss +++ b/css/main.scss @@ -10,7 +10,7 @@ html { } body { - --accent-color: #4d00a5; + --accent-color: #1042e9; --light-shade: rgba(var(--text-color), 0.06); --text-color: 17, 17, 17; --text-color-light: 100, 100, 100; @@ -23,19 +23,26 @@ body { background: rgba(var(--text-color), 0.06); } body[data-theme='dark']{ - --accent-color:#9600fa; + --accent-color:#2fb3ff; --text-color: 240, 240, 240; --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); + } } -.font-mono{ +/* .font-mono{ font-family: 'Roboto Mono', sans-serif; } .font-slab{ font-family: 'Roboto slab', sans-serif; -} +} */ .h1{ font-size: 2.5rem; @@ -125,6 +132,12 @@ ul{ .gap-1-5{ gap: 1.5rem; } +.gap-2{ + gap: 2rem; +} +.gap-3{ + gap: 3rem; +} .align-center{ align-items: center; } @@ -262,12 +275,49 @@ ul{ font-weight: 900; } +.popup__header{ + padding: 0.5rem 1.5rem 0 1rem; + display: grid; + grid-template-columns: auto 1fr; + gap: 0.5rem; + align-items: center; + width: 100%; +} +.popup__header__close{ + padding: 0.5rem; + cursor: pointer; +} + + +#elevator_button_panel{ + gap: 1rem; + grid-template-columns: repeat(3, 1fr); +} + +.floor__button{ + padding: 1rem; + height: 4rem; + width: 4rem; + justify-content: center; + border-radius: 0.5rem; + font-size: 1.5rem; + font-weight: 900; + background: rgba(var(--text-color), 0.06); + &--active{ + background: rgba(var(--text-color), 0.2); + box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 1) inset; + } +} + #main_header{ position: relative; padding: 1rem; grid-template-columns: repeat(3, 1fr); } +#elevator_button{ + justify-self: flex-start; +} #main_logo{ justify-self: center; } @@ -275,8 +325,12 @@ ul{ height: 1.8rem; width: 1.8rem; } +#theme_switcher{ + justify-self: flex-end; +} .page{ + position: relative; padding: 0 1rem; } @@ -295,11 +349,15 @@ ul{ } .outlet-preview{ - padding-top: 1rem; + padding-top: 2rem; background: rgba(var(--foreground-color), 1); // border: solid 0.8rem rgba(var(--text-color), 1); transition: box-shadow 0.3s; - box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; + box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; + /* &:nth-of-type(1){ + background: url(../assets/bg/floor-1-bg.svg) no-repeat top center, linear-gradient(rgba(var(--foreground-color), 1), rgba(var(--foreground-color), 1)); + background-size: contain; + } */ } .outlet__title{ font-weight: 900; @@ -311,13 +369,16 @@ ul{ .outlet-preview__button{} .label{ - margin-bottom: 0.4rem; + position: relative; font-size: 0.8rem; + color: var(--accent-color); + margin-bottom: 0.3rem; } sm-carousel{ + border-top: dashed 0.5rem rgba(var(--foreground-color), 1); height: 100%; - background: rgba(var(--text-color), 0.04); + background: rgba(var(--text-color), 0.06); padding-bottom: 4rem; padding-top: 1.5rem; --arrow-left: 2rem; @@ -360,6 +421,7 @@ sm-tab-header{ table{ border-collapse: collapse; + width: max-content; } .tr{ margin: 0.5rem; @@ -369,9 +431,15 @@ table{ } .td{ padding: 0.6rem 0.8rem; + white-space: nowrap; } +@media only screen and (max-width: 640px) { + .hide-on-mobile{ + display: none; + } +} @media only screen and (min-width: 640px) { .h1{ font-size: 4rem; @@ -393,15 +461,31 @@ table{ } .common-padding{ padding: 0 2rem; + } + .floor__aside{ + position: absolute; + left: 1rem; + top: 50%; + transform: translateY(-50%) rotate(-90deg); } .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; } + #elevator_popup{ + --width: min(100%, 54rem) + } } @media (any-hover: hover){ @@ -417,8 +501,27 @@ 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(17, 12, 46, 0.15) 0px 48px 100px 0px; + box-shadow: rgba(0, 0, 0, 0.15) 0px 48px 100px 0px; + } + .page-link{ + cursor: pointer; + transition: color 0.3s; + &:hover{ + color: var(--accent-color); + .icon{ + fill: var(--accent-color); + } + } + } + .floor__button:hover{ + background: rgba(var(--text-color), 0.2); } } \ No newline at end of file diff --git a/index.html b/index.html index b1df5be..4b5c8ac 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,9 @@ - Document + RanchiMall + + @@ -76,10 +78,10 @@ + + + + + + +
+ +

Elevator

+
+
+
+
Floors
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
Outlets
+
+
+

BitCoin Bonds

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!

+
+
+

Bob's Fund

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!

+
+
+

ICO

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!

+
+
+
+
+
+
+ +
- +
-
-

Floor 1

-
+
@@ -111,12 +162,12 @@

Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.

-
- +
@@ -124,12 +175,12 @@

Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.

-
- +
@@ -137,12 +188,12 @@

Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.

-
- +
@@ -163,8 +214,8 @@ More - - + +
@@ -676,8 +727,10 @@ return row }, icoInvestorRow(obj){ - const {investorName, contribution} = obj + const {extension, investorName, contribution} = obj const row = document.getElementById('ico_investor_row').content.cloneNode(true) + row.querySelector('.investor__image').src = `assets/investors-thumbnail/${investorName}.${extension}` + row.querySelector('.investor__image').setAttribute('alt', `${investorName} profile picture`) row.querySelector('.investor-name').textContent = investorName row.querySelector('.investor-contribution').textContent = contribution return row @@ -877,15 +930,78 @@ const icoInvestors = [ { - investorName: 'John Doe', + extension: 'jpg', + investorName: 'Abhijeet Das Gupta', contribution: 'Helping us in social media with increasing reach of Twitter', }, { - investorName: 'Jane Doe', + extension: 'jpg', + investorName: 'Amit Jagetia', contribution: 'Helping us in social media with increasing reach of Twitter', }, { - investorName: 'james Doe', + extension: 'jpg', + investorName: 'Amitesh Anand', + contribution: 'Helping us in social media with increasing reach of Twitter', + }, + { + extension: 'jpg', + investorName: 'Atul Agarwal', + contribution: 'Helping us in social media with increasing reach of Twitter', + }, + { + extension: 'jpg', + investorName: 'Barun Kumar', + contribution: 'Helping us in social media with increasing reach of Twitter', + }, + { + extension: 'jpg', + investorName: 'Janardan Tiwary', + contribution: 'Helping us in social media with increasing reach of Twitter', + }, + { + extension: 'jpg', + investorName: 'Kanwal Koul', + contribution: 'Helping us in social media with increasing reach of Twitter', + }, + { + extension: 'jpg', + investorName: 'Mansoor Ahmed', + contribution: 'Helping us in social media with increasing reach of Twitter', + }, + { + extension: 'jpg', + investorName: 'Meghna Patel', + contribution: 'Helping us in social media with increasing reach of Twitter', + }, + { + extension: 'jpg', + investorName: 'Nikhil Kulkarni', + contribution: 'Helping us in social media with increasing reach of Twitter', + }, + { + extension: 'jpg', + investorName: 'Pankaj Miglani', + contribution: 'Helping us in social media with increasing reach of Twitter', + }, + { + extension: 'jpg', + investorName: 'Rajeev Kumar Gupta', + contribution: 'Helping us in social media with increasing reach of Twitter', + }, + { + extension: 'jpg', + investorName: 'Sudhir Taneja', + contribution: 'Helping us in social media with increasing reach of Twitter', + }, + { + extension: 'jpg', + investorName: 'Varucchi Dubey', + contribution: 'Helping us in social media with increasing reach of Twitter', + }, + { + extension: 'jpg', + investorName: 'Venkat Narayanan', contribution: 'Helping us in social media with increasing reach of Twitter', }, ] @@ -919,11 +1035,17 @@ renderAllIcoInvestors() document.addEventListener('click', e => { - if(e.target.closest('.outlet-preview__button')){ - const button = e.target.closest('.outlet-preview__button') + if(e.target.closest('.page-link')){ + const button = e.target.closest('.page-link') const targetPage = button.dataset.target showPage(targetPage) history.pushState({type: 'page', id: targetPage}, null, `#${targetPage}`) + if(getRef('elevator_popup').open){ + hidePopup() + } + } + else if(e.target.closest('.floor__button')){ + } }) @@ -942,10 +1064,10 @@ pageEnterAnimation = flyInShrink pageExitAnimation = flyOutShrink } - document.body.style.pointerEvents = 'none' + document.body.setAttribute('style', 'pointer-events: none; overflow-x: hidden') getRef(currentPage).animate(pageExitAnimation, {...options, easing: easeInOvershoot}) .onfinish = () => { - document.body.style.pointerEvents = 'all' + 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}) @@ -958,6 +1080,15 @@ } } } + + window.addEventListener('hashchange', e => { + if(location.hash === ''){ + showPage('home_page', true) + } + else{ + showPage(location.hash.split('#')[1]) + } + })
Series