From dfb6f5f370fa742eb8775cbeba9640e47fd9110e Mon Sep 17 00:00:00 2001
From: Andus <me@andus.dev>
Date: Sun, 13 Apr 2025 16:26:12 +0200
Subject: [PATCH] =?UTF-8?q?Dodano=20=C5=82adniejsz=C4=85=20strone=20pod=20?=
 =?UTF-8?q?error=20404?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dodaje #12
---
 app/routes.py             |  5 +++
 app/static/style.css      | 68 +++++++++++++++++++++++++++++++++++++++
 app/templates/404.html    | 26 +++++++++++++++
 app/templates/donate.html |  2 +-
 4 files changed, 100 insertions(+), 1 deletion(-)
 create mode 100644 app/templates/404.html

diff --git a/app/routes.py b/app/routes.py
index eade35d..6d01e34 100644
--- a/app/routes.py
+++ b/app/routes.py
@@ -55,3 +55,8 @@ def list_ads():
         if f.lower().endswith(".png")
     ]
     return jsonify(files)
+
+
+@main.app_errorhandler(404)
+def page_not_found(e):
+    return render_template("404.html"), 404
diff --git a/app/static/style.css b/app/static/style.css
index 1efa6cf..27ba52e 100644
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -547,3 +547,71 @@ a.non-link:hover {
         height: 180px;
     }
 }
+
+/* 404 Error */
+.error-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 4rem 2rem;
+    text-align: center;
+    color: #e0e0e0;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.glitch-title {
+    font-size: 6rem;
+    font-weight: 900;
+    color: #ff0066;
+    text-shadow: 2px 2px #00ffff, -2px -2px #ff00ff;
+    animation: glitch 1s infinite;
+}
+
+@keyframes glitch {
+    0% { text-shadow: 2px 2px #00ffff, -2px -2px #ff00ff; }
+    20% { text-shadow: -2px -2px #00ffff, 2px 2px #ff00ff; }
+    40% { text-shadow: 2px -2px #00ffff, -2px 2px #ff00ff; }
+    60% { text-shadow: -2px 2px #00ffff, 2px -2px #ff00ff; }
+    80% { text-shadow: 2px 2px #00ffff, -2px -2px #ff00ff; }
+    100% { text-shadow: -2px -2px #00ffff, 2px 2px #ff00ff; }
+}
+
+.error-message {
+    font-size: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.references-list {
+    list-style: none;
+    padding: 0;
+    margin: 0 auto 3rem;
+    max-width: 600px;
+    text-align: left;
+}
+
+.references-list li {
+    margin: 1rem 0;
+    font-size: 1.1rem;
+    line-height: 1.5;
+    transition: transform 0.2s;
+}
+
+.references-list li:hover {
+    transform: translateX(10px);
+}
+
+.back-button {
+    display: inline-block;
+    padding: 0.75rem 1.5rem;
+    background-color: #222;
+    color: #fff;
+    border: 2px solid #fff;
+    border-radius: 8px;
+    text-decoration: none;
+    font-weight: bold;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.back-button:hover {
+    background-color: #fff;
+    color: #000;
+}
\ No newline at end of file
diff --git a/app/templates/404.html b/app/templates/404.html
new file mode 100644
index 0000000..2d31aeb
--- /dev/null
+++ b/app/templates/404.html
@@ -0,0 +1,26 @@
+{% extends "layout.html" %}
+{% block title %}404 - Zgubiłeś się w multiversum{% endblock %}
+{% block content %}
+<div class="error-container">
+    <h1 class="glitch-title">404</h1>
+    <p id="error-message" class="error-message"></p>
+
+    <a href="/" class="back-button">Powrót do bezpiecznego świata</a>
+</div>
+
+<script>
+    const messages = [
+        "Właśnie próbowałeś wejść na Peron 9 i ¾ bez rozpędu. Niestety, ściana nie puściła.",
+        "Strona zniknęła w glitchu Matrixa. Może weź czerwoną pigułkę?",
+        "Demogorgon pożarł zawartość strony. Sorki...",
+        "Strona zniknęła w anomalii czasoprzestrzennej. Też nie wiemy, co się stało.",
+        "Thanos pstryknął palcami i ta strona zniknęła.",
+        "Ups. Gandalf powiedział: \"Nie przejdziesz!\" – i strona się rozpadła.",
+        "Uwaga! Ta strona została zawieszona przez Biuro Czasu TVA.",
+        "Błąd jak z Simsów - ktoś wyjął drabinkę z basenu tej strony. Ona już nie wróci."
+    ];
+
+    const randomMessage = messages[Math.floor(Math.random() * messages.length)];
+    document.getElementById('error-message').textContent = randomMessage;
+</script>
+{% endblock %}
diff --git a/app/templates/donate.html b/app/templates/donate.html
index 34ad502..c6a119d 100644
--- a/app/templates/donate.html
+++ b/app/templates/donate.html
@@ -12,6 +12,6 @@
         <li><b>Motywacja</b> do dalszego rozwijania panelu</li>
         <li><b>Wsparcie</b> w opłacaniu serwera na backupy</li>
     </ul>
-    <a href="https://ko-fi.com/andusdev">Donate możesz wysłać tutaj</a>
+    Donate możesz wysłać <a href="https://ko-fi.com/andusdev">tutaj</a>
 </div>
 {% endblock %}