improved 500 error page

frontend/templates/500.html

@@ -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">
+<div class="relative isolate px-6 pt-14 lg:px-8">
-  <h1 class="text-6xl font-bold text-red-600 mb-4">500</h1>
+  <!-- Hero Image -->
-  <h2 class="text-3xl font-semibold text-gray-800 mb-8">Internal Server Error</h2>
+  <div class="mx-auto max-w-3xl py-12">
-
-  <!-- The meltdown SVG (or PNG) from /static/images/ -->
     <img
       src="/static/explosion.jpg"
-    alt="A meltdown illustration"
+      alt="Server Explosion"
-    class="mx-auto w-48 h-48 mb-8"
+      class="mx-auto rounded-xl shadow-xl h-[300px] w-full object-cover"
     />
+  </div>
 
-  <p class="text-gray-600 mb-4">
+  <div class="mx-auto max-w-3xl text-center">
-    <strong>Uh-oh!</strong> It looks like DocuNova misfiled some paperwork. Our server hamsters
+    <h1 class="text-7xl font-bold text-red-500">500</h1>
-    have taken a short coffee break – but we promise they’ll be right back!
+    <p class="mt-4 text-4xl font-semibold tracking-tight text-gray-900">
+      Oops! Something Went Wrong.
     </p>
-  <p class="text-gray-600 mb-8">
+    <p class="mt-4 text-lg leading-8 text-gray-600">
-    We’re on it – reordering the files, recharging the flux capacitor, or maybe just
+      Our servers encountered a mishap and need a moment. Maybe the hamsters spilled their coffee?
-    turning it off and on again.
+    </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>
 
-  <!-- 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">
+    <details class="mt-8 bg-gray-100 rounded-lg p-4 text-left shadow-md">
-      <summary class="cursor-pointer text-blue-600 hover:text-blue-800 font-semibold mb-2">
+      <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 %}
 
-  <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 %}