amattu2/offline.html

## offline.html
<html>
  <!-- Alec M., 2021 -->
  <head>
    <title>Offline Example</title>
    <style>
      /* Standard Items */
      html, body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }

      /* Custom Elements */
      .offline {
        position: fixed;
        display: none;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #f2f2f2;
      }

      .offline.active {
        display: block;
      }

      .offline[data-hidden="true"] {
        display: none !important;
      }

      .offline-case {
        margin: 0 auto;
        width: 750px;
        max-width: 95%;
        padding: 45px 20px;
      }

      .offline-header {
        border-radius: 6px;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08);
        padding: 35px;
        background: #fff;
      }

      .offline-title {
        font-size: 36px;
        color: #262626;
        margin-bottom: 10px;
      }

      .offline-desc {
        font-size: 16px;
        color: #3b3b3b;
      }

      .offline-exit {
        position: absolute;
        top: 25px;
        right: 25px;
        font-size: 52px;
        line-height: 26px;
        font-weight: 300;
        color: #3b3b3b;
        opacity: 0.7;
        cursor: pointer;
        transition: all 0.1s linear;
      }

      .offline-exit:hover {
        color: #262626;
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class='offline active' data-hidden="false">
      <!-- Offline Item Case -->
      <div class='offline-case'>
        <!-- Notice -->
        <div class='offline-header'>
          <div class='offline-title'>You're offline...</div>
          <div class='offline-desc'>This application can only perform when connected to a network. The available offline utilities are linked below.</div>
        </div>
      </div>

      <!-- Offline Exit Btn -->
      <div class='offline-exit' onclick="this.parentElement.classList.remove('active'); this.parentElement.dataset.hidden = true;">&times;</div>
    </div>

    <script>
      window.onoffline = function(e) { console.log('offline', e) }
      window.ononline = function(e) { console.log('online', e) }
    </script>
  </body>
</html>
	<html>
	<!-- Alec M., 2021 -->
	<head>
	<title>Offline Example</title>
	<style>
	/* Standard Items */
	html, body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	}

	/* Custom Elements */
	.offline {
	position: fixed;
	display: none;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: #f2f2f2;
	}

	.offline.active {
	display: block;
	}

	.offline[data-hidden="true"] {
	display: none !important;
	}

	.offline-case {
	margin: 0 auto;
	width: 750px;
	max-width: 95%;
	padding: 45px 20px;
	}

	.offline-header {
	border-radius: 6px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08);
	padding: 35px;
	background: #fff;
	}

	.offline-title {
	font-size: 36px;
	color: #262626;
	margin-bottom: 10px;
	}

	.offline-desc {
	font-size: 16px;
	color: #3b3b3b;
	}

	.offline-exit {
	position: absolute;
	top: 25px;
	right: 25px;
	font-size: 52px;
	line-height: 26px;
	font-weight: 300;
	color: #3b3b3b;
	opacity: 0.7;
	cursor: pointer;
	transition: all 0.1s linear;
	}

	.offline-exit:hover {
	color: #262626;
	opacity: 1;
	}
	</style>
	</head>
	<body>
	<div class='offline active' data-hidden="false">
	<!-- Offline Item Case -->
	<div class='offline-case'>
	<!-- Notice -->
	<div class='offline-header'>
	<div class='offline-title'>You're offline...</div>
	<div class='offline-desc'>This application can only perform when connected to a network. The available offline utilities are linked below.</div>
	</div>
	</div>

	<!-- Offline Exit Btn -->
	<div class='offline-exit' onclick="this.parentElement.classList.remove('active'); this.parentElement.dataset.hidden = true;">×</div>
	</div>

	<script>
	window.onoffline = function(e) { console.log('offline', e) }
	window.ononline = function(e) { console.log('online', e) }
	</script>
	</body>
	</html>