Skip to content

Instantly share code, notes, and snippets.

@yohannawaliya

yohannawaliya/index.pug

Created August 13, 2023 14:08
Show Gist options
  • Save yohannawaliya/163b00dfb686cd28534310208b162ed1 to your computer and use it in GitHub Desktop.
Save yohannawaliya/163b00dfb686cd28534310208b162ed1 to your computer and use it in GitHub Desktop.
Download ZIP
Kindle Paperwhite Simulator
Raw
index.pug
.container.d-flex.justify-content-center.align-items-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/RF4p4rTM-2s" target="_blank").py-1.px-3.m-1.text-small.text-uppercase BG Image Credit
Raw
kindle-paperwhite-simulator.markdown

Kindle Paperwhite Simulator

Interactive Kindle Paperwhite Simulator

Credits: Amazon (Device) Neil deGrasse Tyson (Books) Bryan Goff (Background Image)

A Pen by Iah Buenacosa on CodePen.

License.

Raw
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(); }) })
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Raw
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://images.unsplash.com/photo-1506703719100-a0f3a48c0f86?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80') no-repeat center center
background-size: cover
// background-color: #D5DAE8
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
.container
min-height: 100vh
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment