lthn.io/public/errors/503.html
Claude 77cc45dd83
feat: lthn.io CorePHP app — TLD website + blockchain services
Modules:
- Chain: daemon RPC client (DaemonRpc singleton, cached queries)
- Explorer: block browser, tx viewer, alias directory, search, stats API
- Names: .lthn TLD registrar portal (availability check, lookup, directory)
- Trade: scaffold (DEX frontend + API)
- Pool: scaffold (mining pool dashboard)

Replaces 5 Node.js containers (5.9GB) with one FrankenPHP app.
Built on CorePHP framework pattern from host.uk.com.

Co-Authored-By: Charon <charon@lethean.io>
2026-04-03 16:13:55 +01:00

322 lines
12 KiB
HTML

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Be Right Back - Host UK</title>
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--slate-50: #f8fafc;
--slate-100: #f1f5f9;
--slate-200: #e2e8f0;
--slate-300: #cbd5e1;
--slate-400: #94a3b8;
--slate-500: #64748b;
--slate-600: #475569;
--slate-700: #334155;
--slate-800: #1e293b;
--slate-900: #0f172a;
--slate-950: #020617;
--violet-400: #a78bfa;
--violet-500: #8b5cf6;
--violet-600: #7c3aed;
}
html, body {
height: 100%;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: linear-gradient(135deg, var(--slate-950) 0%, var(--slate-900) 50%, #1a1a2e 100%);
color: var(--slate-100);
-webkit-font-smoothing: antialiased;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 2rem;
text-align: center;
position: relative;
overflow: hidden;
}
/* Animated background gradient */
body::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 30% 30%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
radial-gradient(circle at 70% 70%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
animation: pulse 8s ease-in-out infinite;
z-index: -1;
}
@keyframes pulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 1; transform: scale(1.1); }
}
.container {
max-width: 32rem;
z-index: 1;
}
.logo {
width: 80px;
height: 80px;
margin: 0 auto 2rem;
opacity: 0.9;
}
.logo svg {
width: 100%;
height: 100%;
}
h1 {
font-size: 2.5rem;
font-weight: 700;
color: var(--slate-100);
margin-bottom: 1rem;
letter-spacing: -0.025em;
}
.status-code {
display: inline-block;
font-size: 0.875rem;
font-weight: 600;
color: var(--violet-400);
background: rgba(139, 92, 246, 0.1);
padding: 0.25rem 0.75rem;
border-radius: 9999px;
margin-bottom: 1.5rem;
border: 1px solid rgba(139, 92, 246, 0.2);
}
p {
font-size: 1.125rem;
color: var(--slate-400);
line-height: 1.75;
margin-bottom: 2rem;
}
.actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: 0.5rem;
text-decoration: none;
transition: all 0.2s ease;
}
.btn-primary {
background: linear-gradient(135deg, var(--violet-600), var(--violet-500));
color: white;
box-shadow: 0 4px 14px 0 rgba(139, 92, 246, 0.3);
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px 0 rgba(139, 92, 246, 0.4);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.05);
color: var(--slate-300);
border: 1px solid var(--slate-700);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--slate-600);
}
.status-info {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--slate-800);
}
.status-info p {
font-size: 0.875rem;
color: var(--slate-500);
margin: 0;
}
.status-info a {
color: var(--violet-400);
text-decoration: none;
}
.status-info a:hover {
text-decoration: underline;
}
/* Raven logo SVG inline */
.raven-logo {
fill: currentColor;
color: var(--slate-200);
}
</style>
</head>
<body>
<div class="container">
<div class="logo">
<svg viewBox="0 0 100 100" class="raven-logo" xmlns="http://www.w3.org/2000/svg">
<path d="M50 10 C30 10 15 30 15 50 C15 70 30 90 50 90 C70 90 85 70 85 50 C85 30 70 10 50 10 M35 35 C38 35 40 37 40 40 C40 43 38 45 35 45 C32 45 30 43 30 40 C30 37 32 35 35 35 M50 75 C40 75 32 65 32 55 L68 55 C68 65 60 75 50 75 M65 45 C62 45 60 43 60 40 C60 37 62 35 65 35 C68 35 70 37 70 40 C70 43 68 45 65 45" fill="currentColor"/>
</svg>
</div>
<span class="status-code">503 Service Unavailable</span>
<h1>I'll be right back</h1>
<p>
I'm performing some maintenance to bring you an even better experience.
This usually takes just a few minutes.
</p>
<div class="actions">
<a href="/" class="btn btn-primary" onclick="location.reload(); return false;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
</svg>
Try Again
</a>
<a href="https://status.host.uk.com" class="btn btn-secondary" target="_blank">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<path d="M12 6v6l4 2"/>
</svg>
Check Status
</a>
</div>
<div class="status-info">
<p>Need help? Contact <a href="mailto:support@host.uk.com">support@host.uk.com</a></p>
</div>
<!-- HADES data placeholder - populated by error handler -->
<div id="hades-data" style="display:none;"><!-- HADES_PLACEHOLDER --></div>
<!-- Error reference (populated by server) -->
<div id="error-ref" class="error-ref" style="display: none;">
<button onclick="toggleError()" class="error-toggle">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
</svg>
Error Reference
</button>
<div id="error-details" class="error-details" style="display: none;">
<p>Copy this code when contacting support:</p>
<pre id="error-code"></pre>
<button onclick="copyError()" class="btn-copy">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
</svg>
Copy to Clipboard
</button>
</div>
</div>
</div>
<script>
// Extract HADES data from placeholder or HTML comments
(function() {
// First try the in-body placeholder
const placeholder = document.getElementById('hades-data');
let hadesBlob = null;
if (placeholder) {
const content = placeholder.innerHTML.trim();
const match = content.match(/HADES:([A-Za-z0-9+\/=]+)/);
if (match) {
hadesBlob = match[1];
}
}
// Fallback to searching full HTML (for legacy/comment-based injection)
if (!hadesBlob) {
const html = document.documentElement.outerHTML;
const match = html.match(/HADES:([A-Za-z0-9+\/=]+)/);
if (match) {
hadesBlob = match[1];
}
}
if (hadesBlob) {
document.getElementById('error-ref').style.display = 'block';
document.getElementById('error-code').textContent = hadesBlob;
}
})();
function toggleError() {
const details = document.getElementById('error-details');
details.style.display = details.style.display === 'none' ? 'block' : 'none';
}
function copyError() {
const code = document.getElementById('error-code').textContent;
navigator.clipboard.writeText(code).then(() => {
const btn = document.querySelector('.btn-copy');
btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Copied!';
setTimeout(() => {
btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy to Clipboard';
}, 2000);
});
}
</script>
<style>
.error-ref { margin-top: 2rem; text-align: center; }
.error-toggle {
display: inline-flex; align-items: center; gap: 0.5rem;
background: transparent; border: 1px solid var(--slate-700);
color: var(--slate-500); padding: 0.5rem 1rem;
border-radius: 0.375rem; font-size: 0.75rem;
cursor: pointer; transition: all 0.2s;
}
.error-toggle:hover { border-color: var(--slate-600); color: var(--slate-400); }
.error-details {
margin-top: 1rem; text-align: left;
background: rgba(0, 0, 0, 0.3); border: 1px solid var(--slate-800);
border-radius: 0.5rem; padding: 1rem;
}
.error-details p { font-size: 0.75rem; color: var(--slate-500); margin-bottom: 0.5rem; }
.error-details pre {
background: var(--slate-950); border: 1px solid var(--slate-800);
border-radius: 0.375rem; padding: 0.75rem; font-size: 0.625rem;
color: var(--slate-400); overflow-x: auto; word-break: break-all;
white-space: pre-wrap; max-height: 100px; margin-bottom: 0.75rem;
}
.btn-copy {
display: inline-flex; align-items: center; gap: 0.5rem;
background: var(--slate-800); border: 1px solid var(--slate-700);
color: var(--slate-300); padding: 0.5rem 1rem;
border-radius: 0.375rem; font-size: 0.75rem;
cursor: pointer; transition: all 0.2s;
}
.btn-copy:hover { background: var(--slate-700); }
</style>
</body>
</html>