diff --git a/static/js/push-client.js b/static/js/push-client.js index 7097585..073a881 100644 --- a/static/js/push-client.js +++ b/static/js/push-client.js @@ -38,25 +38,45 @@ const bell = getBell(); if (!bell) return; bell.dataset.state = state; - const slash = bell.querySelector('.push-disabled-slash'); + const waves = bell.querySelectorAll('.push-wave'); if (state === 'enabled') { - bell.title = 'Powiadomienia włączone — kliknij, żeby wyłączyć'; - if (slash) slash.style.display = 'none'; + bell.title = 'Powiadomienia włączone na tym urządzeniu — kliknij, żeby wyłączyć'; bell.style.opacity = '1'; + waves.forEach(function(w) { w.style.opacity = ''; }); } else if (state === 'disabled') { - bell.title = 'Włącz powiadomienia'; - if (slash) slash.style.display = ''; + bell.title = 'Kliknij, aby włączyć powiadomienia na tym urządzeniu'; bell.style.opacity = '0.55'; + waves.forEach(function(w, i) { w.style.opacity = i === 0 ? '0.5' : '0.35'; }); } else if (state === 'blocked') { bell.title = 'Powiadomienia zablokowane w przeglądarce. Zmień w ustawieniach strony.'; - if (slash) slash.style.display = ''; bell.style.opacity = '0.4'; + waves.forEach(function(w) { w.style.opacity = '0.2'; }); } else if (state === 'unsupported') { - bell.title = 'Przeglądarka nie obsługuje powiadomień'; + bell.title = 'Ta przeglądarka nie obsługuje powiadomień'; bell.style.opacity = '0.3'; } } + function showToast(text, durationMs) { + try { + const old = document.getElementById('pushInfoToast'); + if (old) old.remove(); + const toast = document.createElement('div'); + toast.id = 'pushInfoToast'; + toast.textContent = text; + toast.style.cssText = 'position:fixed;bottom:24px;left:50%;transform:translateX(-50%);' + + 'background:#233e6d;color:#fff;padding:14px 20px;border-radius:10px;' + + 'box-shadow:0 6px 24px rgba(0,0,0,0.25);z-index:9999;max-width:420px;' + + 'font-size:14px;line-height:1.45;text-align:center;font-family:inherit;'; + document.body.appendChild(toast); + setTimeout(function() { + toast.style.transition = 'opacity 0.4s'; + toast.style.opacity = '0'; + setTimeout(function() { toast.remove(); }, 450); + }, durationMs || 7000); + } catch (e) { /* ignore */ } + } + async function getSubscription() { const reg = await navigator.serviceWorker.ready; return reg.pushManager.getSubscription(); @@ -103,6 +123,8 @@ setBellState('enabled'); // Welcome push — test że wszystko działa await fetch('/push/test', { method: 'POST', credentials: 'include' }); + // Edukacyjny komunikat: subskrypcja jest per urządzenie/przeglądarka + showToast('✓ Powiadomienia włączone na tym urządzeniu. Na innych telefonach i komputerach kliknij ten sam przycisk, żeby włączyć je także tam.', 9000); } catch (e) { log('enable error', e); alert('Nie udało się włączyć powiadomień: ' + (e.message || e)); diff --git a/templates/base.html b/templates/base.html index 6dfcaed..583b3a7 100755 --- a/templates/base.html +++ b/templates/base.html @@ -175,15 +175,17 @@ {% if push_bell_visible %} - +