pixelfed/public/offline.html

62 lines
11 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="/css/app.css">
<title>You are offline</title>
<style>
h1 {
text-align: center;
color: #000;
}
p {
text-align: center;
margin-block: 1rem;
}
button {
display: inline-block;
}
</style>
</head>
<body>
<div class="mt-5 pt-5">
<div>
<p>
<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>icon/color/svg/pixelfed-icon-color</title> <desc>Created with Sketch.</desc> <defs> <rect id="path-1" x="0" y="0.112107623" width="50" height="49.7757848"></rect> <linearGradient x1="100%" y1="55.8067876%" x2="0%" y2="60.1177402%" id="linearGradient-3"> <stop stop-color="#FF5C34" offset="0%"></stop> <stop stop-color="#EB0256" offset="100%"></stop> </linearGradient> <linearGradient x1="33.0892153%" y1="100%" x2="68.9900955%" y2="15.3101693%" id="linearGradient-4"> <stop stop-color="#A63FDB" offset="0%"></stop> <stop stop-color="#FF257E" offset="100%"></stop> </linearGradient> <linearGradient x1="14.7223019%" y1="50%" x2="94.315299%" y2="67.5256558%" id="linearGradient-5"> <stop stop-color="#00FFF0" offset="0%"></stop> <stop stop-color="#0087FF" offset="100%"></stop> </linearGradient> <linearGradient x1="81.2260936%" y1="10.0128769%" x2="20.8151903%" y2="74.4920673%" id="linearGradient-6"> <stop stop-color="#17C934" offset="0%"></stop> <stop stop-color="#03FF6E" offset="100%"></stop> </linearGradient> <linearGradient x1="50%" y1="111.913008%" x2="30.5601577%" y2="0%" id="linearGradient-7"> <stop stop-color="#FFB000" offset="0%"></stop> <stop stop-color="#FF7725" offset="100%"></stop> </linearGradient> <path d="M25.8796198,24.6636771 C25.5187511,17.8623246 19.644178,12.6376937 12.7583935,12.9941375 C5.87260905,13.3505813 0.583119676,19.1531217 0.94398835,25.9544743 L0.954359402,26.1499392 C0.924772259,25.6582574 0.909768036,25.162698 0.909768036,24.6636771 C0.909768036,14.5077362 7.12441451,5.78550566 16.0023658,2.00478143 L16.5257487,1.7959139 C22.9188985,-0.755414121 30.1955057,2.29544903 32.7785059,8.61020748 C35.3615061,14.9249659 32.2727696,22.1123491 25.8796198,24.6636771 Z" id="path-8"></path> <path d="M16.3387661,1.87053346 L16.5257487,1.7959139 C22.9188985,-0.755414121 30.1955057,2.29544903 32.7785059,8.61020748 C35.3615061,14.9249659 32.2727696,22.1123491 25.8796198,24.6636771 C25.8261894,23.6566658 25.6518881,22.6842191 25.3713301,21.7593344 C28.8012958,19.9026454 31.1268503,16.3032843 31.1268503,12.167421 C31.1268503,6.13067623 26.1723508,1.23692769 20.060666,1.23692769 C18.7548626,1.23692769 17.5018839,1.46032366 16.3387661,1.87053346 Z" id="path-9"></path> <linearGradient x1="-81.3646199%" y1="59.6233723%" x2="121.418067%" y2="72.057922%" id="linearGradient-10"> <stop stop-color="#9EE85D" offset="0%"></stop> <stop stop-color="#0ED061" offset="100%"></stop> </linearGradient> <path d="M28.3794511,9.27014825 L28.5664337,9.1955287 C34.9595835,6.64420067 42.2361907,9.69506383 44.8191909,16.0098223 C47.4021911,22.3245807 44.3134546,29.5119639 37.9203048,32.0632919 C37.8668744,31.0562806 37.6925731,30.0838339 37.4120151,29.1589492 C40.8419808,27.3022602 43.1675353,23.7028991 43.1675353,19.5670358 C43.1675353,13.530291 38.2130358,8.63654249 32.101351,8.63654249 C30.7955476,8.63654249 29.5425689,8.85993845 28.3794511,9.27014825 Z" id="path-11"></path> <linearGradient x1="45.510285%" y1="116.818646%" x2="0%" y2="-4.0376427%" id="linearGradient-12"> <stop stop-color="#21EFE3" offset="0%"></stop> <stop stop-color="#2598FF" offset="100%"></stop> </linearGradient> <path d="M25.1352415,22.7323503 L25.3222242,22.6577307 C31.7153739,20.1064027 38.9919812,23.1572658 41.5749814,29.4720243 C44.1579816,35.7867827 41.069245,42.9741659 34.6760953,45.5254939 C34.6226649,44.5184826 34.4483636,43.5460359 34.1678055,42.6211512 C37.5977712,40.7644622 39.9233257,37.1651011 39.9233257,33.0292378 C39.9233257,26.992493 34.9688263,22.0987445 28.8571415,22.0987445 C27.5513381,22.0987445 26.2983594,22.3221405 25.1352415,22.7323503 Z" id="path-13"></path> <linearGradient x1="100%" y1="58.2065614%" x2="-89.649052%" y2="74.3165445%" id="linearGradient-14"> <stop stop-color="#A63FDB" offset="0%"></stop> <stop stop-color="#FF257E" offset="100%"></stop> </linearGradient> <path d="M10.6540931,23.7648224 L10.8410757,23.6902028 C17.2342255,21.1388748 24.5108328,24.1897379 27.093833,30.5044964 C29.67
</p>
<h1>You are offline</h1>
<p>Click the button below to try reloading.</p>
<p>
<button type="button" class="btn btn-outline-dark">⤾ Reload</button>
</p>
</div>
</div>
<script>
document.querySelector("button").addEventListener("click", () => {
window.location.reload();
});
window.addEventListener('online', () => {
window.location.reload();
});
async function checkNetworkAndReload() {
try {
const response = await fetch('.');
if (response.status >= 200 && response.status < 500) {
window.location.reload();
return;
}
} catch {
}
window.setTimeout(checkNetworkAndReload, 2500);
}
checkNetworkAndReload();
</script>
</body>
</html>