completed error page colors and offline descriptions

nkoexe · Jul 23, 2024 · f75d4fb · f75d4fb
1 parent d46f09e
commit f75d4fb
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 16 deletions.
diff --git a/sostituzioni/view/errorhandlers/__init__.py b/sostituzioni/view/errorhandlers/__init__.py
@@ -2,14 +2,20 @@
 
 from flask import render_template, redirect, url_for
 
-from sostituzioni.view import app
+from sostituzioni.control.configurazione import configurazione
 from sostituzioni.model.auth import current_user
+from sostituzioni.view import app
 
 
 @app.route("/offline")
 def offline():
+    support_email = configurazione.get("supportemail")
+
     return render_template(
-        "error.html", code="////", title="Sei offline.", description="", offline=True
+        "error.html",
+        code="////",
+        offline=True,
+        support_email=support_email,
     )
 
 
@@ -47,9 +53,19 @@ def not_found(e):
     return redirect(url_for("auth.login"))
 
 
-# @app.errorhandler(500)
-# def internal_error(e):
-#     return "Errore interno", 500
+@app.errorhandler(500)
+def internal_error(e):
+    support_email = configurazione.get("supportemail")
+
+    return (
+        render_template(
+            "error.html",
+            code=500,
+            title="Errore interno.",
+            description=f"Qualquadra non cosa. Contatta <a href='mailto:{support_email}'>{support_email}</a> e descrivi cosa è successo: potresti aver scovato un errore nel codice.",
+        ),
+        500,
+    )
 
 
 @app.errorhandler(401)

diff --git a/sostituzioni/view/static/scripts/service-worker.js b/sostituzioni/view/static/scripts/service-worker.js
@@ -1,4 +1,4 @@
-const CACHE_NAME = 'scuolasync_offline_v2';
+const CACHE_NAME = 'scuolasync_offline_v2.11';
 const OFFLINE_URL = '/offline';
 
 // Install event handler (caches the offline page)

diff --git a/sostituzioni/view/templates/error.html b/sostituzioni/view/templates/error.html
@@ -18,6 +18,11 @@
       min-height: 0;
     }
 
+    ::selection {
+      background-color: #ef996e;
+      color: #101010;
+    }
+
     html,
     body {
       width: 100%;
@@ -28,9 +33,10 @@
 
     a {
       position: relative;
-      color: #bb545d;
+      color: #ef996e;
       font-weight: bold;
       text-decoration: none;
+      text-wrap: nowrap
     }
 
     a::before {
@@ -40,7 +46,7 @@
       right: -4px;
       width: 0;
       height: 4px;
-      background-color: #bb545d;
+      background-color: #ef996e;
       transition: width 0.25s;
     }
 
@@ -65,8 +71,9 @@
       left: -5%;
       font-size: 50vw;
       font-weight: 900;
-      color: #3b3b3b;
-      mask-image: linear-gradient(to bottom, white, transparent 70%);
+      color: #3d2d25;
+      mask-image: linear-gradient(to bottom, white, transparent 75%);
+      user-select: none;
     }
 
     #text-container {
@@ -79,7 +86,7 @@
     }
 
     #error-title {
-      font-size: 5rem;
+      font-size: max(7vw, 10vh);
       margin: 0;
     }
 
@@ -101,17 +108,25 @@
       <h1 id="error-title">{{title}}</h1>
       <p id="error-description">{{description | safe}}</p>
     </div>
+    <div id="animation-container">
+      <div id="ball"></div>
+    </div>
   </div>
 
   {% if offline %}
   <script>
     if (window.navigator.onLine) {
+      document.title = "ScuolaSync - Server offline"
       document.getElementById('error-title').innerHTML = "Server offline."
-      document.getElementById('error-description').innerHTML = "Impossibile connettersi al sistema. "
+      document.getElementById('error-description').innerHTML = "Impossibile connettersi al sistema. Esso potrebbe essere in manutenzione, ma se il problema persiste potresti aver scovato un problema: contatta <a href='mailto:{{support_email}}'>{{support_email}}</a>."
+    } else {
+      document.title = "ScuolaSync - Offline"
+      document.getElementById('error-title').innerHTML = "Sei offline."
+      document.getElementById('error-description').innerHTML = "Controlla la tua connessione Internet. Se il problema persiste, contatta <a href='mailto:{{support_email}}'>{{support_email}}</a>."
+      window.addEventListener('online', () => {
+        location.reload();
+      });
     }
-    window.addEventListener('online', () => {
-      location.reload();
-    });
 
     function reconnect() {
       fetch('/')
@@ -125,7 +140,7 @@ <h1 id="error-title">{{title}}</h1>
           setTimeout(reconnect, 3000)
         })
     }
-    //reconnect()
+    reconnect()
   </script>
   {% endif %}
 </body>