v1.1.0

Error pages to be added to the official MOREA website, referring to errors 403, 404,500 and 503.
Morea-IFS · May 3, 2024 · 8c2c621 · 8c2c621
2 parents c2577a0 + 85b236e
commit 8c2c621
Show file tree

Hide file tree

Showing 7 changed files with 350 additions and 0 deletions.
diff --git a/app/templates/error_403.html b/app/templates/error_403.html
@@ -0,0 +1,37 @@
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{% static 'css/errors.css' %}">
+    <link rel="shortcut icon" href="{% static 'assets/images/logo-morea-ds.png' %}">
+    <title>Error 403</title>
+</head>
+<body>
+    <header>
+        <div class="header">
+            <div class="pointerkk">
+                <a href="{% url 'Home' %}"><img src="{% static 'assets/images/logo-morea-ds.png' %}" alt="Logo Morea"></a>
+            </div>
+        </div>
+    </header>
+    <div class="centerkk">
+        <h1 class="titleErro">
+            Erro 403
+            <br>
+            Acesso Negado &#58;&#40;
+        </h1>
+        <p class="text">
+            Seu cliente não tem permissão para obter URL do servidor;
+                <br>
+            Clique No Botão Abaixo Para Voltar Para O Inicio
+        </p>
+        <a href="{% url 'Home' %}">
+            <button class="botão">Voltar</button>
+        </a>
+    </div>
+</body>
+</html>
diff --git a/app/templates/error_404.html b/app/templates/error_404.html
@@ -0,0 +1,37 @@
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{% static 'css/errors.css' %}">
+    <link rel="shortcut icon" href="{% static 'assets/images/logo-morea-ds.png' %}">
+    <title>Erro 404</title>
+</head>
+<body>
+    <header>
+        <div class="header">
+            <div class="pointerkk">
+                <a href="{% url 'Home' %}"><img src="{% static 'assets/images/logo-morea-ds.png' %}" alt="Logo Morea"></a>
+            </div>
+        </div>
+    </header>
+    <div class="centerkk">
+        <h1 class="titleErro">
+            Erro 404 
+            <br> 
+            Pagina Não Encontrada
+        </h1>
+        <p class="text">
+            Opa Não Encontramos A Pagina &#58;&#40;
+            <br>
+            Clique No Botão Abaixo Para Voltar Para O Inicio
+        </p>
+        <a href="{% url 'Home' %}">
+            <button class="botão">Voltar</button>
+        </a>
+    </div>
+</body>
+</html>
diff --git a/app/templates/error_500.html b/app/templates/error_500.html
@@ -0,0 +1,38 @@
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{% static 'css/errors.css' %}">
+    <link rel="shortcut icon" href="{% static 'assets/images/logo-morea-ds.png' %}">
+    <title>Erro 500</title>
+</head>
+<body>
+    <header>
+        <div class="header">
+            <div class="pointerkk">
+                <a href="{% url 'Home' %}"><img src="{% static 'assets/images/logo-morea-ds.png' %}" alt="Logo Morea"></a>
+            </div>
+        </div>
+    </header>
+    <div class="centerkk">
+        <h1 class="titleErro">
+            Erro 500
+            <br>
+        </h1>
+        <p class="text">
+            Problemas De Processamento Com A Hospedagem Do Site &#58;&#40;
+            <br>
+            A Versão HTTP Utilizada Na Requisição Não É Suportada Pelo Servidor
+            <br>
+            Clique No Botão Abaixo Para Voltar Para O Inicio
+        </p>
+        <a href="{% url 'Home' %}">
+            <button class="botão">Voltar</button>
+        </a>
+    </div>
+</body>
+</html>
diff --git a/app/templates/error_503.html b/app/templates/error_503.html
@@ -0,0 +1,39 @@
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{% static 'css/errors.css' %}">
+    <link rel="shortcut icon" href="{% static 'assets/images/logo-morea-ds.png' %}">
+    <title>Erro 503</title>
+</head>
+<body>
+    <header>
+        <div class="header">
+            <div class="pointerkk">
+                <a href="{% url 'Home' %}"><img src="{% static 'assets/images/logo-morea-ds.png' %}" alt="Logo Morea"></a>
+            </div>
+        </div>
+    </header>
+    <div class="centerkk">
+        <h1 class="titleErro">
+            Erro 503
+            <br>
+            Servidor Indisponível
+        </h1>
+        <p class="text">
+            Dificuldade De Processamento Do Servidor &#58;&#40;
+            <br>
+            O Servidor Web Está Temporariamente Indisponível Ou Incapaz De Lidar Com A Solicitação Do Cliente.
+            <br>
+            Clique No Botão Abaixo Para Voltar Para O Inicio
+        </p>
+        <a href="{% url 'Home' %}">
+            <button class="botão">Voltar</button>
+        </a>
+    </div>
+</body>
+</html>
diff --git a/app/views.py b/app/views.py
@@ -133,3 +133,15 @@ def getDeviceData(request):
         return Response({'message': 'data received.'}, status=status.HTTP_200_OK)
     else:
         return Response({'message': 'data not received.'}, status=status.HTTP_400_BAD_REQUEST)
