Skip to content

Instantly share code, notes, and snippets.

@aashari
Last active July 26, 2026 07:18
Show Gist options
  • Select an option

  • Save aashari/eb609c043f7df25ba3b102376a1209a4 to your computer and use it in GitHub Desktop.

Select an option

Save aashari/eb609c043f7df25ba3b102376a1209a4 to your computer and use it in GitHub Desktop.
Arumi CF 502/5xx auto-refresh error page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Universal baseline, works with NO JavaScript: reload every 5s until the origin is back. -->
<meta http-equiv="refresh" content="5">
<title>Reconnecting…</title>
<style>
*{box-sizing:border-box} html,body{height:100%;margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
background:#0f0d0b;color:#f4efe9;display:flex;align-items:center;justify-content:center;padding:24px}
.wrap{max-width:440px;text-align:center}
.spin{width:46px;height:46px;margin:0 auto 22px;border:4px solid #34302a;border-top-color:#c99a5b;
border-radius:50%;animation:s 1s linear infinite}
@keyframes s{to{transform:rotate(360deg)}}
h1{font-size:20px;font-weight:600;margin:0 0 8px}
p{font-size:14px;line-height:1.55;color:#c9c1b6;margin:0 0 6px}
.st{font-size:12px;color:#8a8176;margin-top:14px}
details{margin-top:26px;text-align:left;font-size:11px;color:#6f675d}
summary{cursor:pointer;color:#8a8176}
.cf{margin-top:10px;padding:10px;background:#171310;border-radius:8px;overflow:auto}
</style>
</head>
<body>
<div class="wrap">
<div class="spin"></div>
<h1>Reconnecting…</h1>
<p>This page is briefly unavailable and will reopen automatically once it's ready — no need to refresh.</p>
<p>Sedang tersambung kembali dan akan terbuka otomatis — tidak perlu di-refresh.</p>
<p class="st" id="st">Retrying…</p>
<details><summary>Details</summary><div class="cf">::CLOUDFLARE_ERROR_500S_BOX::</div></details>
</div>
<script>
// Generic across all zones: poll the site root; the moment the origin answers ANYTHING but a 5xx
// (200/redirect/404 all mean the server is back up), reload — faster than the 5s meta tick.
var n=0;
function tick(){
n++; var el=document.getElementById('st'); if(el) el.textContent='Retrying… ('+n+')';
fetch('/',{method:'HEAD',cache:'no-store'}).then(function(r){
if(r && r.status && r.status < 500){ location.reload(); } else { setTimeout(tick,3000); }
}).catch(function(){ setTimeout(tick,3000); });
}
setTimeout(tick,2000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment