Kindle Paperwhite Simulator

index.pug

.container.d-flex.justify-content-center.py-5
  .kindle
    .screen
      // Page Controls
      .overlay.w-100.h-100.d-none
      .controls.w-100.h-100.d-none
        .top.d-flex.justify-content-center.align-items-center Tap here to see menu
        .left.d-flex.justify-content-center.align-items-center Previous
        .center.d-flex.justify-content-center.align-items-center Tap here to exit menu
        .right.d-flex.justify-content-center.align-items-center Next
      // Main Menu
      .main-menu.w-100
        .notification-bar.d-flex.justify-content-between.px-3
          p Iah's Kindle
          .d-flex.justify-content-between.align-items-center
            i.fas.fa-wifi.mr-2.text-medium
            p 80%
            i.fas.fa-battery-three-quarters.mx-2
            p 9:36 PM
        // Settings Dropdown
        .settings-dropdown.w-100.d-none
          .d-flex.px-4.py-2.justify-content-between.options.border-bottom.border-top
            .d-flex.flex-column.align-items-center.justify-content-center.p-2
              i.fas.fa-plane.mb-2
              span.text-medium Airplane Mode
            .d-flex.flex-column.align-items-center.justify-content-center.p-2
              i.fas.fa-sync-alt.mb-2
              span.text-medium Sync Your Kindle 
            .d-flex.flex-column.align-items-center.justify-content-center.p-2
              i.fas.fa-cog.mb-2
              span.text-medium All Settings 
          .w-100.border-bottom.p-3
            .d-flex.justify-content-between
              p.text-small.text-uppercase.text-strong Light
              p.text-small.text-uppercase.text-strong.border.px-1 Max
            .d-flex.justify-content-between.align-items-center
              i.far.fa-sun
              hr.mx-2
              i.fas.fa-sun
        // Navigation Bar
        .navigation-bar.d-flex.justify-content-between.border-top.border-bottom
          .d-flex
            a.d-flex.flex-column.align-items-center.py-1.home-button
              i.fas.fa-home
              span.text-small.text-strong home
            a.d-flex.flex-column.align-items-center.py-1.back-button
              i.fas.fa-arrow-left
              span.text-small.text-strong back
            a(onclick="withDropdown('settings-dropdown')").d-flex.flex-column.align-items-center.py-1
              i.fas.fa-cog
              span.text-small.text-strong settings
            a.d-flex.flex-column.align-items-center.py-1
              i.fab.fa-goodreads
              span.text-small.text-strong goodreads
            a.d-flex.flex-column.align-items-center.py-1
              i.fas.fa-shopping-cart
              span.text-small.text-strong shop
          .border-left.border-right.d-flex.align-items-center.pl-3.pr-5
            i.fas.fa-search.mr-2
            span.text-muted
              input.search(type='text', placeholder='Search')
          .d-flex.align-items-center
            i(onclick="withDropdown('menu-dropdown')").fas.fa-ellipsis-v.text-center.h-100.d-flex.align-items-center.justify-content-center.menu-button
            .menu-dropdown.border.d-none
              ul.p-0.m-0
                li.py-2.px-3 Your Library
                li.py-2.px-3 Your Reading Lists
                li.py-2.px-3 Kindle Store
                li.py-2.px-3 Goodreads
                li.py-2.px-3 Kindle FreeTime
                li.py-2.px-3 Vocabulary Builder
                li.py-2.px-3 Experimental Browser
                li.py-2.px-3.border-top.border-bottom Settings
                li.py-2.px-3 View Special Offers
                li.py-2.px-3 Create New Collection
        // Page Menu
        .page-menu.w-100.border-bottom.d-none
          .d-flex.justify-content-between
            p(onclick="withDropdown('page-display-dropdown')").d-flex.align-items-center.py-2.px-3.text-uppercase.text-strong
              i.far.fa-file-alt
              span.mx-2 Page Display
              i.fas.fa-angle-down
            .d-flex
              p.text-uppercase.py-2.px-3.text-strong Go To
              i.far.fa-bookmark.py-2.px-3
      // Page Menu Bottom
      .page-menu-bottom.w-100.d-none
        .h-100.border-top.d-flex.flex-column.justify-content-center.align-items-center
          p.text-strong Chapter 1
          p.text-small.my-2 Loc 320 of 5047 | 3 mins left in chapter | 6%
          .d-flex
            i.fas.fa-columns.py-1.px-4
            i.fas.fa-th.py-1.px-4
      // Page Display Dropdown
      .page-display-dropdown.border.d-none
        ul
          li.px-3.py-2 Font & Page Settings
            i.fas.fa-angle-right.ml-4
          li.px-3.py-2.border-bottom.d-flex.align-items-center
            i.far.fa-file-alt.mr-3
            div.d-flex.justify-content-between.w-100.align-items-center
              span Custom
              i.fas.fa-check
          li.px-3.py-2 
            i.far.fa-file-alt.mr-3
            span Compact
          li.px-3.py-2
            i.far.fa-file-alt.mr-3
            span Standard
          li.px-3.py-2
            i.far.fa-file-alt.mr-3
            span Large
      // Homepage
      .homepage
        .library.mx-3.pt-2.pb-4.d-flex.border-bottom
          .left.pr-3
            p.text-uppercase.text-medium.text-strong.mb-2 Your Library » 
            .d-flex
              img.main.view-book.pluto(src='https://res.cloudinary.com/dqfgwgif9/image/upload/v1549463565/pluto-cover.png' draggable="false")
              .d-flex.flex-column.ml-2
                img.mb-2.black-hole.view-book(src='https://res.cloudinary.com/dqfgwgif9/image/upload/v1549463565/blackhole-cover.png' draggable="false")
                img.astrophysics.view-book(src='https://res.cloudinary.com/dqfgwgif9/image/upload/v1549463565/astro-cover.png' draggable="false")
          .right
            p.text-strong.text-medium.text-uppercase.mb-2 Your Reading List »
            .border-bottom.pb-3.pr-3.mb-3.view-book.astrophysics
              p.text-serif Astrophysics for People in a Hurry
              p.text-small.text-serif.text-italic Neil deGrasse Tyson
            .border-bottom.pb-3.pr-3.mb-3.view-book.black-hole
              p.text-serif Death by Black Hole: And Other Cosmic...
              p.text-small.text-serif.text-italic Neil deGrasse Tyson
            .border-bottom.pb-3.pr-3.view-book.pluto
              p.text-serif The Pluto Files: The Rise and Fall of...
              p.text-small.text-serif.text-italic Neil deGrasse Tyson
        .py-2.d-flex.flex-column.border-bottom.mx-3
          p.text-uppercase.text-medium.text-strong.mb-2 Most Wished for Kindle Books »
          img(src='https://res.cloudinary.com/dqfgwgif9/image/upload/v1549698728/Kindle/most-wished.png' draggable="false").w-100
        .py-2.d-flex.flex-column.border-bottom.mx-3
          p.text-uppercase.text-medium.text-strong.mb-2 Most Read Non-fiction Books on Amazon Charts »
          img(src='https://res.cloudinary.com/dqfgwgif9/image/upload/v1549698728/Kindle/non-fiction.png' draggable="false").w-100
        .py-2.d-flex.flex-column.border-bottom.mx-3.mb-5
          p.text-uppercase.text-medium.text-strong.mb-2 Best Sellers in Kindle Store »
          img(src='https://res.cloudinary.com/dqfgwgif9/image/upload/v1549698728/Kindle/best-seller.png' draggable="false").w-100
      // Book: The Pluto Files
      .pluto-book.book.w-100.h-100.d-none
        img.page.active(src='https://res.cloudinary.com/dqfgwgif9/image/upload/v1549690199/Kindle/pluto-1.png' draggable="false")
        img.page(src='https://res.cloudinary.com/dqfgwgif9/image/upload/v1549690199/Kindle/pluto-2.png' draggable="false")
        img.page(src='https://res.cloudinary.com/dqfgwgif9/image/upload/v1549690199/Kindle/pluto-3.png' draggable="false")
        img.page(src='https://res.cloudinary.com/dqfgwgif9/image/upload/v1549690199/Kindle/pluto-4.png' draggable="false")
        img.page(src='https://res.cloudinary.com/dqfgwgif9/image/upload/v1549690199/Kindle/pluto-5.png' draggable="false")
      // Book: Astrophysics for People in a Hurry
      .astro-book.book.w-100.h-100.d-none
        img.page.active(src='https://res.cloudinary.com/dqfgwgif9/image/upload/v1549690199/Kindle/astro-1.png' draggable="false")
        img.page(src='https://res.cloudinary.com/dqfgwgif9/image/upload/v1549690199/Kindle/astro-1.png' draggable="false")
        img.page(src='https://res.cloudinary.com/dqfgwgif9/image/upload/v1549690199/Kindle/astro-3.png' draggable="false")
        img.page(src='https://res.cloudinary.com/dqfgwgif9/image/upload/v1549690199/Kindle/astro-4.png' draggable="false")
        img.page(src='https://res.cloudinary.com/dqfgwgif9/image/upload/v1549690199/Kindle/astro-5.png' draggable="false")
      // Book: Death by Black Hole
      .black-hole-book.book.w-100.h-100.d-none
        img.page.active(src='https://res.cloudinary.com/dqfgwgif9/image/upload/v1549690199/Kindle/black-hole-1.png' draggable="false")
        img.page(src='https://res.cloudinary.com/dqfgwgif9/image/upload/v1549690199/Kindle/black-hole-2.png' draggable="false")
        img.page(src='https://res.cloudinary.com/dqfgwgif9/image/upload/v1549690199/Kindle/black-hole-3.png' draggable="false")
