502-error-page / index.html
tatht's picture
Hãy viết giúp tôi một màn hình lỗi 502 thật đẹp
ed5308e verified
<!DOCTYPE html>
<html lang="en" class="h-full scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>502 Bad Gateway</title>
<meta name="description" content="502 Bad Gateway — The server received an invalid response. Please try again later." />
<meta name="theme-color" content="#0f172a" />
<meta property="og:title" content="502 Bad Gateway" />
<meta property="og:description" content="The server received an invalid response. Please try again later." />
<meta property="og:type" content="website" />
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5 5h14M5 19h14M5 12h14'/%3E%3C/svg%3E" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: { sans: ['Inter', 'ui-sans-serif', 'system-ui'] },
colors: {
brand: {
50: '#eef2ff',
100: '#e0e7ff',
200: '#c7d2fe',
300: '#a5b4fc',
400: '#818cf8',
500: '#6366f1',
600: '#4f46e5',
700: '#4338ca',
800: '#3730a3',
900: '#312e81',
950: '#1e1b4b'
}
},
boxShadow: {
glow: '0 0 0 2px rgba(99, 102, 241, 0.15), 0 10px 30px -10px rgba(99, 102, 241, 0.35)',
'glow-strong': '0 0 0 2px rgba(168, 85, 247, 0.3), 0 25px 60px -12px rgba(168, 85, 247, 0.5)'
}
}
}
};
</script>
</head>
<body class="min-h-screen bg-slate-950 text-slate-200 antialiased selection:bg-brand-500/20 selection:text-white">
<!-- Background layers -->
<div aria-hidden="true" class="pointer-events-none fixed inset-0 -z-10">
<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-slate-900 via-slate-950 to-black"></div>
<div class="absolute inset-0 bg-[linear-gradient(to_right,_rgba(148,163,184,0.06)_1px,transparent_1px),linear-gradient(to_bottom,_rgba(148,163,184,0.06)_1px,transparent_1px)] bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_at_center,white,transparent_70%)]"></div>
<!-- Soft glows -->
<div class="absolute -top-24 left-1/2 h-96 w-96 -translate-x-1/2 rounded-full bg-brand-500/20 blur-3xl"></div>
<div class="absolute bottom-0 right-0 h-80 w-80 rounded-full bg-fuchsia-500/20 blur-3xl"></div>
<div class="absolute top-1/3 left-0 h-72 w-72 rounded-full bg-sky-500/15 blur-3xl"></div>
</div>
<main class="relative z-10 grid min-h-screen place-items-center p-6">
<div class="relative w-full max-w-2xl">
<!-- Card -->
<div class="relative rounded-3xl border border-white/10 bg-white/[0.04] p-8 shadow-glow backdrop-blur-xl">
<!-- Header -->
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-brand-500 to-fuchsia-500 shadow-glow-strong">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="9"></circle>
<path d="M5 5h14M5 19h14M5 12h14"></path>
</svg>
</div>
<span class="text-sm font-medium tracking-wide text-slate-400">502 Bad Gateway</span>
</div>
<div class="hidden text-xs text-slate-400 sm:block" id="error-time"></div>
</div>
<!-- Content -->
<div class="mt-8 grid gap-6 sm:mt-10">
<div class="space-y-2">
<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl">
Gateway received an invalid response
</h1>
<p class="max-w-prose text-slate-300">
The upstream server returned an error, so the request could not be completed. Please try again in a moment.
</p>
</div>
<div class="rounded-2xl border border-white/10 bg-black/20 p-4 text-sm text-slate-300">
<div class="flex items-start gap-3">
<div class="mt-0.5">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fca5a5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 7v6"></path>
<path d="M12 17h.01"></path>
</svg>
</div>
<div>
<p class="font-medium text-slate-200">What does this mean?</p>
<p class="mt-1 leading-relaxed">
A proxy server tried to reach the origin, but received an unexpected or invalid response. This usually indicates a temporary issue on the server side.
</p>
</div>
</div>
</div>
<!-- Actions -->
<div class="flex flex-col gap-3 sm:flex-row">
<button id="retryBtn" class="group inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-brand-500 to-fuchsia-500 px-5 py-3 font-semibold text-white shadow-glow transition hover:opacity-95 focus:outline-none focus:ring-2 focus:ring-brand-400/60 focus:ring-offset-2 focus:ring-offset-slate-950 active:scale-[0.98]">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M21 12a9 9 0 1 1-3-6.7"></path>
<path d="M21 3v6h-6"></path>
</svg>
Try again
</button>
<button id="backBtn" class="inline-flex items-center justify-center gap-2 rounded-xl border border-white/15 bg-white/5 px-5 py-3 font-semibold text-slate-200 transition hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/20 focus:ring-offset-2 focus:ring-offset-slate-950 active:scale-[0.98]">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M10 19l-7-7 7-7"></path>
<path d="M3 12h13a5 5 0 0 1 5 5v4"></path>
</svg>
Go back
</button>
<a href="/" class="inline-flex items-center justify-center gap-2 rounded-xl border border-white/15 bg-white/5 px-5 py-3 font-semibold text-slate-200 transition hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/20 focus:ring-offset-2 focus:ring-offset-slate-950 active:scale-[0.98]">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M3 10l9-7 9 7"></path>
<path d="M9 21V9h6v12"></path>
</svg>
Home
</a>
</div>
</div>
</div>
<!-- Floating badge -->
<div class="pointer-events-none absolute -right-4 -top-6 hidden select-none sm:block">
<div class="flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-xs text-slate-300 shadow-xl backdrop-blur-md">
<span class="inline-block h-2 w-2 rounded-full bg-rose-400 shadow-[0_0_0_4px_rgba(251,113,133,0.15)]"></span>
Server error
</div>
</div>
</div>
<!-- Footer hint -->
<p class="mt-6 text-center text-xs text-slate-500">
If this page persists, contact support with the reference ID: <span id="refId" class="font-mono"></span>
</p>
</main>
<script src="script.js" defer></script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>