From caa6cc45be55a9540c2d0ff48e2471fe096d57bc Mon Sep 17 00:00:00 2001 From: Maciej Pienczyn Date: Mon, 23 Feb 2026 11:48:35 +0100 Subject: [PATCH] feat: add mobile PWA installation guide with smart banner Mobile-only install instructions at /zainstaluj-aplikacje with auto-detected iPhone/Android tabs, CSS UI mockups, and step-by-step guide. Smart banner appears after 3s on mobile (dismissible via localStorage), hidden in standalone mode. Footer link and login page hint also mobile-only. Co-Authored-By: Claude Opus 4.6 --- blueprints/public/routes.py | 12 + templates/auth/login.html | 36 +++ templates/base.html | 144 ++++++++++ templates/pwa_install.html | 529 ++++++++++++++++++++++++++++++++++++ 4 files changed, 721 insertions(+) create mode 100644 templates/pwa_install.html diff --git a/blueprints/public/routes.py b/blueprints/public/routes.py index bf151a2..8adc336 100644 --- a/blueprints/public/routes.py +++ b/blueprints/public/routes.py @@ -1557,6 +1557,12 @@ def release_notes(): return render_template('release_notes.html', releases=releases, stats=stats) +@bp.route('/zainstaluj-aplikacje') +def pwa_install(): + """Instrukcja instalacji PWA na telefonie.""" + return render_template('pwa_install.html') + + @bp.route('/robots.txt') def robots_txt(): """Robots.txt for search engine crawlers.""" @@ -1591,5 +1597,11 @@ def sitemap_xml(): weekly 0.5 + + https://nordabiznes.pl/zainstaluj-aplikacje + {today} + monthly + 0.4 + """ return Response(xml, mimetype='application/xml') diff --git a/templates/auth/login.html b/templates/auth/login.html index 89d4605..acf757d 100755 --- a/templates/auth/login.html +++ b/templates/auth/login.html @@ -139,6 +139,35 @@ width: 20px; height: 20px; } + + /* PWA login hint — mobile only */ + .pwa-login-hint { + display: none; + text-align: center; + margin-top: var(--spacing-lg); + padding: var(--spacing-md); + background: #f0f4ff; + border-radius: var(--radius-lg); + } + + .pwa-login-hint a { + color: var(--primary); + text-decoration: none; + font-size: var(--font-size-sm); + font-weight: 500; + } + + .pwa-login-hint a:hover { + text-decoration: underline; + } + + @media (max-width: 768px) { + .pwa-login-hint { display: block; } + } + + @media (display-mode: standalone) { + .pwa-login-hint { display: none !important; } + } {% endblock %} @@ -216,6 +245,13 @@

Nie otrzymales emaila weryfikacyjnego?

Nie masz konta? Zarejestruj sie

+ + + {% endblock %} diff --git a/templates/base.html b/templates/base.html index addcd97..a3fc479 100755 --- a/templates/base.html +++ b/templates/base.html @@ -1272,6 +1272,109 @@ vertical-align: middle; } + /* ============================================================ + * PWA INSTALL BANNER (mobile-only) + * ============================================================ */ + .pwa-smart-banner { + display: none; + position: fixed; + bottom: 0; + left: 0; + right: 0; + background: var(--surface); + border-top: 1px solid var(--border); + box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1); + padding: 12px 16px; + z-index: 9999; + align-items: center; + gap: 12px; + transform: translateY(100%); + transition: transform 0.3s ease; + } + + .pwa-smart-banner.visible { + transform: translateY(0); + } + + .pwa-smart-banner-icon { + width: 40px; + height: 40px; + border-radius: 10px; + overflow: hidden; + flex-shrink: 0; + } + + .pwa-smart-banner-icon img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .pwa-smart-banner-text { + flex: 1; + min-width: 0; + } + + .pwa-smart-banner-text strong { + display: block; + font-size: var(--font-size-sm); + color: var(--text-primary); + } + + .pwa-smart-banner-text span { + font-size: 12px; + color: var(--text-secondary); + } + + .pwa-smart-banner-action { + background: var(--primary); + color: white; + border: none; + border-radius: 20px; + padding: 8px 16px; + font-size: var(--font-size-sm); + font-weight: 600; + font-family: var(--font-family); + cursor: pointer; + text-decoration: none; + white-space: nowrap; + flex-shrink: 0; + } + + .pwa-smart-banner-close { + background: none; + border: none; + color: var(--text-secondary); + cursor: pointer; + padding: 4px; + flex-shrink: 0; + line-height: 1; + } + + /* Footer PWA link — mobile only */ + .footer-pwa-link { + display: none; + } + + @media (max-width: 768px) { + .pwa-smart-banner { + display: flex; + } + .footer-pwa-link { + display: block; + } + } + + /* Hide banner in standalone (already installed) */ + @media (display-mode: standalone) { + .pwa-smart-banner { + display: none !important; + } + .footer-pwa-link { + display: none !important; + } + } + {% block extra_css %}{% endblock %} @@ -1791,6 +1894,7 @@ Tablica B2B NordaGPT {% endif %} + 📱 Zainstaluj aplikację

Kontakt

@@ -1813,6 +1917,21 @@
+ +
+
+ Norda Biznes +
+
+ Norda Biznes Partner + Dodaj do ekranu głównego +
+ Zainstaluj + +
+ diff --git a/templates/pwa_install.html b/templates/pwa_install.html new file mode 100644 index 0000000..b436b51 --- /dev/null +++ b/templates/pwa_install.html @@ -0,0 +1,529 @@ +{% extends "base.html" %} + +{% block title %}Zainstaluj aplikację - Norda Biznes Partner{% endblock %} + +{% block extra_css %} + +{% endblock %} + +{% block content %} +
+
+

Zainstaluj aplikację

+

Norda Biznes Partner na ekranie Twojego telefonu

+
+ + +
+
📱
+

Otwórz tę stronę na telefonie

+

Instrukcja instalacji jest przeznaczona dla urządzeń mobilnych. Wejdź na nordabiznes.pl/zainstaluj-aplikacje w przeglądarce na swoim telefonie.

+
+ + + +
+{% endblock %} + +{% block extra_js %} + // Auto-detect platform + (function() { + var ua = navigator.userAgent || ''; + var isIOS = /iPad|iPhone|iPod/.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1); + if (!isIOS && /Android/i.test(ua)) { + switchPwaTab('android'); + } + })(); + + function switchPwaTab(platform) { + // Update tabs + document.querySelectorAll('.pwa-tab').forEach(function(tab) { + tab.classList.toggle('active', tab.getAttribute('data-target') === platform); + }); + // Update step panels + document.querySelectorAll('.pwa-steps').forEach(function(panel) { + panel.classList.toggle('active', panel.id === 'pwa-' + platform); + }); + } +{% endblock %}