pub const DEFAULT_500_HTML: &str = "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>500 \u{2014} Internal Server Error</title>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap\"\n rel=\"stylesheet\"\n />\n <script>\n // Tailwind config must run BEFORE the CDN script loads.\n // Extends the default theme: Inter as the default sans family\n // (so `font-sans` / body text picks it up), and JetBrains Mono\n // as the default mono family (so `font-mono` / `.mono` works).\n window.tailwind = window.tailwind || {};\n window.tailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n sans: [\n \"Inter\",\n \"ui-sans-serif\",\n \"system-ui\",\n \"-apple-system\",\n \"Segoe UI\",\n \"Roboto\",\n \"sans-serif\",\n ],\n mono: [\n \"JetBrains Mono\",\n \"ui-monospace\",\n \"SFMono-Regular\",\n \"Menlo\",\n \"Consolas\",\n \"monospace\",\n ],\n },\n },\n },\n };\n </script>\n <script src=\"https://cdn.tailwindcss.com?plugins=forms,container-queries\"></script>\n <style>\n /* Apply the body font to the page (Tailwind\'s preflight\n already sets ui-sans-serif on body; we override it here\n so Inter wins once it has loaded). */\n body {\n font-family: \"Inter\", ui-sans-serif, system-ui, -apple-system,\n \"Segoe UI\", Roboto, sans-serif;\n }\n /* `.mono` is the shorthand class used throughout the page\n for monospace text. Tailwind\'s `font-mono` utility also\n resolves to the same stack via the config above. */\n .mono {\n font-family: \"JetBrains Mono\", ui-monospace, SFMono-Regular,\n Menlo, Consolas, monospace;\n }\n </style>\n </head>\n <body class=\"min-h-screen bg-slate-950 text-slate-300 antialiased\">\n <!-- Wordmark -->\n <header\n class=\"absolute top-0 inset-x-0 px-6 py-5 flex items-center justify-between\"\n >\n <a\n href=\"/\"\n class=\"mono text-xs tracking-widest text-slate-500 hover:text-slate-300 transition-colors\"\n >\n umbral\n </a>\n <span\n class=\"mono text-[10px] tracking-widest text-slate-600 uppercase\"\n >\n error // internal\n </span>\n </header>\n\n <!-- Subtle grid background -->\n <div\n class=\"absolute inset-0 -z-10 bg-[linear-gradient(to_right,#0f172a_1px,transparent_1px),linear-gradient(to_bottom,#0f172a_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_40%,#000_30%,transparent_100%)] opacity-40\"\n ></div>\n <div\n class=\"absolute inset-0 -z-10 bg-[radial-gradient(circle_at_50%_30%,rgba(99,102,241,0.08),transparent_60%)]\"\n ></div>\n\n <!-- Main content -->\n <main\n class=\"relative min-h-screen flex items-center justify-center px-6 py-24\"\n >\n <div class=\"w-full max-w-2xl mx-auto text-center\">\n <!-- Status label -->\n <p\n class=\"mono text-xs tracking-[0.25em] text-slate-500 uppercase\"\n >\n Error // Internal\n </p>\n\n <!-- Hero code -->\n <h1\n class=\"mono mt-6 text-7xl sm:text-8xl md:text-9xl font-bold tracking-tighter text-slate-200 leading-none\"\n >\n 500\n </h1>\n\n <!-- Headline -->\n <h2\n class=\"mt-8 text-2xl sm:text-3xl font-semibold text-slate-100 tracking-tight\"\n >\n Internal server error\n </h2>\n\n <!-- Sub-copy -->\n <p\n class=\"mt-4 text-base text-slate-400 max-w-md mx-auto leading-relaxed\"\n >\n Something went wrong on our end. The error has been logged\n and we\'ll look into it.\n </p>\n\n <!-- URL strip (uses request_path when available) -->\n {% if request_path %}\n <div class=\"mt-8 mx-auto max-w-xl\">\n <div\n class=\"flex items-center gap-2 rounded-md border border-slate-800 bg-slate-900/60 px-3 py-2.5 backdrop-blur-sm\"\n >\n <span\n class=\"mono text-[10px] tracking-widest text-slate-600 uppercase shrink-0\"\n >REQ</span\n >\n <code\n class=\"mono text-sm text-slate-300 truncate flex-1 text-left\"\n title=\"{{ request_path }}\"\n >{{ request_path }}</code\n >\n <button\n type=\"button\"\n onclick=\"navigator.clipboard?.writeText(\'{{ request_path }}\'); this.textContent=\'Copied\'; setTimeout(()=>this.textContent=\'Copy\',1200);\"\n class=\"mono text-[10px] tracking-widest uppercase text-slate-500 hover:text-slate-200 transition-colors shrink-0 px-2 py-1 rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400\"\n >\n Copy\n </button>\n </div>\n </div>\n {% endif %}\n\n <!-- Actions -->\n <div\n class=\"mt-10 flex flex-col sm:flex-row items-center justify-center gap-3\"\n >\n <a\n href=\"/\"\n class=\"inline-flex items-center justify-center gap-2 rounded-md bg-indigo-500 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400 w-full sm:w-auto\"\n >\n <span aria-hidden=\"true\">\u{2190}</span>\n <span>Go home</span>\n </a>\n <button\n type=\"button\"\n onclick=\"\n if (history.length > 1) {\n history.back();\n } else {\n window.location.href = \'/\';\n }\n \"\n class=\"inline-flex items-center justify-center gap-2 rounded-md border border-slate-800 bg-slate-900/40 px-5 py-2.5 text-sm font-semibold text-slate-200 hover:bg-slate-900 hover:border-slate-700 transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400 w-full sm:w-auto\"\n >\n Go back\n </button>\n </div>\n\n <!-- Dev-mode diagnostic panel -->\n {% if dev_mode %}\n <div\n class=\"mt-16 text-left rounded-lg border border-rose-900/50 bg-rose-950/20 overflow-hidden\"\n >\n <!-- Panel header -->\n <div\n class=\"flex items-center justify-between gap-3 px-4 py-2.5 border-b border-rose-900/50 bg-rose-950/40\"\n >\n <div class=\"flex items-center gap-2\">\n <span\n class=\"inline-block h-2 w-2 rounded-full bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.6)]\"\n aria-hidden=\"true\"\n ></span>\n <span\n class=\"mono text-[10px] tracking-widest uppercase text-rose-300 font-semibold\"\n >\n Developer detail\n </span>\n </div>\n <span\n class=\"mono text-[10px] tracking-widest uppercase text-rose-400/70\"\n >\n Hidden in production\n </span>\n </div>\n\n <div class=\"px-4 py-4 space-y-4\">\n {% if request_path %}\n <section>\n <p\n class=\"mono text-[10px] tracking-widest uppercase text-rose-400/80 font-semibold mb-1.5\"\n >\n Request path\n </p>\n <code\n class=\"block mono text-sm text-rose-100 bg-slate-950/60 border border-rose-900/40 rounded px-3 py-2 break-all\"\n >\n {{ request_path }}\n </code>\n </section>\n {% endif %} {% if error_display %}\n <section>\n <div\n class=\"flex items-center justify-between mb-1.5\"\n >\n <p\n class=\"mono text-[10px] tracking-widest uppercase text-rose-400/80 font-semibold\"\n >\n Error\n </p>\n <button\n type=\"button\"\n onclick=\"\n navigator.clipboard?.writeText(\n this.dataset.copy,\n );\n this.textContent = \'Copied\';\n setTimeout(\n () => (this.textContent = \'Copy\'),\n 1200,\n );\n \"\n data-copy=\"{{ error_display }}\"\n class=\"mono text-[10px] tracking-widest uppercase text-rose-400/70 hover:text-rose-200 transition-colors px-2 py-0.5 rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rose-400\"\n >\n Copy\n </button>\n </div>\n <pre\n class=\"mono text-sm text-rose-100 bg-slate-950/60 border border-rose-900/40 rounded px-3 py-2 whitespace-pre-wrap break-all overflow-x-auto\"\n ><code>{{ error_display }}</code></pre>\n </section>\n {% endif %} {% if error_chain | length > 1 %}\n <section>\n <p\n class=\"mono text-[10px] tracking-widest uppercase text-rose-400/80 font-semibold mb-1.5\"\n >\n Cause chain ({{ error_chain | length }})\n </p>\n <ol class=\"space-y-1.5\">\n {% for cause in error_chain %}\n <li class=\"flex gap-3 items-start\">\n <span\n class=\"mono text-[10px] tracking-widest text-rose-500/70 mt-1.5 shrink-0 w-6 text-right\"\n >\n [{{ loop.index }}]\n </span>\n <code\n class=\"flex-1 mono text-sm text-rose-100 bg-slate-950/60 border border-rose-900/40 rounded px-3 py-1.5 break-all\"\n >\n {{ cause }}\n </code>\n </li>\n {% endfor %}\n </ol>\n </section>\n {% endif %}\n </div>\n </div>\n {% endif %}\n </div>\n </main>\n\n <!-- Footer links -->\n <footer\n class=\"absolute bottom-0 inset-x-0 px-6 py-5 flex items-center justify-center gap-6\"\n >\n <a\n href=\"/docs\"\n class=\"text-xs text-slate-500 hover:text-slate-300 transition-colors\"\n >Docs</a\n >\n <span class=\"text-slate-800\" aria-hidden=\"true\">\u{b7}</span>\n <a\n href=\"/status\"\n class=\"text-xs text-slate-500 hover:text-slate-300 transition-colors\"\n >Status</a\n >\n <span class=\"text-slate-800\" aria-hidden=\"true\">\u{b7}</span>\n <a\n href=\"https://github.com/umbral/umbral\"\n class=\"text-xs text-slate-500 hover:text-slate-300 transition-colors\"\n >GitHub</a\n >\n </footer>\n </body>\n</html>\n";Expand description
Default 500 page: same shape as the 404. In dev mode the template
receives error_display, error_chain (vec of source strings), and
request_path context variables that render into an expandable detail
block. In prod those variables are empty strings / empty vecs.