From 55767d4ed1fd96dd5ac96bab9567000976f8de21 Mon Sep 17 00:00:00 2001
From: itqop <leonkl32@gmail.com>
Date: Sun, 17 Mar 2024 22:41:00 +0300
Subject: [PATCH] Change 500 error

---
 rumine/templates/500.html | 152 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 148 insertions(+), 4 deletions(-)
diff --git a/rumine/templates/500.html b/rumine/templates/500.html
index 77379e5..965bbf1 100644
--- a/rumine/templates/500.html
+++ b/rumine/templates/500.html
@@ -1,13 +1,157 @@
 <!DOCTYPE html>
-<html lang="en" dir="ltr">
+<html lang="ru" dir="ltr">
     <head>
         <meta charset="utf-8" />
         <title>Internal server error</title>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <style>
+            @import url("https://fonts.googleapis.com/css?family=VT323");
+            :root{
+            --width: 280px;
+            --height: 180px;
+            }
+
+            body{ background: #6BA1CA; }
+
+            .error-500{
+            position: absolute;
+            top: 50%; left: 50%;
+            transform: translate(-50%, -50%);
+            font-family: 'VT323';
+            color: #1E4B6D;
+            text-shadow: 1px 1px 1px rgba(255, 255, 255, .3);
+            }
+
+            .error-500:after{
+            content: attr(data-text);
+            display: block;
+            margin-top: calc(var(--height) / 10 + 15px);
+            font-size: 28pt;
+            text-align: center;
+            }
+
+            spaguetti{
+            width: var(--width);
+            height: var(--height);
+            filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, .2));
+            display: block;
+            margin: 0 auto;
+            position: relative;
+            }
+
+            plate{
+            width: 100%;
+            height: calc(var(--height) / 2.5);
+            background: #CAD7E4;
+            position: absolute;
+            bottom: 0;
+            border-radius: 0 0 50px 50px;
+            z-index: 4;
+            }
+
+            plate:before{
+            content: '500 Spaghetti Error';
+            position: absolute;
+            top: 50%; left: 50%;
+            transform: translate(-50%, -50%);
+            text-transform: uppercase;
+            font-weight: bold;
+            color: rgba(0, 0, 0, .2);
+            text-align: center;
+            }
+
+            plate:after{
+            content: '';
+            width: calc(var(--width) / 2);
+            height: calc(var(--height) / 10);
+            background: #B5C3D0;
+            position: absolute;
+            top: 100%; left: 50%;
+            transform: translateX(-50%);
+            }
+
+            pasta{
+            width: calc(var(--width) / 4);
+            height: calc(var(--width) / 4);
+            border: 5px solid #DEA631;
+            background: #EED269;
+            border-radius: 50%;
+            position: absolute;
+            bottom: calc(calc(var(--height) / 2.5) / 3); right: 10px;
+            box-shadow: calc(-1 * calc(var(--width) / 4) - 60px) 10px 1px 10px #EED269, calc(-1 * calc(var(--width) / 4) - 60px) 10px 0 15px #DEA631;
+            z-index: 2;
+            }
+
+            pasta:before{
+            content: '';
+            width: calc(var(--width) / 4);
+            height: calc(var(--width) / 4);
+            border: 5px solid #DEA631;
+            background: #EED269;
+            border-radius: 50%;
+            position: absolute;
+            bottom: -5px; right: 60px;
+            box-shadow: calc(-1 * calc(var(--width) / 4) - 30px) 10px 1px 1px #EED269, calc(-1 * calc(var(--width) / 4) - 30px) 10px 0 5px #DEA631;
+            }
+
+            pasta:after{
+            content: '';
+            width: calc(var(--width) / 3);
+            height: calc(var(--width) / 4);
+            border: 5px solid #DEA631;
+            background: #EED269;
+            border-radius: 50%;
+            position: absolute;
+            bottom: -15px; right: 100px;
+            box-shadow: calc(var(--width) / 4) 10px 1px 1px #EED269, calc(var(--width) / 4) 10px 0 5px #DEA631;
+            }
+
+            meat{
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            background: #B64C19;
+            position: absolute;
+            bottom: calc(var(--height) / 2.5); right: 64px;
+            box-shadow: -150px -2px 0 0 #B64C19, -50px -7px 0 0 #B64C19, -100px 8px 0 0 #B64C19;
+            z-index: 3;
+            }
+
+            fork{
+            width: 20px;
+            height: calc(var(--height) - 30px);
+            background: #D3D3D3;
+            border-right: 3px solid #B7B7B7;
+            border-radius: 50px 50px 0 0;
+            position: absolute;
+            bottom: 25%; left: 75%;
+            transform: translate(-75%, 0%) rotate(25deg);
+            }
+
+        </style>
+        <script  type="text/javascript">
+            const error = document.querySelector(".error-500");
+            let i = 0, data = "", text = error.getAttribute("data-text");
+
+            let typing = setInterval(() => {
+            if(i == text.length){
+                clearInterval(typing);
+            }else{
+                data += text[i];
+                document.querySelector(".error-500").setAttribute("data-text", data);
+                i++;
+            }
+            }, 100);
+        </script>
     </head>
     <body>
-        <h1>Internal server error</h1>
-
-        <h2>Sorry, there seems to be an error. Please try again soon.</h2>
+        <div class="error-500" data-text="Ой..! Наш спагетти код работает неисправно. Но мы скоро всё починим!">
+            <spaguetti>
+            <fork></fork>
+            <meat></meat>
+            <pasta></pasta>
+            <plate></plate>
+          </spaguetti>
+        </div>
     </body>
 </html>