.bg
  a(href="https://unsplash.com/photos/W8KTS-mhFUE" target="_blank").py-1.px-3.m-1.text-small.text-uppercase BG Image Credit

kindle-paperwhite-simulator.markdown

Kindle Paperwhite Simulator

Interactive Kindle Paperwhite Simulator

Credits: Amazon (Device) Neil deGrasse Tyson (Books) Billy Huynh @billy_huy (Background Image)

A Pen by Iah Buenacosa on CodePen.

License.

script.js

let query = document.querySelector.bind(document);
let queryAll = document.querySelectorAll.bind(document);

function read(book) {
  var book = {
    pages: queryAll(`.${book} .page`),
    currentPage: 0,
    next: query('.controls .right'), 
    prev: query('.controls .left')
  };

  function nextPage(book) {
    book.pages[book.currentPage].className = 'page';
    book.currentPage = (book.currentPage+1) % book.pages.length;
    book.pages[book.currentPage].className = 'page active';
  }

  function previousPage(book) {
    book.pages[book.currentPage].className = 'page';
    book.currentPage === 0 ? book.currentPage = book.pages.length - 1 : book.currentPage--;
    book.pages[book.currentPage].className = 'page active';
  }

  book.next.addEventListener('click', (e) => { nextPage(book); });
  book.prev.addEventListener('click', (e) => { previousPage(book); });
}

