vickonrails/offline-indicator.html

## offline-indicator.html
<!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>
	<!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>