<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   @import url("https://fonts.googleapis.com/css?family=Lato:300,700");
.phonebook {
  background: #111;
  height: 100vh;
  overflow: hidden;
  position: relative;
  width: 100vw;
}
@media (min-width: 768px) {
  .phonebook {
    height: 480px;
    width: 320px;
  }
}
.phonebook--loading * {
  opacity: 0;
}
.phonebook__contacts {
  -webkit-overflow-scrolling: touch;
  background: #111;
  height: 100%;
  list-style: none;
  margin: 50px 0 0 0;
  overflow: auto;
  padding: 30vh 0 55vh 0;
}
@media (min-width: 768px) {
  .phonebook__contacts {
    padding: 144px 0 264px 0;
  }
}
.phonebook__contacts--opening .phonebook__contact {
  transition: none;
}
.phonebook__contacts--fake {
  background: #111;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  z-index: 3;
}
.phonebook__contact {
  align-items: center;
  background: #111;
  cursor: pointer;
  display: flex;
  font-size: 0.75rem;
  height: 50px;
  opacity: 0.1;
  padding: 0;
  transition: background 0.1s, height 0.1s, opacity 0.1s;
}
.phonebook__contact:hover {
  background: #1d1d1d;
}
.phonebook__contact-name {
  overflow: hidden;
  padding: 0 20px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.phonebook__contact-avatar {
  height: 50px;
  flex: 1 0 50px;
  position: relative;
  width: 50px;
}
.phonebook__contact--next,
.phonebook__contact--prev {
  height: 75px;
  font-size: 1rem;
  opacity: 0.75;
}
.phonebook__contact--next .phonebook__contact-avatar,
.phonebook__contact--prev .phonebook__contact-avatar {
  height: 75px;
  flex: 1 0 75px;
  width: 75px;
}
.phonebook__contact--active {
  height: 100px;
  font-size: 1.25rem;
  opacity: 1;
}
.phonebook__contact--active .phonebook__contact-avatar {
  height: 100px;
  flex: 1 0 100px;
  width: 100px;
}
.phonebook-header {
  align-items: center;
  background: #292929;
  display: flex;
  filter: drop-shadow(0 4px 2px #000);
  flex-direction: row;
  height: 50px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
}
.phonebook-header:after {
  content: attr(data-active);
  color: #fff;
  position: absolute;
  height: 50px;
  width: 50px;
  top: 100%;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  text-transform: uppercase;
}
.phonebook-header--fake {
  z-index: 5;
}
.phonebook-header__title {
  flex: 1;
  font-size: 1rem;
  padding-left: 20px;
}
.phonebook-header__action {
  border: 0;
  background: transparent;
  cursor: pointer;
  height: 44px;
  overflow: hidden;
  position: relative;
  width: 44px;
}
.phonebook-header__action svg {
  height: 24px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  z-index: 2;
}
.phonebook-header__action svg path {
  fill: #fafafa;
}
.phonebook-header__action:hover {
  background: #353535;
}
.contact {
  background: #111;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 4;
}
.contact__title {
  background: #111;
  align-items: center;
  display: flex;
  height: calc(var(--y) * 1px);
  position: absolute;
  width: 100%;
}
.contact__avatar {
  height: 100px;
  left: 0;
  position: absolute;
  top: 0;
  transform: translateY(calc(var(--y) * 1px));
  width: 100px;
}
.contact__avatar--backdrop {
  background-size: cover;
  height: calc(var(--y) * 1px);
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}
.contact__avatar--backdrop:after {
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.contact__name {
  transform: translateY(calc(var(--y) * 1px));
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  display: block;
  background: rgba(0,0,0,0);
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  white-space: nowrap;
  line-height: 100px;
  padding: 0 20px 0 100px;
}
.contact__close,
.contact__menu {
  background: transparent;
  border: 0;
  height: 44px;
  position: absolute;
  top: 6px;
  width: 44px;
  z-index: 2;
}
.contact__close {
  left: 6px;
}
.contact__menu {
  right: 6px;
}
.contact__details {
  background: #111;
  bottom: 0;
  left: 0;
  opacity: 0;
  overflow: auto;
  padding: 20px;
  position: absolute;
  right: 0;
  top: calc(var(--t) * 1px);
  transform: translateY(calc(var(--y) * 1px));
}
.contact-details {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  margin: 0;
}
.contact-details__action path {
  fill: #fff;
}
.contact-details__detail {
  margin: 0;
  overflow: hidden;
  padding: 0 20px;
  text-overflow: ellipsis;
}
/* Base styling */
*,
*:before,
*:after {
  box-sizing: border-box;
}
body,
html {
  align-items: center;
  background: linear-gradient(45deg, #639 50%, #1e90ff);
  color: #fafafa;
  display: flex;
  font-family: 'Lato', sans-serif;
  justify-content: center;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  width: 100vw;
}
img {
  -o-object-fit: cover;
     object-fit: cover;
}
img:after {
  bottom: 0;
  background: linear-gradient(45deg, #808080, #a9a9a9, #808080);
  content: '';
  left: 0;
  position: absolute;
  top: 0;
  right: 0;
}
svg {
  height: 24px;
  width: 24px;
}
svg path {
  fill: #fafafa;
}
button {
  background: transparent;
  border: 0;
  cursor: pointer;
  height: 44px;
  width: 44px;
}
button:active .bloom {
  -webkit-animation: bloom 0.25s;
          animation: bloom 0.25s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  background: #fff;
  border-radius: 100%;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  position: absolute;
  right: 0;
  top: 0;
}
@-webkit-keyframes bloom {
  from {
    transform: scale(0);
  }
  to {
    opacity: 0.25;
    transform: scale(1.5);
  }
}
@keyframes bloom {
  from {
    transform: scale(0);
  }
  to {
    opacity: 0.25;
    transform: scale(1.5);
  }
}
  </style>
 </head>
 <body translate="no">
  <div class="phonebook phonebook--loading" v-on:scroll="update">
   <header :data-active="activeContact.firstName.charAt(0)" class="phonebook-header" ref="false">
    <div class="phonebook-header__title">
     Contacts
    </div>
    <div class="phonebook-header__actions">
     <button class="phonebook-header__action">
      <div class="bloom">
      </div>
     </button>
     <button class="phonebook-header__action">
      <div class="bloom">
      </div>
     </button>
    </div>
   </header>
   <article class="contact" v-if="detailOpened">
    <header :data-active="activeContact.firstName.charAt(0)" class="phonebook-header phonebook-header--fake" ref="fakeHeader">
     <div class="phonebook-header__title">
      Contacts
     </div>
     <div class="phonebook-header__actions">
      <button class="phonebook-header__action">
       <div class="bloom">
       </div>
      </button>
      <button class="phonebook-header__action">
       <div class="bloom">
       </div>
      </button>
     </div>
    </header>
    <button class="contact__close" v-on:click="closeDetails">
    </button>
    <button class="contact__menu">
    </button>
    <div class="contact__title" v-bind:style="{'--y': messageTop}">
     <div class="contact__avatar--backdrop" ref="activeAvatarBack" v-bind:style="{'--y': messageTop, 'background-image': 'url(' + activeContact.avatar + ')' }">
     </div>
     <img :src="activeContact.avatar" class="contact__avatar" ref="activeAvatar" v-bind:style="{'--y': messageTop }"/>
     <div class="contact__name" ref="activeName" v-bind:style="{'--y': messageTop }">
      {{activeContact.firstName}} {{activeContact.lastName}}
     </div>
    </div>
    <div class="contact__details" ref="activeDetails" v-bind:style="{top: messageTop + 'px', '--y': 100, '--t': messageTop }">
     <dl class="contact-details">
      <dt v-if="activeContact.number">
       <button class="contact-details__action">
       </button>
      </dt>
      <dd class="contact-details__detail" v-if="activeContact.number">
       {{activeContact.number}}
      </dd>
      <dt v-if="activeContact.homenumber">
       <button class="contact-details__action">
       </button>
      </dt>
      <dd class="contact-details__detail" v-if="activeContact.homenumber">
       {{activeContact.homenumber}}
      </dd>
      <dt v-if="activeContact.email">
       <button class="contact-details__action">
       </button>
      </dt>
      <dd class="contact-details__detail" v-if="activeContact.email">
       {{activeContact.email}}
      </dd>
      <dt v-if="activeContact.whatsapp">
       <button class="contact-details__action">
       </button>
      </dt>
      <dd class="contact-details__detail" v-if="activeContact.whatsapp">
       {{activeContact.whatsapp}}
      </dd>
      <dt v-if="activeContact.twitter">
       <button class="contact-details__action">
       </button>
      </dt>
      <dd class="contact-details__detail" v-if="activeContact.twitter">
       {{activeContact.twitter}}
      </dd>
      <dt v-if="activeContact.instagram">
       <button class="contact-details__action">
       </button>
      </dt>
      <dd class="contact-details__detail" v-if="activeContact.instagram">
       {{activeContact.instagram}}
      </dd>
      <dt v-if="activeContact.codepen">
       <button class="contact-details__action">
       </button>
      </dt>
      <dd class="contact-details__detail" v-if="activeContact.codepen">
       {{activeContact.codepen}}
      </dd>
     </dl>
    </div>
    <ul class="phonebook__contacts--fake phonebook__contacts--fake-top" ref="topFake" v-bind:style="{bottom: fakePosOne + 'px'}" v-if="detailOpened">
     <li :class="[i === (active &gt; 5 ? 4 : active - 1) ? 'phonebook__contact--prev' : '']" class="phonebook__contact" v-for="contact, i in contacts.slice(active - (active &gt; 5 ? 5 : active), active)">
      <img :src="contact.avatar" class="phonebook__contact-avatar"/>
      <div class="phonebook__contact-name">
       {{contact.firstName}} {{contact.lastName}}
      </div>
     </li>
    </ul>
    <ul class="phonebook__contacts--fake phonebook__contacts--fake-bottom" ref="bottomFake" v-bind:style="{top: fakePosTwo + 'px'}" v-if="detailOpened">
     <li :class="[i === 0 ? 'phonebook__contact--next' : '']" class="phonebook__contact" v-for="contact, i in contacts.slice(active + 1, active + 5)">
      <img :src="contact.avatar" class="phonebook__contact-avatar"/>
      <div class="phonebook__contact-name">
       {{contact.firstName}} {{contact.lastName}}
      </div>
     </li>
    </ul>
   </article>
   <ul class="phonebook__contacts" ref="contacts" v-bind:class="{ 'phonebook__contacts--opening': detailOpened }">
    <li :class="[i === active ? 'phonebook__contact--active' : '', i === next ? 'phonebook__contact--next' : '', i === prev ? 'phonebook__contact--prev' : '']" class="phonebook__contact" v-for="contact, i in contacts" v-on:click="() =&gt; selectContact(i, contact)">
     <img :src="contact.avatar" class="phonebook__contact-avatar"/>
     <div class="phonebook__contact-name">
      {{contact.firstName}} {{contact.lastName}}
     </div>
    </li>
   </ul>
  </div>
 </body>
</html>
