melhoria na 404

estaticos/html/404.html

@@ -5,32 +5,76 @@
     <meta charset="UTF-8" />
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
     <title>Página não encontrada</title>
-    <link href="https://fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
     <style>
-        h1 {
+        body {
-            font-size: 80px;
+            margin: 0;
-            font-weight: 800;
+            padding: 0;
-            text-align: center;
             font-family: 'Roboto', sans-serif;
-        }
+            display: flex;
-
+            justify-content: center;
-        h2 {
+            align-items: center;
-            font-size: 25px;
+            height: 100vh;
+            background-color: #e8f5e9;
+            color: #2e7d32;
             text-align: center;
-            font-family: 'Roboto', sans-serif;
-            margin-top: -40px;
-        }
-
-        p {
-            text-align: center;
-            font-family: 'Roboto', sans-serif;
-            font-size: 12px;
         }
 
         .container {
-            width: 300px;
+            max-width: 500px;
-            margin: 0 auto;
+            padding: 20px;
-            margin-top: 15%;
+            background: white;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+            border-radius: 10px;
+            animation: fadeIn 1s ease-in-out;
+            border-top: 10px solid #66bb6a;
+        }
+
+        h1 {
+            font-size: 100px;
+            font-weight: 700;
+            margin-bottom: 10px;
+            color: #388e3c;
+        }
+
+        h2 {
+            font-size: 24px;
+            margin-top: -10px;
+            margin-bottom: 20px;
+            color: #43a047;
+        }
+
+        p {
+            font-size: 14px;
+            color: #4caf50;
+            margin-bottom: 20px;
+        }
+
+        a {
+            display: inline-block;
+            padding: 10px 20px;
+            background-color: #66bb6a;
+            color: white;
+            text-decoration: none;
+            border-radius: 5px;
+            font-weight: bold;
+            transition: background-color 0.3s;
+        }
+
+        a:hover {
+            background-color: #81c784;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(-20px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
     </style>
 
@@ -51,20 +95,14 @@
         <p id="erro">
             A página que você procura não existe ou ocorreu outro erro.
         </p>
-        <p>
-            <!-- Instrução para abertura de chamado no link https://atende.idz.one/index.php?a=add -->
         <p>
             <a id="link" href="https://atende.idz.one/index.php?a=add" target="_blank">Clique aqui para abrir um
                 chamado</a>
-
-        </p>
-
         </p>
     </div>
 
     <script>
         const original = `{${'ERRO'}}`
-        // essa variável deve ser preenchida com o erro que ocorreu
         const erro = `{ERRO}`
 
         const link = document.getElementById('link');
@@ -78,8 +116,6 @@ ERRO:
 
         const erroElement = document.getElementById('erro');
         original != erro && (erroElement.innerText = erro);
-
-
     </script>
 </body>