ettore.dreucci/lagomareGates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add map with gates

Browse Source
This commit is contained in:
Ettore
2026-05-10 17:56:49 +02:00
parent 9f703c1bfa
commit 7e84587788
21 changed files with 865 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/static/index.html
View File

@@ -8,9 +8,10 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>Lagomare Gates</title>
<link rel="manifest" href="/manifest.json" />
<link rel="icon" type="image/svg+xml" href="/static/logo.svg" />
<link rel="apple-touch-icon" href="/static/mobile_icon.png" />
<link rel="icon" type="image/svg+xml" href="/static/images/logo.svg" />
<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" />
<style>
/* ── Login view ──────────────────────────────────────────────────────── */
@@ -90,13 +91,31 @@
justify-content: center;
color: var(--text-muted);
}
/* ── Map modal ─────────────────────────────────────────────────────── */
#map-modal .modal {
width: min(96vw, 700px);
padding: 0;
overflow: hidden;
}
#map-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: .85rem 1.1rem;
border-bottom: 1px solid var(--border);
}
#map-modal-header h3 { font-size: 1rem; font-weight: 700; }
#map { height: min(60vh, 480px); }
/* Fix Leaflet default icon paths */
.leaflet-default-icon-path { background-image: url(/static/images/marker-icon.png); }
</style>
</head>
<body>
<!-- ── Login view ──────────────────────────────────────────────────────── -->
<div id="login-view">
<img src="/static/logo.svg" alt="Lagomare" style="width:72px;height:72px;object-fit:contain;margin-bottom:.5rem" />
<img src="/static/images/logo.svg" alt="Lagomare" style="width:72px;height:72px;object-fit:contain;margin-bottom:.5rem" />
<h1>Lagomare Gates</h1>
<div class="card" style="margin-top:2rem">
<form id="login-form">
@@ -125,17 +144,31 @@
<div id="gates-view" class="hidden">
<header class="app-header">
<div style="display:flex;align-items:center;gap:.75rem">
<img src="/static/logo.svg" alt="" style="width:50px;height:50px;object-fit:contain;flex-shrink:0" />
<img src="/static/images/logo.svg" alt="" style="width:50px;height:50px;object-fit:contain;flex-shrink:0" />
<div class="app-header h2">Lagomare Gates</div>
</div>
<button id="logout-btn" class="btn btn-ghost" style="font-size:.85rem;padding:.5rem 1rem">
Logout
</button>
<div style="display:flex;align-items:center;gap:.5rem">
<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>
<button id="logout-btn" class="btn btn-ghost" style="font-size:.85rem;padding:.5rem 1rem">Logout</button>
</div>
</header>
<div id="loading-gates">Loading gates…</div>
<div id="gates-grid" class="hidden"></div>
</div>
<!-- ── Map modal ──────────────────────────────────────────────────────── -->
<div id="map-modal" class="modal-backdrop hidden">
<div class="modal">
<div id="map-modal-header">
<h3>Map</h3>
<button id="map-close" class="btn btn-ghost" style="padding:.35rem .8rem;font-size:.85rem">✕</button>
</div>
<div id="map"></div>
</div>
</div>
<!-- ── Toast ───────────────────────────────────────────────────────────── -->
<div id="toast" class="toast hidden" aria-live="assertive"></div>
@@ -154,7 +187,7 @@
<!-- ── 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/logo.svg" alt="" class="install-banner-icon" />
<img src="/static/images/logo.svg" alt="" class="install-banner-icon" />
<div class="install-banner-text">
<strong>Add to Home Screen</strong>
<span>Install Lagomare Gates for quick access</span>
@@ -166,6 +199,7 @@
</div>
</div>
<script src="/static/leaflet.js"></script>
<script src="/static/app.js"></script>
</body>
</html>