View file modules/pwa/offline.html

File size: 2.49Kb
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>GOload File Sharing</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="theme-color" content="#5d80a6">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="application-name" content="GOload">

	<link rel="manifest" href="manifest.json">
	<link rel="shortcut icon" href="favicon.ico">

	<style>
*{outline:none;-webkit-box-sizing:border-box;box-sizing:border-box;text-decoration:none;margin:0;padding:0}::selection{background:#b3d4fc;color:#212121;text-shadow:none}body{font-family:'Roboto',sans-serif;font-size:15px;line-height:1.4;margin:0 auto;max-width:720px;background:#151D26;color:#f2f2f2;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0)}img{max-width:100%;vertical-align:middle}.err{text-align:center;width:100%;padding:40px 0;position:absolute;top:50%;transform:translateY(-50%)}.error-logo{display:inline-block;width:60px;height:60px;background:url(assets/img/icon_256.png) 50% 50% no-repeat;background-size:60px;border-radius:50%;margin-bottom:22px;box-shadow:0 2px 2px rgba(0,0,0,.32)}.error-title{font-size:36px;line-height:18px;color:#BBBEC2;margin-bottom:44px}.error-message{font-size:16px;line-height:18px;color:#8E9399;margin-bottom:30px;padding:0 20px}.offline .error-title{font-size:19px}.refresh{max-width:128px;text-align:center;background:#5d80a6;color:#fff;border-radius:8px;padding:6px 16px;font-size:16px;vertical-align:middle;white-space:nowrap;cursor:pointer}@media screen and (min-width:480px){.err{display:flex;justify-content:center;position:absolute;top:60%;left:50%;width:424px;text-align:left;margin:0 0 0 -212px}.error-logo{float:left;width:58px;height:58px;display:inline-block;background-size:58px}.error-text{margin-left:32px;max-width:333px}.error-title{font-size:60px;line-height:58px;margin-bottom:22px}.error-message{font-size:24px;line-height:36px;margin-bottom:22px;padding:0}.offline .error-title{font-size:28px}}
</style>
</head>
<body>

	<div class="err offline">
		<div class="error-logo"></div>
		<div class="error-text">
			<div class="error-title">No internet access</div>
			<div class="error-message">Check connection and refresh page</div>
			<div>
				<span id="refresh" class="refresh">Refresh</span>
			</div>
		</div>
	</div>

	<script>
		const refresh = document.getElementById('refresh');
		refresh.onclick = (e) => {
			e.preventDefault();
			if (navigator.onLine === true) {
				location.reload()
			}
		};
	</script>

</body>
</html>