improved 500 error page

This commit is contained in:
Christian Krakau-Louis
2025-03-26 03:46:41 +01:00
parent e4ffa457db
commit 5903c4b4a0
+32 -26
View File
@@ -1,37 +1,43 @@
{% extends "base.html" %}
{% block title %}Server Error - Oops{% endblock %}
{% block title %}Server Error - DocuNova{% endblock %}
{% block content %}
<div class="max-w-3xl mx-auto py-16 text-center">
<h1 class="text-6xl font-bold text-red-600 mb-4">500</h1>
<h2 class="text-3xl font-semibold text-gray-800 mb-8">Internal Server Error</h2>
<div class="relative isolate px-6 pt-14 lg:px-8">
<!-- Hero Image -->
<div class="mx-auto max-w-3xl py-12">
<img
src="/static/explosion.jpg"
alt="Server Explosion"
class="mx-auto rounded-xl shadow-xl h-[300px] w-full object-cover"
/>
</div>
<!-- The meltdown SVG (or PNG) from /static/images/ -->
<img
src="/static/explosion.jpg"
alt="A meltdown illustration"
class="mx-auto w-48 h-48 mb-8"
/>
<div class="mx-auto max-w-3xl text-center">
<h1 class="text-7xl font-bold text-red-500">500</h1>
<p class="mt-4 text-4xl font-semibold tracking-tight text-gray-900">
Oops! Something Went Wrong.
</p>
<p class="mt-4 text-lg leading-8 text-gray-600">
Our servers encountered a mishap and need a moment. Maybe the hamsters spilled their coffee?
</p>
<p class="mt-2 text-lg leading-8 text-gray-600">
We're already on it—sorting files, rebooting servers, and recalibrating flux capacitors.
</p>
<p class="text-gray-600 mb-4">
<strong>Uh-oh!</strong> It looks like DocuNova misfiled some paperwork. Our server hamsters
have taken a short coffee break but we promise theyll be right back!
</p>
<p class="text-gray-600 mb-8">
Were on it reordering the files, recharging the flux capacitor, or maybe just
turning it off and on again.
</p>
<!-- If you want to show *some* technical info in dev mode -->
{% if exc %}
<details class="my-4 bg-gray-100 text-left p-4 rounded overflow-auto">
<summary class="cursor-pointer text-blue-600 hover:text-blue-800 font-semibold mb-2">
{% if exc %}
<details class="mt-8 bg-gray-100 rounded-lg p-4 text-left shadow-md">
<summary class="cursor-pointer font-medium text-blue-600 hover:text-blue-700">
Show Debug Info
</summary>
<pre class="mt-2 text-sm text-gray-700">{{ exc }}</pre>
<pre class="mt-4 text-sm text-gray-700 overflow-auto">{{ exc }}</pre>
</details>
{% endif %}
{% endif %}
<a href="/" class="text-blue-600 hover:text-blue-800 font-semibold">&larr; Return Home</a>
<div class="mt-10">
<a href="/" class="inline-block bg-blue-600 px-6 py-3 rounded-md text-white font-semibold shadow-md hover:bg-blue-700 transition-colors">
&larr; Go Home
</a>
</div>
</div>
</div>
{% endblock %}