From 5db242685b518b5feb97438a1b701d267bbbbed4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?=
 <mateusz.gruszczynski@firma.interia.pl>
Date: Fri, 20 Mar 2026 11:03:58 +0100
Subject: [PATCH] error handling

---
 zbiorka_app/templates/error.html | 50 +++++++++++++++++++++++++++-----
 1 file changed, 43 insertions(+), 7 deletions(-)

diff --git a/zbiorka_app/templates/error.html b/zbiorka_app/templates/error.html
index dff5820..d853af5 100644
--- a/zbiorka_app/templates/error.html
+++ b/zbiorka_app/templates/error.html
@@ -12,6 +12,33 @@
     {% endif %}
 
     <style>
+        :root {
+            color-scheme: dark;
+
+            --bg: #121212;
+            --surface-0: #1a1a1a;
+            --surface-1: #202020;
+            --surface-2: #2a2a2a;
+            --border: #3a3a3a;
+
+            --text: #e4e4e4;
+            --text-muted: #a8a8a8;
+
+            --accent: #f5c84c;
+            --accent-600: #e3b23f;
+            --accent-700: #cfa033;
+            --accent-300: #ffe083;
+
+            --radius: 10px;
+            --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
+            --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
+            --trans: 220ms cubic-bezier(.2, .8, .2, 1);
+        }
+
+        html, body {
+            min-height: 100%;
+        }
+
         body {
             margin: 0;
             padding: 0;
@@ -20,12 +47,23 @@
             font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
         }
 
+        a {
+            color: var(--accent);
+            text-decoration: none;
+            transition: color var(--trans);
+        }
+
+        a:hover {
+            color: var(--accent-300);
+        }
+
         .error-page {
             min-height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 2rem 1rem;
+            box-sizing: border-box;
         }
 
         .error-box {
@@ -34,7 +72,6 @@
             text-align: center;
             padding: 2.5rem 2rem;
             border-radius: var(--radius);
-
             background: var(--surface-1);
             border: 1px solid var(--border);
             box-shadow: var(--shadow-md);
@@ -43,18 +80,19 @@
         .error-code {
             font-size: 3rem;
             font-weight: 700;
-            margin-bottom: .25rem;
+            line-height: 1;
+            margin-bottom: .5rem;
             color: var(--accent);
         }
 
         .error-name {
             font-size: 1.6rem;
-            margin-bottom: .5rem;
+            margin: 0 0 .75rem;
             color: var(--text);
         }
 
         .error-message {
-            margin-bottom: 1.5rem;
+            margin: 0 0 1.5rem;
             color: var(--text-muted);
             line-height: 1.5;
         }
@@ -64,12 +102,10 @@
             padding: .6rem 1.3rem;
             border-radius: 8px;
             font-weight: 700;
-
             background-color: var(--accent);
             border: 1px solid var(--accent-600);
             color: #111;
-
-            transition: transform 120ms ease, background-color var(--trans), border-color var(--trans);
+            transition: transform 120ms ease, background-color var(--trans), border-color var(--trans), color var(--trans);
         }
 
         .error-actions a:hover {