Integrate frontend UI to request Web Push permission and show setting panel

Web/templates/base.html

@@ -1754,27 +1754,7 @@
     <script src="{{ url_for('static', filename='js/mobile_compatibility.js') }}"></script>
     <script src="{{ url_for('static', filename='js/ios_fixes.js') }}"></script>
     
-    <!-- Service Worker Registration for Push Notifications -->
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            // Register service worker for push notifications and offline support
-            if ('serviceWorker' in navigator) {
-                navigator.serviceWorker.register('{{ url_for("static", filename="service-worker.js") }}')
-                    .then(function(registration) {
-                        console.log('Service Worker registered successfully:', registration);
-                        
-                        // Check if we have permission for push notifications
-                        if ('Notification' in window && Notification.permission === 'granted') {
-                            console.log('Push notifications already enabled');
-                        }
-                    })
-                    .catch(function(error) {
-                        console.warn('Service Worker registration failed:', error);
-                    });
-            } else {
-                console.log('Service Workers not supported in this browser');
-            }
-        });
-    </script>
+    <!-- Push Notifications Script -->
+    <script src="{{ url_for('static', filename='js/push-notifications.js') }}"></script>
 </body>
 </html>

Web/templates/notifications.html

@@ -14,6 +14,8 @@
     </form>
   </div>
 
+  <div id="push-notification-settings" style="margin-bottom: 24px;"></div>
+
   <div style="display:grid; grid-template-columns:1fr; gap:14px;">
     <section style="background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:16px;">
       <h2 style="margin:0 0 12px; font-size:1.15rem;">Meine Benachrichtigungen</h2>
@@ -83,4 +85,12 @@
     {% endif %}
   </div>
 </div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    if (typeof showPushNotificationSettings === 'function') {
+        showPushNotificationSettings();
+    }
+});
+</script>
 {% endblock %}