Created
August 20, 2019 13:46
-
-
Save vickonrails/9ef652915e7f6b612eb5b7c8c07f5f14 to your computer and use it in GitHub Desktop.
An example of an app that notifies the user of offline and online states
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>Offline/Online Demo</title> | |
<style> | |
* { | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
} | |
.container { | |
padding: 0 20px; | |
max-width: 800px; | |
margin: 0 auto; | |
} | |
p { | |
margin-bottom: 1.8em | |
} | |
h1 { | |
font-size: 4em; | |
line-height: 1; | |
margin: 2em 0 .5em; | |
} | |
p, | |
li, | |
a { | |
font-size: 18px; | |
line-height: 1.5; | |
} | |
.bold { | |
font-weight: bold | |
} | |
.offline-indicator.offline { | |
display: block | |
} | |
.offline-indicator { | |
display: none; | |
position: fixed; | |
z-index: 20; | |
left: 50%; | |
transform: translateX(-50%); | |
bottom: 10px; | |
background: rgba(0, 0, 0, 0.8); | |
color: #fff; | |
width: 70%; | |
max-width: 300px; | |
border-radius: 100px; | |
padding: 6px 12px; | |
box-shadow: 0 0 3px rgba(0, 0, 0, .2); | |
} | |
.offline-indicator p { | |
margin: 0; | |
line-height: 1.25; | |
text-align: center | |
} | |
main { | |
margin-bottom: 2em; | |
} | |
svg { | |
position: relative; | |
bottom: -4px; | |
} | |
</style> | |
</head> | |
<body> | |
<header class="header"> | |
<div class="container"> | |
<h1>Kafka on the Shore</h1> | |
</div> | |
</header> | |
<main class="main"> | |
<div class="container"> | |
<p> | |
Sometimes fate is like a small sandstorm that keeps changing directions. You change direction but the | |
sandstorm chases you. You turn again, but the storm adjusts. Over and over you play this out, like some | |
ominous dance with death just before dawn. Why? Because this storm isn’t something that blew in from far | |
away, something that has nothing to do with you. </p> | |
<p>This storm is you. Something inside of you. So all you | |
can do is give in to it, step right inside the storm, closing your eyes and plugging up your ears so the | |
sand doesn’t get in, and walk through it, step by step. There’s no sun there, no moon, no direction, no | |
sense of time. Just fine white sand swirling up into the sky like pulverized bones. That’s the kind of | |
sandstorm you need to imagine. | |
</p> | |
<p> | |
And you really will have to make it through that violent, metaphysical, symbolic storm. No matter how | |
metaphysical or symbolic it might be, make no mistake about it: it will cut through flesh like a | |
thousand razor blades. People will bleed there, and you will bleed too. Hot, red blood. You’ll catch | |
that blood in your hands, your own blood and the blood of others. | |
</p> | |
<p> | |
And once the storm is over you won’t remember how you made it through, how you managed to survive. You | |
won’t even be sure, in fact, whether the storm is really over. But one thing is certain. When you come | |
out of the storm you won’t be the same person who walked in. That’s what this storm’s all about. | |
</p> | |
<p class="bold"><i>–Haruki Murakami, Kafka On The Shore</i></p> | |
</div> | |
<div class="offline-indicator"> | |
<p><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" | |
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" | |
class="feather feather-cloud-off"> | |
<path | |
d="M22.61 16.95A5 5 0 0 0 18 10h-1.26a8 8 0 0 0-7.05-6M5 5a8 8 0 0 0 4 15h9a5 5 0 0 0 1.7-.3"> | |
</path> | |
<line x1="1" y1="1" x2="23" y2="23"></line> | |
</svg> | |
</span> | |
<span>You seem to be offline</span></p> | |
</div> | |
</main> | |
<script> | |
(function () { | |
const offlineIndicator = document.querySelector('.offline-indicator'), | |
onlineStatus = e => { | |
navigator.onLine ? | |
(offlineIndicator.classList.remove('offline')) : | |
(offlineIndicator.classList.add('offline')); | |
} | |
window.addEventListener('load', onlineStatus); | |
window.addEventListener('online', onlineStatus); | |
window.addEventListener('offline', onlineStatus); | |
})(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment