356 lines
16 KiB
HTML
356 lines
16 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>Document</title>
|
|
<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+Mono:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body data-theme="light">
|
|
|
|
<!-- Compoenet templates -->
|
|
|
|
<template id="bit_bond_row">
|
|
<div class="bit-bond-series__row grid gap-1-5">
|
|
<div class="flex direction-column">
|
|
<h5 class="h5 heading color-0-8 weight-500 margin-bottom-0-5">Series</h5>
|
|
<h3 class="h3 original-value"></h3>
|
|
</div>
|
|
<div class="flex direction-column">
|
|
<h5 class="h5 heading color-0-8 weight-500 margin-bottom-0-5">Current value</h5>
|
|
<h3 class="h3 current-value"></h3>
|
|
</div>
|
|
<div class="flex direction-column">
|
|
<h5 class="h5 heading color-0-8 weight-500 margin-bottom-0-5">Time Elapsed</h5>
|
|
<h3 class="h3 time-elapsed"></h3>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- -->
|
|
|
|
|
|
<div id="background_tile"></div>
|
|
<header id="main_header" class="grid align-center margin-bottom-1">
|
|
<button class="button">Elevator</button>
|
|
<div id="main_logo" class="flex align-center">
|
|
<svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
|
|
<h4 class="h4 header__company-name">RanchiMall</h4>
|
|
</div>
|
|
</header>
|
|
<article id="homepage" class="page">
|
|
<section id="floor_1" class="floor">
|
|
<header class="floor__header margin-bottom-2">
|
|
<h4 class="heading h4">Floor 1</h4>
|
|
</header>
|
|
<main id="floor_1__outlets" class="grid">
|
|
<div class="flex direction-column card outlet-preview">
|
|
<div class="flex direction-column margin-bottom-1-5 text-center">
|
|
<h3 class="heading h3 outlet__title margin-bottom-1">bitcoin bonds</h3>
|
|
<p class="outlet__description margin-bottom-1-5">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
|
|
</p>
|
|
<button class="button outlet-preview__button justify-right">
|
|
<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>
|
|
<div id="bit_bond_series__container" class="flex"></div>
|
|
</div>
|
|
<div class="flex direction-column card outlet-preview">
|
|
<div class="flex direction-column margin-bottom-1-5 text-center">
|
|
<h3 class="heading h3 outlet__title margin-bottom-1">Bob's Fund</h3>
|
|
<p class="outlet__description margin-bottom-1-5">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
|
|
</p>
|
|
<button class="button outlet-preview__button justify-right">
|
|
<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>
|
|
<div id="bit_bond_series__container" class="grid gap-1">
|
|
<div class="flex direction-column margin-bottom-1">
|
|
<h5 class="h5 heading color-0-8 weight-500 margin-bottom-0-5">
|
|
Investor
|
|
</h5>
|
|
<h3 class="h3">
|
|
John Doe
|
|
</h3>
|
|
</div>
|
|
<div class="grid flow-column">
|
|
<div class="flex direction-column">
|
|
<h5 class="h5 heading color-0-8 weight-500 margin-bottom-0-5">
|
|
Series
|
|
</h5>
|
|
<h3 class="h3">
|
|
$975
|
|
</h3>
|
|
</div>
|
|
<div class="flex direction-column">
|
|
<h4 class="h5 heading color-0-8 weight-500 margin-bottom-0-5">
|
|
Current value
|
|
</h4>
|
|
<h3 class="h3">
|
|
$XXXXXX
|
|
</h3>
|
|
</div>
|
|
<div class="flex direction-column">
|
|
<h4 class="h5 heading color-0-8 weight-500 margin-bottom-0-5">
|
|
Time Elapsed
|
|
</h4>
|
|
<h3 class="h3">
|
|
XXXXXX
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex direction-column card outlet-preview">
|
|
<div class="flex direction-column margin-bottom-1-5 text-center">
|
|
<h3 class="heading h3 outlet__title margin-bottom-1">ICO</h3>
|
|
<p class="outlet__description margin-bottom-1-5">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
|
|
</p>
|
|
<button class="button outlet-preview__button justify-right">
|
|
<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>
|
|
<div id="ico_investor__container" class="grid">
|
|
<div class="investor-card grid gap-1-5">
|
|
<img class="investor__image" src="dp.jpg" alt="">
|
|
<div class="flex direction-column">
|
|
<h4 class="h5 heading color-0-8 weight-500 margin-bottom-0-5">
|
|
Investor
|
|
</h4>
|
|
<h3 class="h3">
|
|
John Doe
|
|
</h3>
|
|
</div>
|
|
<div class="flex direction-column">
|
|
<h4 class="h5 heading color-0-8 weight-500 margin-bottom-0-5">
|
|
Contribution
|
|
</h4>
|
|
<p class="weight-700">
|
|
Helping us in social media with increasing reach of Twitter
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</section>
|
|
</article>
|
|
|
|
<script>
|
|
const domRefs = {}
|
|
|
|
function getRef(elementId){
|
|
if(!domRefs.elementId)
|
|
domRefs[elementId] = document.getElementById(elementId)
|
|
return domRefs[elementId]
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
|
|
const render = {
|
|
bitBondRow(obj){
|
|
const {series, currentValue, timeElapsed} = obj
|
|
const row = document.getElementById('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
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
Animations
|
|
*/
|
|
|
|
const fadeIn = [
|
|
{opacity: 0},
|
|
{opacity: 1},
|
|
]
|
|
|
|
const fadeOut = [
|
|
{opacity: 1},
|
|
{opacity: 0},
|
|
]
|
|
|
|
//Fly animation
|
|
const flyInZoom = [
|
|
{
|
|
transform: 'scale(0.9)',
|
|
opacity: 0
|
|
},
|
|
{
|
|
transform: 'scale(1)',
|
|
opacity: 1
|
|
}
|
|
]
|
|
const flyInShrink = [
|
|
{
|
|
transform: 'scale(1.1)',
|
|
opacity: 0
|
|
},
|
|
{
|
|
transform: 'scale(1)',
|
|
opacity: 1
|
|
},
|
|
]
|
|
const flyOutZoom = [
|
|
{
|
|
transform: 'scale(1)',
|
|
opacity: 1
|
|
},
|
|
{
|
|
transform: 'scale(1.1)',
|
|
opacity: 0
|
|
}
|
|
]
|
|
const flyOutShrink = [
|
|
{
|
|
transform: 'scale(1)',
|
|
opacity: 1
|
|
},
|
|
{
|
|
transform: 'scale(0.9)',
|
|
opacity: 0
|
|
},
|
|
]
|
|
|
|
// Slide animations
|
|
const slideInLeft = [
|
|
{
|
|
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 slideOutUp = [
|
|
{
|
|
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'
|
|
},
|
|
]
|
|
let currentSeriesIndex = 0
|
|
function changeSeriesRow(){
|
|
const options = {
|
|
duration: 300,
|
|
fill: 'forwards'
|
|
}
|
|
if(getRef('bit_bond_series__container').children.length){
|
|
getRef('bit_bond_series__container').children[0].animate(fadeOut, options)
|
|
.onfinish = () => {
|
|
getRef('bit_bond_series__container').children[0].remove()
|
|
replaceSeriesRow(options)
|
|
setTimeout(changeSeriesRow, 3000)
|
|
}
|
|
}else{
|
|
replaceSeriesRow(options)
|
|
setTimeout(changeSeriesRow, 3000)
|
|
}
|
|
}
|
|
function replaceSeriesRow(options){
|
|
const row = render.bitBondRow(bitBondSerieses[currentSeriesIndex])
|
|
getRef('bit_bond_series__container').append(row)
|
|
getRef('bit_bond_series__container').children[0].animate(fadeIn, options)
|
|
currentSeriesIndex = currentSeriesIndex < bitBondSerieses.length - 1 ? currentSeriesIndex + 1 : 0
|
|
}
|
|
changeSeriesRow()
|
|
</script>
|
|
</body>
|
|
</html> |