Feat: PWA-Implementierung - Offline-Funktionalität hinzugefügt

2025-03-18 16:16:47 +01:00
parent 35645fc671
commit 4c69478fa8
5 changed files with 200 additions and 1 deletions
--- a/templates/offline.html
+++ b/templates/offline.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Offline - MEDI Kunden</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <style>
+        .offline-container {
+            text-align: center;
+            padding: 2rem;
+            max-width: 600px;
+            margin: 2rem auto;
+        }
+        .offline-icon {
+            font-size: 4rem;
+            color: #666;
+            margin-bottom: 1rem;
+        }
+        .offline-message {
+            font-size: 1.2rem;
+            color: #333;
+            margin-bottom: 1.5rem;
+        }
+        .retry-button {
+            background-color: #4CAF50;
+            color: white;
+            padding: 0.8rem 1.5rem;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 1rem;
+        }
+        .retry-button:hover {
+            background-color: #45a049;
+        }
+    </style>
+</head>
+<body>
+    <div class="offline-container">
+        <div class="offline-icon">📡</div>
+        <h1>Sie sind offline</h1>
+        <p class="offline-message">
+            Es scheint, dass Sie keine Internetverbindung haben. 
+            Bitte überprüfen Sie Ihre Verbindung und versuchen Sie es erneut.
+        </p>
+        <button class="retry-button" onclick="window.location.reload()">
+            Erneut versuchen
+        </button>
+    </div>
+    <script>
+        // Automatische Überprüfung der Verbindung
+        window.addEventListener('online', function() {
+            window.location.reload();
+        });
+    </script>
+</body>
+</html>