60effc09f1
Added -- New theme switcher with representative icons for states Changed -- Font for headlines -- Colour of lines for floor indicator and outlet map to Red Improved -- Outlet switcher popup animation
1399 lines
68 KiB
HTML
1399 lines
68 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>RanchiMall</title>
|
|
<meta name="description" content="">
|
|
<link rel="shortcut icon" href="assets/RM logo.png" type="image/png">
|
|
<link rel="stylesheet" href="css/main.min.css">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;700;900&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body data-theme="light">
|
|
<audio id="notification_sound">
|
|
<source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/mpeg">
|
|
<source src="https://rmservices.duckdns.org/files/notification-sound.ogg" type="audio/ogg">
|
|
</audio>
|
|
<sm-popup id="confirmation_popup">
|
|
<h4 id="confirm_title"></h4>
|
|
<p id="confirm_message"></p>
|
|
<div class="flex align-center">
|
|
<sm-button variant="no-outline" class="cancel-btn">Cancel</sm-button>
|
|
<sm-button variant="no-outline" class="submit-btn">OK</button>
|
|
</div>
|
|
</sm-popup>
|
|
<sm-popup id="prompt_popup">
|
|
<h4 id="prompt_title"></h4>
|
|
<p id="prompt_message"></p>
|
|
<sm-input id="prompt_input"></sm-input>
|
|
<div class="flex align-center">
|
|
<sm-button variant="no-outline" class="cancel-btn">Cancel</sm-button>
|
|
<sm-button variant="no-outline" class="submit-btn" type="submit">OK</button>
|
|
</div>
|
|
</sm-popup>
|
|
<sm-notifications id="notification_drawer"></sm-notifications>
|
|
<!-- Component templates -->
|
|
|
|
<template id="bit_bond_row">
|
|
<div class="bit-bond-series__row grid grid-3 gap-1 common-padding">
|
|
<div class="flex direction-column">
|
|
<h5 class="label color-0-8 weight-500">Series</h5>
|
|
<h3 class="value original-value"></h3>
|
|
</div>
|
|
<div class="flex direction-column">
|
|
<h5 class="label color-0-8 weight-500">Current value</h5>
|
|
<h3 class="value current-value"></h3>
|
|
</div>
|
|
<div class="flex direction-column">
|
|
<h5 class="label color-0-8 weight-500">Time Elapsed</h5>
|
|
<h3 class="value time-elapsed"></h3>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="bob_fund_row">
|
|
<div class="bob-fund__row grid gap-1-5 common-padding">
|
|
<div class="flex direction-column">
|
|
<h5 class="label color-0-8 weight-500">Investor</h5>
|
|
<h3 class="value investor__name"></h3>
|
|
</div>
|
|
<div class="grid grid-3 gap-1">
|
|
<div class="flex direction-column">
|
|
<h5 class="label color-0-8 weight-500">Invested</h5>
|
|
<h3 class="value original-value"></h3>
|
|
</div>
|
|
<div class="flex direction-column">
|
|
<h4 class="label color-0-8 weight-500">Current value</h4>
|
|
<h3 class="value current-value"></h3>
|
|
</div>
|
|
<div class="flex direction-column">
|
|
<h4 class="label color-0-8 weight-500">Time Elapsed</h4>
|
|
<h3 class="value time-elapsed"></h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="ico_investor_row">
|
|
<div class="investor-card grid gap-1-5 common-padding">
|
|
<img class="investor__image" src="" alt="" loading="lazy">
|
|
<div class="flex direction-column">
|
|
<h3 class="investor__name value capitalize"></h3>
|
|
<p class="investor__bio color-0-8"></p>
|
|
</div>
|
|
<div class="flex direction-column investor__contribution-container">
|
|
<h4 class="label color-0-8 weight-500">Contribution</h4>
|
|
<p class="investor__contribution weight-700"></p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="ico_phase_template">
|
|
<li class="phase grid">
|
|
<div class="progress-bar pos-relative direction-column align-center">
|
|
<div class="progress-bar__circle"></div>
|
|
<div class="progress-bar__line"></div>
|
|
</div>
|
|
<div class="grid">
|
|
<h4 class="h4 phase__title"></h4>
|
|
<h5 class="h5 phase__date weight-500 color-0-8"></h5>
|
|
<p class="phase__description color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime nihil doloremque, mollitia dolor minima et.</p>
|
|
</div>
|
|
</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>
|
|
|
|
<!-- -->
|
|
|
|
|
|
<!-- Popup -->
|
|
|
|
<sm-popup id="elevator_popup">
|
|
<header class="popup__header" slot="header">
|
|
<button class="close-button" onclick="hidePopup()">
|
|
<svg class="icon icon-only close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
|
|
</button>
|
|
<h4>Elevator</h4>
|
|
</header>
|
|
<div id="elevator_sections" class="grid">
|
|
<section id="elevator__panel">
|
|
<h5 class="h5 margin-bottom-2r">Floors</h5>
|
|
<ul id="elevator_button_panel" class="grid">
|
|
<li>
|
|
<button class="button floor__button floor__button--active" data-target="first_floor">1</button>
|
|
</li>
|
|
<li>
|
|
<button class="button floor__button" data-target="second_floor">2</button>
|
|
</li>
|
|
<li>
|
|
<button class="button floor__button" data-target="third_floor">3</button>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section id="elevator__floor_plan" class="hide-on-mobile">
|
|
<h5 class="h5 margin-bottom-2r">Outlets</h5>
|
|
<section class="grid gap-3" id="first_floor">
|
|
<div class="outlet-section">
|
|
<h4 class="h4 margin-bottom-0-5r page-link" data-target="bitbonds">BitCoin Bonds</h4>
|
|
<p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
|
|
</div>
|
|
<div class="outlet-section">
|
|
<h4 class="h4 margin-bottom-0-5r page-link" data-target="bob'sfund">Bob's Fund</h4>
|
|
<p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
|
|
</div>
|
|
<div class="outlet-section">
|
|
<h4 class="h4 margin-bottom-0-5r page-link" data-target="ico">ICO</h4>
|
|
<p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
|
|
</div>
|
|
</section>
|
|
<section id="second_floor"></section>
|
|
<section id="third_floor"></section>
|
|
</section>
|
|
</div>
|
|
</sm-popup>
|
|
|
|
<!-- -->
|
|
|
|
<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 page-link" data-target="home_page">
|
|
<svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
|
|
<h4 class="h4 header__company-name">RanchiMall</h4>
|
|
</div>
|
|
<label class="theme-switcher" title="Change theme">
|
|
<input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
|
|
<svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
|
|
<svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
|
|
</label>
|
|
</header>
|
|
<article id="home_page" class="page hide-completely full-bleed">
|
|
<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">
|
|
<span class="flex align-center margin-bottom-1-5r">
|
|
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z"/></svg>
|
|
<h4 class="h4 weight-500">
|
|
Outlets
|
|
</h4>
|
|
</span>
|
|
<main id="floor_1__outlets" class="grid">
|
|
<div id="bit_bond_outlet" class="flex direction-column card outlet-preview carousel-container">
|
|
<div class="flex direction-column common-padding margin-bottom-1-5r">
|
|
<h3 class="h3 outlet__title margin-bottom-1r">bitcoin bonds</h3>
|
|
<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></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 common-padding">
|
|
<h3 class="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>
|
|
<div id="ico_outlet" class="flex direction-column card outlet-preview carousel-container">
|
|
<div class="flex direction-column margin-bottom-1-5r common-padding">
|
|
<h3 class="h3 outlet__title margin-bottom-1r">ICO</h3>
|
|
<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>
|
|
</main>
|
|
</section>
|
|
<section id="floor_2" class="floor">
|
|
<h4 class="h1">Under construction</h4>
|
|
</section>
|
|
<section id="floor_3" class="floor">
|
|
<h4 class="h1">Under construction</h4>
|
|
</section>
|
|
</main>
|
|
</article>
|
|
|
|
|
|
|
|
<!-- Seperate pages -->
|
|
|
|
<div id="outlet_switcher" class="grid gap-1-5 hide">
|
|
<div class="flex align-center">
|
|
<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>
|
|
<span class="weight-500 color-0-8">
|
|
Floor 1 outlets
|
|
</span>
|
|
<button class="justify-right" onclick="hideOutletSwitcher()">
|
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>
|
|
</button>
|
|
</div>
|
|
<section class="flex align-center">
|
|
<button class="outlet_switcher__button outlet_switcher__button--active page-link" data-target="bitbonds">BitCoin Bonds</button>
|
|
<button class="outlet_switcher__button page-link" data-target="bob'sfund">Bob's Fund</button>
|
|
<button class="outlet_switcher__button page-link" data-target="ico">ICO</button>
|
|
</section>
|
|
</div>
|
|
|
|
<article id="bitbonds" class="page flex direction-column hide-completely">
|
|
<section class="outlet-hero-section margin-bottom-3r">
|
|
<button class="outlet-label">
|
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z"/></svg>
|
|
Outlet
|
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
|
|
</button>
|
|
<h1 class="h1 weight-900 margin-bottom-1r">BitCoin Bonds</h1>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
|
|
</section>
|
|
<h3 class="h3 margin-bottom-1r">Rooms</h3>
|
|
<div class="grid auto-grid-layout">
|
|
<scroll-tab-header data-target="bit_bond_page_group" class="margin-bottom-1r">
|
|
<button class="room-button">
|
|
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M21,8c-1.45,0-2.26,1.44-1.93,2.51l-3.55,3.56c-0.3-0.09-0.74-0.09-1.04,0l-2.55-2.55C12.27,10.45,11.46,9,10,9 c-1.45,0-2.27,1.44-1.93,2.52l-4.56,4.55C2.44,15.74,1,16.55,1,18c0,1.1,0.9,2,2,2c1.45,0,2.26-1.44,1.93-2.51l4.55-4.56 c0.3,0.09,0.74,0.09,1.04,0l2.55,2.55C12.73,16.55,13.54,18,15,18c1.45,0,2.27-1.44,1.93-2.52l3.56-3.55 C21.56,12.26,23,11.45,23,10C23,8.9,22.1,8,21,8z"/><polygon points="15,9 15.94,6.93 18,6 15.94,5.07 15,3 14.08,5.07 12,6 14.08,6.93"/><polygon points="3.5,11 4,9 6,8.5 4,8 3.5,6 3,8 1,8.5 3,9"/></g></g></svg>
|
|
<span class="button__label">
|
|
Returns
|
|
</span>
|
|
</button>
|
|
<button class="room-button">
|
|
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
|
|
<span class="button__label">
|
|
More
|
|
</span>
|
|
</button>
|
|
</scroll-tab-header>
|
|
<scroll-tab-panels id="bit_bond_page_group">
|
|
<div class="flex w-100" style="overflow-x: auto;">
|
|
<table>
|
|
<thead>
|
|
<tr class="tr">
|
|
<td class="td weight-700 uppercase">Series</td>
|
|
<td class="td weight-700 uppercase">Series date</td>
|
|
<td class="td weight-700 uppercase">Time Elapsed</td>
|
|
<td class="td weight-700 uppercase">Current value</td>
|
|
<td class="td weight-700 uppercase">Rate of return</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="tr">
|
|
<td class="td weight-500">$975</td>
|
|
</tr>
|
|
<tr class="tr">
|
|
<td class="td weight-500">$1057</td>
|
|
</tr>
|
|
<tr class="tr">
|
|
<td class="td weight-500">$1064</td>
|
|
</tr>
|
|
<tr class="tr">
|
|
<td class="td weight-500">$1205</td>
|
|
</tr>
|
|
<tr class="tr">
|
|
<td class="td weight-500">$1285</td>
|
|
</tr>
|
|
<tr class="tr">
|
|
<td class="td weight-500">$2513</td>
|
|
</tr>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<p id="bit_bond_info">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga inventore error omnis ipsam ut incidunt, doloremque pariatur expedita distinctio itaque.
|
|
</p>
|
|
</scroll-tab-panels>
|
|
</div>
|
|
</article>
|
|
|
|
<article id="bob'sfund" class="page flex direction-column hide-completely">
|
|
<section class="outlet-hero-section margin-bottom-3r">
|
|
<button class="outlet-label">
|
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z"/></svg>
|
|
Outlet
|
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
|
|
</button>
|
|
<h1 class="h1 weight-900 margin-bottom-1r">Bob's Fund</h1>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
|
|
</section>
|
|
<h3 class="h3 margin-bottom-1r">Rooms</h3>
|
|
<div class="grid auto-grid-layout">
|
|
<scroll-tab-header data-target="bob_fund_page_group" class="margin-bottom-1r">
|
|
<button class="room-button">
|
|
<svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>People</title><path d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/><path d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/></svg>
|
|
<span class="button__label">
|
|
Investors
|
|
</span>
|
|
</button>
|
|
<button class="room-button">
|
|
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
|
|
<span class="button__label">
|
|
More
|
|
</span>
|
|
</button>
|
|
</scroll-tab-header>
|
|
<scroll-tab-panels id="bob_fund_page_group">
|
|
<div>
|
|
<!-- <sm-carousel id="bob_fund_page__carousel" indicator autoplay></sm-carousel> -->
|
|
<h1 class="h1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, modi.</h1>
|
|
</div>
|
|
<div>
|
|
<p id="bob_fund_info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi facere officiis eius iusto quibusdam tenetur illo blanditiis asperiores et corporis!</p>
|
|
</div>
|
|
</scroll-tab-panels>
|
|
</div>
|
|
</article>
|
|
|
|
<article id="ico" class="page flex direction-column hide-completely">
|
|
<section class="outlet-hero-section grid margin-bottom-3r">
|
|
<button class="outlet-label">
|
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z"/></svg>
|
|
Outlet
|
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
|
|
</button>
|
|
<h1 class="h1 weight-900 margin-bottom-1r">ICO</h1>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
|
|
</section>
|
|
<h3 class="h3 margin-bottom-1r">Rooms</h3>
|
|
<div class="grid auto-grid-layout">
|
|
<scroll-tab-header data-target="ico_page_group" class="margin-bottom-1r">
|
|
<button class="room-button" title="Investors">
|
|
<svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>People</title><path d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/><path d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/></svg>
|
|
<span class="button__label">
|
|
Investors
|
|
</span>
|
|
</button>
|
|
<button class="room-button" title="Phases">
|
|
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg>
|
|
<span class="button__label">
|
|
Phases
|
|
</span>
|
|
</button>
|
|
</scroll-tab-header>
|
|
<scroll-tab-panels id="ico_page_group">
|
|
<div class="grid carousel-container">
|
|
<sm-carousel id="ico_page__carousel" indicator autoplay></sm-carousel>
|
|
</div>
|
|
<ul id="ico_phase_list"></ul>
|
|
</scroll-tab-panels>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- -->
|
|
<script src="components.js"></script>
|
|
<script id="standard_UI_functions">
|
|
|
|
const domRefs = {}
|
|
|
|
function getRef(elementId){
|
|
if(!domRefs.hasOwnProperty(elementId)){
|
|
domRefs[elementId] = {
|
|
count: 1,
|
|
ref: null
|
|
}
|
|
return document.getElementById(elementId)
|
|
}
|
|
else{
|
|
if(domRefs[elementId].count < 3){
|
|
domRefs[elementId].count = domRefs[elementId].count + 1
|
|
return document.getElementById(elementId)
|
|
}
|
|
else{
|
|
if(!domRefs[elementId].ref)
|
|
domRefs[elementId].ref = document.getElementById(elementId)
|
|
return domRefs[elementId].ref
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//Checks for internet connection status
|
|
if (!navigator.onLine)
|
|
notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error', '', true)
|
|
window.addEventListener('offline', () => {
|
|
notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error', true, true)
|
|
})
|
|
window.addEventListener('online', () => {
|
|
getRef('notification_drawer').clearAll()
|
|
notify('We are back online.', 'success')
|
|
})
|
|
|
|
const themeSwitcher = getRef('theme_switcher'),
|
|
hapticFeedbackSwitcher = getRef('haptic_feedback_switcher')
|
|
|
|
if(themeSwitcher){
|
|
if (localStorage.theme === "dark") {
|
|
nightlight()
|
|
themeSwitcher.checked = true;
|
|
} else {
|
|
daylight()
|
|
themeSwitcher.checked = false;
|
|
}
|
|
|
|
function daylight() {
|
|
document.body.setAttribute("data-theme", "light");
|
|
}
|
|
|
|
function nightlight() {
|
|
document.body.setAttribute("data-theme", "dark");
|
|
}
|
|
themeSwitcher.addEventListener('change', function (e) {
|
|
if (this.checked) {
|
|
nightlight();
|
|
localStorage.setItem("theme", "dark");
|
|
}
|
|
else {
|
|
daylight();
|
|
localStorage.setItem("theme", "light");
|
|
}
|
|
})
|
|
}
|
|
|
|
let isHapticOn
|
|
if(hapticFeedbackSwitcher){
|
|
if(localStorage.getItem('haptic') === null)
|
|
localStorage.setItem("haptic", "on");
|
|
|
|
if (localStorage.haptic === "on") {
|
|
isHapticOn = true
|
|
hapticFeedbackSwitcher.checked = true;
|
|
} else {
|
|
isHapticOn = false
|
|
hapticFeedbackSwitcher.checked = false;
|
|
}
|
|
hapticFeedbackSwitcher.addEventListener('change', function (e) {
|
|
if (this.checked) {
|
|
isHapticOn = true
|
|
localStorage.setItem("haptic", "on");
|
|
}
|
|
else {
|
|
isHapticOn = false
|
|
localStorage.setItem("haptic", "off");
|
|
}
|
|
})
|
|
}
|
|
|
|
// function required for popups or modals to appear
|
|
class Stack {
|
|
constructor() {
|
|
this.items = [];
|
|
}
|
|
push(element) {
|
|
this.items.push(element);
|
|
}
|
|
pop() {
|
|
if (this.items.length == 0)
|
|
return "Underflow";
|
|
return this.items.pop();
|
|
}
|
|
peek() {
|
|
return this.items[this.items.length - 1];
|
|
}
|
|
}
|
|
let popupStack = new Stack(),
|
|
zIndex = 10;
|
|
|
|
async function showPopup(popup, pinned) {
|
|
zIndex++
|
|
getRef(popup).setAttribute('style', `z-index: ${zIndex}`)
|
|
popupStack = getRef(popup).show(pinned, popupStack)
|
|
return getRef(popup);
|
|
}
|
|
|
|
// hides the popup or modal
|
|
function hidePopup() {
|
|
if (popupStack.peek() === undefined)
|
|
return;
|
|
popupStack.peek().popup.hide()
|
|
}
|
|
|
|
document.addEventListener('popupopened', async e => {
|
|
let thisPopup = e.detail.popup,
|
|
firstInput = thisPopup.querySelector('sm-input')
|
|
|
|
//pushes popup as seprate entry in history
|
|
history.pushState({type: 'popup'}, null, null)
|
|
|
|
if (window.innerWidth > 720 && firstInput)
|
|
firstInput.focusIn()
|
|
|
|
switch (e.detail.popup.id) {
|
|
}
|
|
})
|
|
|
|
document.addEventListener('popupclosed', e => {
|
|
popupStack = e.detail.popupStack
|
|
let thisPopup = e.detail.popup
|
|
switch (e.detail.popup.id) {
|
|
}
|
|
})
|
|
|
|
window.addEventListener('popstate', e => {
|
|
if(!e.state) return
|
|
switch (e.state.type){
|
|
case 'popup':
|
|
hidePopup()
|
|
break;
|
|
case 'page':
|
|
showPage(e.state.id)
|
|
break;
|
|
case 'subpage':
|
|
showPage(e.state.id, true)
|
|
break;
|
|
}
|
|
})
|
|
|
|
function setAttributes(el, attrs) {
|
|
for (key in attrs) {
|
|
el.setAttribute(key, attrs[key]);
|
|
}
|
|
}
|
|
|
|
function randomHsl(saturation = 80, lightness = 80) {
|
|
let hue = Math.random() * 360
|
|
let color = {
|
|
primary: `hsla( ${hue}, ${saturation}%, ${lightness}%, 1)`,
|
|
light: `hsla( ${hue}, ${saturation}%, 90%, 0.6)`
|
|
}
|
|
return color;
|
|
}
|
|
|
|
const selectedColors = ['#FF1744', '#F50057', '#8E24AA', '#5E35B1', '#3F51B5', '#3D5AFE', '#00B0FF', '#00BCD4', '#16c79a', '#66BB6A', '#8BC34A', '#11698e', '#FF6F00', '#FF9100', '#FF3D00']
|
|
function randomColor(){
|
|
return selectedColors[Math.floor(Math.random() * selectedColors.length)]
|
|
}
|
|
|
|
function clearElements(array = []) {
|
|
array.forEach(item => {
|
|
getRef(item).innerHTML = ``
|
|
})
|
|
}
|
|
|
|
//Function for displaying toast notifications. pass in error for mode param if you want to show an error.
|
|
function notify(message, mode, pinned, sound) {
|
|
|
|
if (mode === 'error')
|
|
console.error(message)
|
|
else
|
|
console.log(message)
|
|
getRef('notification_drawer').push(message, mode, pinned)
|
|
if (navigator.onLine && sound) {
|
|
getRef('notification_sound').currentTime = 0;
|
|
getRef('notification_sound').play();
|
|
}
|
|
}
|
|
|
|
// displays a popup for asking permission. Use this instead of JS confirm
|
|
let confirmation = (title, message, cancelText = 'Cancel', confirmText = 'OK') => {
|
|
return new Promise(resolve => {
|
|
showPopup('confirmation_popup')
|
|
getRef('confirm_title').textContent = title;
|
|
getRef('confirm_message').textContent = message;
|
|
let cancelButton = getRef('confirmation_popup').children[2].children[0],
|
|
submitButton = getRef('confirmation_popup').children[2].children[1]
|
|
submitButton.textContent = confirmText
|
|
cancelButton.textContent = cancelText
|
|
submitButton.onclick = () => {
|
|
hidePopup()
|
|
resolve(true);
|
|
}
|
|
cancelButton.onclick = () => {
|
|
hidePopup()
|
|
resolve(false);
|
|
}
|
|
})
|
|
}
|
|
|
|
const currentYear = new Date().getFullYear()
|
|
function getFormatedTime(time, relative) {
|
|
try {
|
|
if (String(time).indexOf('_'))
|
|
time = String(time).split('_')[0]
|
|
const intTime = parseInt(time)
|
|
if(String(intTime).length < 13)
|
|
time *= 1000
|
|
let timeFrag = new Date(intTime).toString().split(' '),
|
|
day = timeFrag[0],
|
|
month = timeFrag[1],
|
|
date = timeFrag[2],
|
|
year = timeFrag[3],
|
|
minutes = new Date(intTime).getMinutes(),
|
|
hours = new Date(intTime).getHours(),
|
|
currentTime = new Date().toString().split(' ')
|
|
|
|
minutes = minutes < 10 ? `0${minutes}` : minutes
|
|
let finalHours = ``;
|
|
if (hours > 12)
|
|
finalHours = `${hours - 12}:${minutes}`
|
|
else if (hours === 0)
|
|
finalHours = `12:${minutes}`
|
|
else
|
|
finalHours = `${hours}:${minutes}`
|
|
|
|
finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM`
|
|
if (relative) {
|
|
if (year == currentYear) {
|
|
if (currentTime[1] === month){
|
|
const dateDiff = (parseInt(currentTime[2]) - parseInt(date))
|
|
if(dateDiff === 0)
|
|
return `${finalHours}`;
|
|
else if(dateDiff === 1)
|
|
return `Yesterday`;
|
|
else if(dateDiff > 1 && dateDiff < 8)
|
|
return currentTime[0];
|
|
else
|
|
return ` ${date} ${month}`;
|
|
}
|
|
else
|
|
return ` ${date} ${month}`;
|
|
}
|
|
else
|
|
return `${month} ${year}`;
|
|
}
|
|
else
|
|
return `${finalHours} ${month} ${date} ${year}`;
|
|
} catch (e) {
|
|
console.error(e);
|
|
return time;
|
|
}
|
|
}
|
|
|
|
|
|
function areInputsValid(parent) {
|
|
let allInputs = parent.querySelectorAll("sm-input:not([disable]), pin-input:not([disable])"),
|
|
inputsFilled = [...allInputs].every(input => {
|
|
if (input.hasAttribute('floId')) {
|
|
if (floCrypto.validateAddr(input.value.trim())) return true
|
|
}
|
|
else if (input.hasAttribute('privateKey')) {
|
|
if (floCrypto.getPubKeyHex(input.value.trim())) return true
|
|
}
|
|
else
|
|
return input.isValid
|
|
})
|
|
let allRadios = parent.querySelectorAll("input[type='radio']")
|
|
if (allRadios.length)
|
|
return inputsFilled && parent.querySelector('[checked]')
|
|
else
|
|
return inputsFilled
|
|
}
|
|
|
|
function formValidation(formElement) {
|
|
let parent = formElement.closest('sm-popup') || formElement.closest('form'),
|
|
submitBtn
|
|
if(parent)
|
|
submitBtn = parent.querySelector("button[type='submit'], sm-button[variant='primary']");
|
|
if (!submitBtn) return;
|
|
if (areInputsValid(parent))
|
|
submitBtn.disabled = false;
|
|
else
|
|
submitBtn.disabled = true;
|
|
}
|
|
|
|
window.addEventListener('load', () => {
|
|
loadPage()
|
|
document.addEventListener('input', e => {
|
|
if (e.target.closest('sm-input')) {
|
|
let input = e.target.closest('sm-input')
|
|
formValidation(input)
|
|
if (input.value === '')
|
|
input.setValidity('')
|
|
let validityState = input.validity
|
|
if (input.hasAttribute('floId')) {
|
|
if (floCrypto.validateAddr(input.value.trim()) || input.value.trim() === '')
|
|
input.setValidity('')
|
|
else
|
|
input.setValidity('Invalid FLO address.')
|
|
}
|
|
else if (input.hasAttribute('privateKey')) {
|
|
if (floCrypto.getPubKeyHex(input.value.trim()) || input.value.trim() === '')
|
|
input.setValidity('')
|
|
else
|
|
input.setValidity('Invalid FLO private key.')
|
|
}
|
|
}
|
|
else if(e.target.closest('pin-input')){
|
|
formValidation(e.target.closest('pin-input'))
|
|
}
|
|
})
|
|
document.addEventListener('keyup', (e) => {
|
|
if (e.target.closest('sm-input, pin-input')) {
|
|
if (e.key === 'Enter') {
|
|
let parent = e.target.closest('sm-popup') || e.target.closest('form')
|
|
parent.querySelector("button[type='submit'], sm-button[variant='primary'], sm-button[type='submit']")
|
|
.click();
|
|
}
|
|
}
|
|
if(e.code === 'Escape'){
|
|
hidePopup()
|
|
}
|
|
})
|
|
|
|
document.addEventListener('pointerdown', (e) => {
|
|
if (e.target.closest('button, sm-button:not([disable]), .interact')) {
|
|
createRipple(e, e.target.closest('button, sm-button, .interact'))
|
|
}
|
|
})
|
|
|
|
})
|
|
function createRipple(event, target) {
|
|
const circle = document.createElement("span");
|
|
const diameter = Math.max(target.clientWidth, target.clientHeight);
|
|
const radius = diameter / 2;
|
|
const targetDimensions = target.getBoundingClientRect()
|
|
circle.style.width = circle.style.height = `${diameter}px`;
|
|
circle.style.left = `${event.clientX - (targetDimensions.left + radius)}px`;
|
|
circle.style.top = `${event.clientY - (targetDimensions.top + radius)}px`;
|
|
circle.classList.add("ripple");
|
|
const rippleAnimation = circle.animate([
|
|
|
|
{
|
|
transform: 'scale(3)',
|
|
opacity: 0
|
|
}
|
|
],
|
|
{
|
|
duration: 1000,
|
|
fill: "forwards",
|
|
easing: 'ease-out'
|
|
})
|
|
target.append(circle);
|
|
rippleAnimation.onfinish = () => {
|
|
circle.remove()
|
|
}
|
|
}
|
|
|
|
async function loadPage(){
|
|
if(location.hash === ''){
|
|
history.pushState({type: 'page', id: 'home_page'}, null, '')
|
|
showPage('home_page', true)
|
|
}
|
|
else{
|
|
showPage(location.hash.split('#')[1])
|
|
}
|
|
}
|
|
function debounce(func, wait, immediate) {
|
|
let timeout;
|
|
return function() {
|
|
let context = this, args = arguments;
|
|
let later = function() {
|
|
timeout = null;
|
|
if (!immediate) func.apply(context, args);
|
|
};
|
|
let callNow = immediate && !timeout;
|
|
clearTimeout(timeout);
|
|
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>
|
|
|
|
const render = {
|
|
bitBondRow(obj){
|
|
const {series, currentValue, timeElapsed} = obj
|
|
const row = getRef('bit_bond_row').content.cloneNode(true)
|
|
row.querySelector('.original-value').textContent = series
|
|
row.querySelector('.current-value').textContent = currentValue
|
|
row.querySelector('.time-elapsed').textContent = timeElapsed
|
|
return row
|
|
},
|
|
bobFundRow(obj){
|
|
const {investorName, invested, currentValue, timeElapsed} = obj
|
|
const row = getRef('bob_fund_row').content.cloneNode(true)
|
|
row.querySelector('.investor__name').textContent = investorName
|
|
row.querySelector('.original-value').textContent = invested
|
|
row.querySelector('.current-value').textContent = currentValue
|
|
row.querySelector('.time-elapsed').textContent = timeElapsed
|
|
return row
|
|
},
|
|
icoInvestorRow(obj, options){
|
|
const {extension, investorName, bio, contribution} = obj
|
|
const {thumbnail} = options
|
|
const row = getRef('ico_investor_row').content.cloneNode(true)
|
|
const card = row.querySelector('.investor-card')
|
|
const folder = thumbnail ? 'investors-thumbnail' : 'investors'
|
|
const investorImage = row.querySelector('.investor__image')
|
|
if(thumbnail)
|
|
card.classList.add('investor-card--small')
|
|
else
|
|
card.classList.add('investor-card--big')
|
|
investorImage.src = `assets/${folder}/${investorName}.${extension}`
|
|
investorImage.setAttribute('alt', `${investorName} profile picture`)
|
|
row.querySelector('.investor__name').textContent = investorName
|
|
row.querySelector('.investor__bio').textContent = bio
|
|
row.querySelector('.investor__contribution').textContent = contribution
|
|
return row
|
|
},
|
|
icoPhase(obj){
|
|
const {phase, date, info} = obj
|
|
const template = getRef('ico_phase_template').content.cloneNode(true)
|
|
template.querySelector('.phase__title').textContent = `Phase ${phase}`
|
|
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
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
Animations
|
|
*/
|
|
|
|
const fadeIn = [
|
|
{opacity: 0},
|
|
{opacity: 1},
|
|
]
|
|
|
|
const fadeOut = [
|
|
{opacity: 1},
|
|
{opacity: 0},
|
|
]
|
|
|
|
// Slide animations
|
|
const slideInLeft = [
|
|
{
|
|
transform: 'translateX(1rem)',
|
|
opacity: 0
|
|
},
|
|
{
|
|
transform: 'translateX(0)',
|
|
opacity: 1
|
|
}
|
|
]
|
|
const slideInRight = [
|
|
{
|
|
transform: 'translateX(-1rem)',
|
|
opacity: 0
|
|
},
|
|
{
|
|
transform: 'translateX(0)',
|
|
opacity: 1
|
|
},
|
|
]
|
|
const slideOutLeft = [
|
|
{
|
|
transform: 'translateX(0)',
|
|
opacity: 1
|
|
},
|
|
{
|
|
transform: 'translateX(-1rem)',
|
|
opacity: 0
|
|
}
|
|
]
|
|
const slideOutRight = [
|
|
{
|
|
transform: 'translateX(0)',
|
|
opacity: 1
|
|
},
|
|
{
|
|
transform: 'translateX(1rem)',
|
|
opacity: 0
|
|
},
|
|
]
|
|
const slideInDown = [
|
|
{
|
|
transform: 'translateY(-1rem)',
|
|
opacity: 0
|
|
},
|
|
{
|
|
transform: 'translateY(0)',
|
|
opacity: 1
|
|
},
|
|
]
|
|
const slideInUp = [
|
|
{
|
|
transform: 'translateY(1rem)',
|
|
opacity: 0
|
|
},
|
|
{
|
|
transform: 'translateY(0)',
|
|
opacity: 1
|
|
},
|
|
]
|
|
const slideOutUp = [
|
|
{
|
|
transform: 'translateY(0)',
|
|
opacity: 1
|
|
},
|
|
{
|
|
transform: 'translateY(-1rem)',
|
|
opacity: 0
|
|
},
|
|
]
|
|
const slideOutDown = [
|
|
{
|
|
transform: 'translateY(0)',
|
|
opacity: 1
|
|
},
|
|
{
|
|
transform: 'translateY(1rem)',
|
|
opacity: 0
|
|
},
|
|
]
|
|
|
|
// eases
|
|
const easeInOvershoot = `cubic-bezier(0.6, -0.28, 0.735, 0.045)`;
|
|
const easeOutOvershoot = `cubic-bezier(0.175, 0.885, 0.32, 1.275)`;
|
|
|
|
//////////////////
|
|
|
|
|
|
const bitBondSerieses = [
|
|
{
|
|
series: '$975',
|
|
currentValue: '$XXXXX',
|
|
timeElapsed: '2years'
|
|
},
|
|
{
|
|
series: '$1057',
|
|
currentValue: '$XXXXX',
|
|
timeElapsed: '2years'
|
|
},
|
|
{
|
|
series: '$1064',
|
|
currentValue: '$XXXXX',
|
|
timeElapsed: '2years'
|
|
},
|
|
{
|
|
series: '$1205',
|
|
currentValue: '$XXXXX',
|
|
timeElapsed: '2years'
|
|
},
|
|
{
|
|
series: '$1285',
|
|
currentValue: '$XXXXX',
|
|
timeElapsed: '2years'
|
|
},
|
|
{
|
|
series: '$2513',
|
|
currentValue: '$XXXXX',
|
|
timeElapsed: '2years'
|
|
},
|
|
]
|
|
|
|
|
|
const bobFund = [
|
|
{
|
|
investorName: 'John Doe',
|
|
invested: '₹20000',
|
|
currentValue: '$XXXXX',
|
|
timeElapsed: '2years'
|
|
},
|
|
{
|
|
investorName: 'Jane Doe',
|
|
invested: '₹10000',
|
|
currentValue: '$XXXXX',
|
|
timeElapsed: '2years'
|
|
},
|
|
{
|
|
investorName: 'james Doe',
|
|
invested: '₹15000',
|
|
currentValue: '$XXXXX',
|
|
timeElapsed: '2years'
|
|
},
|
|
]
|
|
|
|
const icoInvestors = [
|
|
{
|
|
extension: 'jpg',
|
|
investorName: 'Abhijeet Das Gupta',
|
|
bio: 'Product and Technology Solutions Architect at 366Pi Technologies',
|
|
contribution: 'Helping us in social media with increasing reach of Twitter',
|
|
},
|
|
{
|
|
extension: 'jpg',
|
|
investorName: 'Amit Jagetia',
|
|
bio: 'IT Professional in FinTech Industry',
|
|
contribution: 'Helping us in social media with increasing reach of Twitter',
|
|
},
|
|
{
|
|
extension: 'jpg',
|
|
investorName: 'Amitesh Anand',
|
|
bio: 'Co-founder and CEO, 366Pi Technologies and Director of Technology, Fennex Ltd.',
|
|
contribution: 'Helping us in social media with increasing reach of Twitter',
|
|
},
|
|
{
|
|
extension: 'jpg',
|
|
investorName: 'Atul Agarwal',
|
|
bio: 'Entrepreneur, Real Estate Developer, Blockchain Entrepreneur, Iconoclast',
|
|
contribution: 'Helping us in social media with increasing reach of Twitter',
|
|
},
|
|
{
|
|
extension: 'jpg',
|
|
investorName: 'Barun Kumar',
|
|
bio: 'Cybersecurity Professional, Founder of Mantran Consulting, Singapore',
|
|
contribution: 'Helping us in social media with increasing reach of Twitter',
|
|
},
|
|
{
|
|
extension: 'jpg',
|
|
investorName: 'Janardan Tiwary',
|
|
bio: 'Retd. General Manager Coal India, Ranchi, Mining Engineer from IIT Dhanbad',
|
|
contribution: 'Helping us in social media with increasing reach of Twitter',
|
|
},
|
|
{
|
|
extension: 'jpg',
|
|
investorName: 'Kanwal Koul',
|
|
bio: 'Working Professional in the power sector',
|
|
contribution: 'Helping us in social media with increasing reach of Twitter',
|
|
},
|
|
{
|
|
extension: 'jpg',
|
|
investorName: 'Mansoor Ahmed',
|
|
bio: 'Cybersecurity Expert, Founder, and Director Winged World',
|
|
contribution: 'Helping us in social media with increasing reach of Twitter',
|
|
},
|
|
{
|
|
extension: 'jpg',
|
|
investorName: 'Meghna Patel',
|
|
bio: 'Marketing Professional turned Blockchain Enthusiast',
|
|
contribution: 'Helping us in social media with increasing reach of Twitter',
|
|
},
|
|
{
|
|
extension: 'jpg',
|
|
investorName: 'Nikhil Kulkarni',
|
|
bio: 'CTO and Co-Founder of tripDarwin.com',
|
|
contribution: 'Helping us in social media with increasing reach of Twitter',
|
|
},
|
|
{
|
|
extension: 'jpg',
|
|
investorName: 'Pankaj Miglani',
|
|
bio: 'Professional Services Consultant at AWS Cybersecurity',
|
|
contribution: 'Helping us in social media with increasing reach of Twitter',
|
|
},
|
|
{
|
|
extension: 'jpg',
|
|
investorName: 'Rajeev Kumar Gupta',
|
|
bio: 'Curator cum Organizer, TEDx Kanke, and Former DGM-Corporate & Regulatory Affairs at JWS Steel ',
|
|
contribution: 'Helping us in social media with increasing reach of Twitter',
|
|
},
|
|
{
|
|
extension: 'jpg',
|
|
investorName: 'Sudhir Taneja',
|
|
bio: 'Sales and Marketing Professional, Associate Vice President, HDFC Life',
|
|
contribution: 'Helping us in social media with increasing reach of Twitter',
|
|
},
|
|
{
|
|
extension: 'jpg',
|
|
investorName: 'Varucchi Dubey',
|
|
bio: 'Founder and Managing Director, DNV Security Solutions Pvt Ltd.',
|
|
contribution: 'Helping us in social media with increasing reach of Twitter',
|
|
},
|
|
{
|
|
extension: 'jpg',
|
|
investorName: 'Venkat Narayanan',
|
|
bio: 'Business Excellence Professional, Sr. Manager at Tata Consultancy Services',
|
|
contribution: 'Helping us in social media with increasing reach of Twitter',
|
|
},
|
|
]
|
|
|
|
const icoPhases = [
|
|
{
|
|
phase: 1,
|
|
date: 'Aug 17',
|
|
info: ''
|
|
},
|
|
{
|
|
phase: 2,
|
|
date: 'Oct 17',
|
|
info: ''
|
|
}
|
|
]
|
|
|
|
function renderAllSeries(){
|
|
const frag = document.createDocumentFragment()
|
|
getRef('bit_bond_series__container').innerHTML = ''
|
|
bitBondSerieses.forEach(series => {
|
|
frag.append(render.bitBondRow(series))
|
|
})
|
|
getRef('bit_bond_series__container').append(frag)
|
|
}
|
|
function renderAllFundInvestors(){
|
|
const frag = document.createDocumentFragment()
|
|
getRef('bob_fund_investors__container').innerHTML = ''
|
|
bobFund.forEach(investor => {
|
|
frag.append(render.bobFundRow(investor))
|
|
})
|
|
getRef('bob_fund_investors__container').append(frag)
|
|
}
|
|
function renderAllIcoInvestors(){
|
|
const frag1 = document.createDocumentFragment()
|
|
const frag2 = document.createDocumentFragment()
|
|
getRef('ico_investors__container').innerHTML = ''
|
|
getRef('ico_page__carousel').innerHTML = ''
|
|
icoInvestors.forEach(investor => {
|
|
frag1.append(render.icoInvestorRow(investor, {thumbnail: true}))
|
|
frag2.append(render.icoInvestorRow(investor, {thumbnail: false}))
|
|
})
|
|
getRef('ico_investors__container').append(frag1)
|
|
getRef('ico_page__carousel').append(frag2)
|
|
}
|
|
function renderAllIcoPhases(){
|
|
getRef('ico_phase_list').innerHTML = ''
|
|
const frag = document.createDocumentFragment()
|
|
icoPhases.forEach(phase => {
|
|
frag.append(render.icoPhase(phase))
|
|
})
|
|
getRef('ico_phase_list').append(frag)
|
|
}
|
|
renderAllSeries()
|
|
renderAllFundInvestors()
|
|
renderAllIcoInvestors()
|
|
renderAllIcoPhases()
|
|
|
|
const outletObserver = new IntersectionObserver( entries => {
|
|
entries.forEach(entry => {
|
|
if(window.innerWidth < 640){
|
|
if(entry.isIntersecting){
|
|
entry.target.querySelector('sm-carousel').startAutoPlay()
|
|
}
|
|
else{
|
|
entry.target.querySelector('sm-carousel').stopAutoPlay()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
{
|
|
threshold: 0.9
|
|
})
|
|
|
|
document.querySelectorAll('.carousel-container').forEach(outlet => outletObserver.observe(outlet))
|
|
|
|
let isFloorSwitcherOpen = false
|
|
document.addEventListener('click', e => {
|
|
if(e.target.closest('.page-link')){
|
|
const button = e.target.closest('.page-link')
|
|
const targetPage = button.dataset.target
|
|
if(currentPage !== targetPage){
|
|
history.pushState({type: 'page', id: targetPage}, null, `#${targetPage}`)
|
|
showPage(targetPage)
|
|
}
|
|
if(getRef('elevator_popup').open){
|
|
hidePopup()
|
|
}
|
|
}
|
|
if(isFloorSwitcherOpen){
|
|
hideOutletSwitcher()
|
|
}
|
|
else{
|
|
if(e.target.closest('.floor-label')){
|
|
const label = e.target.closest('.floor-label')
|
|
const target = label.dataset.target
|
|
getRef('home_page').scrollTo({
|
|
top: getRef(target).getBoundingClientRect().top - getRef('home_page').getBoundingClientRect().top + getRef('home_page').scrollTop,
|
|
behavior: 'smooth'
|
|
})
|
|
}
|
|
else if(e.target.closest('.outlet-label')){
|
|
showOutletSwitcher(e.target.closest('.outlet-label'))
|
|
}
|
|
}
|
|
})
|
|
|
|
let mouseOverTimeout
|
|
document.querySelectorAll('.outlet-label').forEach(label => {
|
|
label.addEventListener('mouseenter', e => {
|
|
mouseOverTimeout = setTimeout(() => {
|
|
showOutletSwitcher(e.target)
|
|
}, 300);
|
|
})
|
|
})
|
|
document.querySelectorAll('.outlet-label').forEach(label => {
|
|
label.addEventListener('mouseleave', e => {
|
|
clearTimeout(mouseOverTimeout)
|
|
})
|
|
})
|
|
|
|
function showOutletSwitcher(button){
|
|
if(isFloorSwitcherOpen) return
|
|
isFloorSwitcherOpen = true
|
|
const buttonDimensions = button.getBoundingClientRect()
|
|
getRef('outlet_switcher').setAttribute('style', `top: ${buttonDimensions.top + document.documentElement.scrollTop}px; left: ${buttonDimensions.left}px;`)
|
|
getRef('outlet_switcher').classList.remove('hide')
|
|
getRef('outlet_switcher').animate(slideInDown, {
|
|
duration: 300,
|
|
easing: easeOutOvershoot,
|
|
fill: 'forwards'
|
|
})
|
|
}
|
|
|
|
function hideOutletSwitcher(){
|
|
if(!isFloorSwitcherOpen) return
|
|
getRef('outlet_switcher').animate(slideOutUp, {
|
|
duration: 200,
|
|
easing: easeInOvershoot,
|
|
fill: 'forwards'
|
|
}).onfinish = () => {
|
|
getRef('outlet_switcher').classList.add('hide')
|
|
isFloorSwitcherOpen = false
|
|
}
|
|
}
|
|
|
|
let activeOutletIndex = 0
|
|
const allOutletCarousels = document.querySelectorAll('.outlet-preview sm-carousel')
|
|
function changeOutletFocus(){
|
|
allOutletCarousels[activeOutletIndex].nextSlide()
|
|
activeOutletIndex = activeOutletIndex + 1 < allOutletCarousels.length ? activeOutletIndex + 1 : 0
|
|
|
|
if(window.innerWidth > 640){
|
|
setTimeout(() => {
|
|
changeOutletFocus()
|
|
}, 5000);
|
|
}
|
|
}
|
|
setTimeout(() => {
|
|
changeOutletFocus()
|
|
}, 5000);
|
|
|
|
let currentPage = ''
|
|
|
|
function showPage(pageId){
|
|
if(currentPage !== pageId){
|
|
const options = {
|
|
duration: 300,
|
|
fill: 'forwards'
|
|
}
|
|
if(currentPage){
|
|
let pageEnterAnimation = slideInLeft
|
|
let pageExitAnimation = slideOutLeft
|
|
if(pageId === 'home_page'){
|
|
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: '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: 'ease'})
|
|
currentPage = pageId
|
|
}
|
|
}
|
|
else{
|
|
getRef(pageId).classList.remove('hide-completely')
|
|
currentPage = pageId
|
|
}
|
|
if(pageId !== 'home_page'){
|
|
const activeOutlet = getRef('outlet_switcher').querySelector('.outlet_switcher__button--active')
|
|
activeOutlet.classList.remove('outlet_switcher__button--active')
|
|
getRef('outlet_switcher').querySelector(`[data-target="${pageId}"]`).classList.add('outlet_switcher__button--active')
|
|
hideOutletSwitcher()
|
|
}
|
|
}
|
|
}
|
|
|
|
window.addEventListener('hashchange', e => {
|
|
if(location.hash === ''){
|
|
showPage('home_page', true)
|
|
}
|
|
else{
|
|
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)
|
|
}, {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> |