+
+def page_in_erro403(request, exception):
+    return render(request, 'error_403.html', status=403)
+
+def page_in_erro404(request, exception):
+    return render(request, 'error_404.html', status=404)
+
+def page_in_erro500(request):
+    return render(request, 'error_500.html', status=500)
+
+def page_in_erro503(request):
+    return render(request, 'error_503.html', status=503)
diff --git a/morea_ds/urls.py b/morea_ds/urls.py
@@ -26,3 +26,8 @@
 if settings.DEBUG:
     urlpatterns += static(settings.MEDIA_URL,
                           document_root=settings.MEDIA_ROOT)
+
+handler403 = 'app.views.page_in_erro403'
+handler404 = 'app.views.page_in_erro404'
+handler500 = 'app.views.page_in_erro500'
+handler503 = 'app.views.page_in_erro503'
diff --git a/static/css/errors.css b/static/css/errors.css
@@ -0,0 +1,182 @@
+@charset "UTF-8";
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Roboto:wght@700&display=swap");
+
+
+    /*Config Global*/
+
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+
+    /*Celular*/
+
+
+@media (max-width: 460px) {
+
+body{
+  background-color: #0e6afb;
+  font-family: "Roboto", sans-serif;
+}
+
+.header{
+  background-color: white;
+  height: 5em;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.header img{
+  height: 85px;
+  width: 85px;
+}
+
+.titleErro{
+  color: white;
+  font-size: 30px;
+}
+
+.centerkk{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  text-align: center;
+}
+
+.text {
+  color: white;
+  font-size: 15px;
+  padding-top: 3%;
+}
+
+.botão{
+  margin-top: 2em;
+  padding: 10px;
+  border-radius: 7px;
+
+}
+
+}
+
+
+    /*Pc/Laptop*/
+
+
+@media (min-width: 1000px){
+
+body{
+
+  background-color: #0E6AFB;
+  font-family: 'Roboto' , sans-serif
+}
+
+.header{
+  background-color: white;
+  height: 5em;
+  display: flex;
+  justify-content: center;
+}
+.header img{
+  height: 85px;
+  width: 85px;
+}
+
+.pointerkk{
+  position: absolute;
+  user-select:none
+}
+
+.pointerkk img{
+  pointer-events: none;
+}
+
+.titleErro{
+  color: white;
+  font-size: 45px;
+}
+
+.centerkk{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  text-align: center;
+}
+
+.text{
+  color: white;
+  font-size: 20px;
+  padding-top: 3%;
+}
+
+.botão{
+  margin-top: 2em;
+  padding: 10px;
+  border-radius: 7px;
+
+}
+
+}
+
+    /*Tablet*/
+
+
+@media (min-width: 461px) and (max-width: 999px) {
+
+
+body{
+  background-color: #0E6AFB;
+  font-family: 'Roboto' , sans-serif
+}
+
+.header{
+  background-color: white;
+  height: 5em;
+  display: flex;
+  justify-content: center;
+}
+.header img{
+    height: 85px;
+    width: 85px;
+}
+
+.pointerkk{
+  position: absolute;
+  user-select:none
+}
+
+.pointerkk img{
+  pointer-events: none;
+}
+
+.titleErro{
+  color: white;
+  font-size: 35px;
+}
+
+.centerkk{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  text-align: center;
+}
+
+.text{
+  color: white;
+  font-size: 15px;
+  padding-top: 3%;
+}
+
+.botão{
+  margin-top: 2em;
+  padding: 10px;
+  border-radius: 7px;
+}
+}
+