Add button for home screen add instructions

This commit is contained in:
Ettore
2026-05-22 23:50:05 +02:00
parent eeea8dfad8
commit 6f90bd2891
6 changed files with 69 additions and 33 deletions

View File

@@ -12,6 +12,7 @@
<link rel="apple-touch-icon" href="/static/images/mobile_icon.png" />
<link rel="stylesheet" href="/static/style.css" />
<link rel="stylesheet" href="/static/leaflet.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pwa-add-to-homescreen@4/dist/add-to-homescreen.min.css" />
<style>
/* ── Login view ──────────────────────────────────────────────────────── */
@@ -148,6 +149,9 @@
<div class="app-header h2">Lagomare Gates</div>
</div>
<div style="display:flex;align-items:center;gap:.5rem">
<button id="install-app-btn" class="btn btn-primary" style="padding:.4rem .6rem;line-height:0" aria-label="Add to Home Screen" title="Add to Home Screen">
<img src="/static/images/add_to_home_screen.svg" alt="" style="width:22px;height:22px;display:block;filter:invert(1)" />
</button>
<button id="map-btn" class="btn btn-ghost hidden" style="padding:.4rem .6rem;line-height:0" aria-label="Show map">
<img src="/static/images/map.svg" alt="Map" style="width:22px;height:22px;filter:invert(1)" />
</button>
@@ -184,7 +188,7 @@
</div>
</div>
<!-- ── PWA install banner ──────────────────────────────────────────────── -->
<!-- ── PWA install banner ─────────────────────────────────────────────────────── -->
<div id="install-banner" class="install-banner hidden" role="banner" aria-label="Install app">
<div class="install-banner-body">
<img src="/static/images/logo.svg" alt="" class="install-banner-icon" />
@@ -200,6 +204,7 @@
</div>
<script src="/static/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pwa-add-to-homescreen@4/dist/add-to-homescreen.min.js"></script>
<script src="/static/app.js"></script>
</body>
</html>