queryAll('.view-book').forEach((a) => {
  var chosenBook;
  a.addEventListener('click',() => {
    query('.homepage').classList.add('d-none')
    query('.main-menu').classList.add('d-none')
    query('.controls').classList.remove('d-none')
    if (a.classList.contains('pluto')) { chosenBook = 'pluto-book' }
    else if (a.classList.contains('astrophysics')) { chosenBook = 'astro-book' }
    else if (a.classList.contains('black-hole')) { chosenBook = 'black-hole-book' }
    query(`.${chosenBook}`).classList.remove('d-none')
    read(chosenBook)
  })
})

function withDropdown(dropdown) {
  query(`.${dropdown}`).classList.toggle('d-none') 
  query('.overlay').classList.toggle('d-none')
  query('.overlay').addEventListener('click', () => {
    query(`.${dropdown}`).classList.add('d-none') 
    query('.overlay').classList.add('d-none')
  })
}

function home() {
  query('.homepage').classList.remove('d-none')
  query('.main-menu').classList.remove('d-none','absolute')
  queryAll('.book').forEach((e) => { e.classList.add('d-none') })
  query('.controls').classList.add('d-none')
}

function centerControl() {
  queryAll('.main-menu, .page-menu, .page-menu-bottom, .page-display-dropdown ').forEach((e) => { e.classList.add('d-none') })
  query('.main-menu').classList.remove('absolute')
}

function topControl() {
  queryAll('.main-menu, .page-menu, .page-menu-bottom ').forEach((e) => { e.classList.remove('d-none') })
  query('.main-menu').classList.add('absolute')
}

query('.controls').addEventListener('click', () => { query('.controls').style.opacity = 0; })
query('.controls .top').addEventListener('click', () => { topControl(); })
query('.controls .center').addEventListener('click', () => { centerControl() })
queryAll('.home-button, .back-button').forEach((e) => { e.addEventListener('click', () => { centerControl(); home(); }) })

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.sass

$serifFont: 'Noto Serif', serif
$sansSerifFont: 'Ubuntu', sans-serif

=clickable() 
  cursor: pointer 

=hoverHighlight() 
  background: #333
  color: #fff !important

* 
  margin: 0
  padding: 0
  box-sizing: border-box

li,
p,
span 
  margin: 0 !important
  font-family: $sansSerifFont 
  font-size: 12px

li,
li span 
  list-style-type: none
  font-size: 14px

.text-small  
  font-size: 9px 
  
.text-medium  
  font-size: 10px 
  
.text-strong  
  font-weight: 700 !important 
  
.text-italic  
  font-style: italic 
  
.text-serif  
  font-family: $serifFont 

.absolute 
  z-index: 9999
  position: absolute
  top: 0
  left: 0

.kindle 
  z-index: 9
  height: 850px
  min-width: 610px
  padding: 80px 0 0 0
  background: #222
  border: 8px ridge #333
  border-radius: 30px
  
  &::after 
    content: 'Kindle'
    display: flex
    justify-content: center
    margin-top: -10px
    font-weight: 300
    font-size: 30px
    font-family: $sansSerifFont 
    color: #ccc
  
  .screen 
    position: relative
    width: 490px
    height: 655px
    margin: 0 auto 40px auto
    background-color: #fff
    border: 8px inset #222
    border-radius: 5px
    overflow: hidden
    
  .screen .overlay
    position: absolute
    top: 0
    left: 0
    background: rgba(0, 0, 0, 0)
  
  .screen .controls 
    z-index: 999
    position: absolute
    top: 0
    left: 0
    background: rgba(0, 0, 0, .5)
    color: yellow
    opacity: 1
    
    .top 
      width: 100%
      height: 80px
    
    .center 
      z-index: -1
      position: absolute
      width: 100%
      height: 100%
    
    .left,
    .right 
      width: 100px
      height: 100%
    
    .left  
      float: left 

    .right  
      float: right
      
    .top:hover,
    .left:hover,
    .right:hover,
    .center:hover  
      +clickable() 
  
  .settings-dropdown 
    position: absolute
    background: #fff
    
    hr 
      width: 100%
      border: none
      border-top-style: dashed
      border-width: 5px 
      color: #222
    
    .options div i  
      font-size: 25px 
      
    .options div:hover  
      +hoverHighlight()
      +clickable()
  
  .screen .main-menu 
    background: #fff
      
    li:hover,
    .page-menu p:hover  
      +hoverHighlight()
      
    .navigation-bar  
      .search
        all: unset
        width: 55px 
    
      a  
        width: 57px 

      .menu-button  
        width: 45px 

      .menu-dropdown 
        position: absolute
        top: 60px
        right: 0
        background: #fff
        overflow: hidden

      .menu-button:hover,
      a:hover,
      .menu-dropdown li:hover
        +hoverHighlight() 
        +clickable() 
  
  .page-menu-bottom 
    z-index: 999
    position: absolute
    bottom: 0
    left: 0
    height: 100px
    background: #fff
    
    div i 
      border: 1.5px solid #222
      border-radius: 2px
    
    div i:last-child 
      color: #555
      border-color: #555
    
  .page-display-dropdown
    z-index: 999
    top: 90px
    position: absolute
    background: #fff
    
    ul li:hover 
      +hoverHighlight()
      +clickable() 
  
  .screen .homepage 
    width: 97%
    height: 585px
    overflow-y: auto
    
    .library .left 
      img 
        height: 120px
        border: 1px solid black
      
      p,
      img  
        +clickable() 
        
      img.main  
        height: 250px 
    
    
    .library .right 
      p  
        width: 120px 
        +clickable() 
    
  .screen .book .page 
    position: absolute
    top: 0
    left: 0
    opacity: 0
    
    &.active 
      z-index: 2
      opacity: 1
    
  .screen .book img  
    width: 100% 

//

.bg 
  position: fixed
  top: 0
  left: 0
  width: 100vw
  height: 100vh
  background: url('https://res.cloudinary.com/dqfgwgif9/image/upload/v1549857275/photo-1496715976403-7e36dc43f17b.jpg') no-repeat center center
  background-size: cover
  
  a 
    color: #fff
    text-decoration: none 
    border-radius: 100px
    background: rgba(0, 0, 0, .6)
    +clickable()
  
.homepage::-webkit-scrollbar-track 
  margin: 40px 0
  background-color: #ccc
  border-radius: 100px

.homepage::-webkit-scrollbar 
  width: 7px
  background-color: #fff

.homepage::-webkit-scrollbar-thumb 
  background-color: #555
  border-radius: 10px

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />