80 lines
3.3 KiB
HTML
80 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Essence Québec</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" />
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" />
|
|
<link rel="stylesheet" href="https://unpkg.com/@knadh/oat/oat.min.css">
|
|
<script src="https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js"></script>
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
|
|
<script src="https://unpkg.com/@knadh/oat/oat.min.js"></script>
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- ── Top nav ── -->
|
|
<header id="topnav">
|
|
<span class="brand">Prix du Gaz</span>
|
|
<nav>
|
|
<a href="/map"
|
|
id="nav-map"
|
|
{{if eq .Page "map"}}aria-current="page"{{end}}
|
|
hx-get="/map"
|
|
hx-target="#content"
|
|
hx-push-url="/map"
|
|
hx-swap="innerHTML"
|
|
hx-on::after-request="window.__onPageSwap && window.__onPageSwap('map')">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21"/>
|
|
<line x1="9" y1="3" x2="9" y2="18"/><line x1="15" y1="6" x2="15" y2="21"/>
|
|
</svg>
|
|
Carte
|
|
</a>
|
|
<a href="/stats"
|
|
id="nav-stats"
|
|
{{if eq .Page "stats"}}aria-current="page"{{end}}
|
|
hx-get="/stats"
|
|
hx-target="#content"
|
|
hx-push-url="/stats"
|
|
hx-swap="innerHTML"
|
|
hx-on::after-request="window.__onPageSwap && window.__onPageSwap('stats')">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="20" x2="18" y2="10"/>
|
|
<line x1="12" y1="20" x2="12" y2="4"/>
|
|
<line x1="6" y1="20" x2="6" y2="14"/>
|
|
</svg>
|
|
Statistiques
|
|
</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- ── Content area (htmx swap target) ── -->
|
|
<div id="content">
|
|
{{if eq .Page "map"}}{{template "map-content" .}}{{end}}
|
|
{{if eq .Page "stats"}}{{template "stats-content-shell" .}}{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Update nav active state after htmx page swaps.
|
|
window.__onPageSwap = function(page) {
|
|
document.querySelectorAll('#topnav nav a').forEach(a => a.removeAttribute('aria-current'));
|
|
const target = document.getElementById('nav-' + page);
|
|
if (target) target.setAttribute('aria-current', 'page');
|
|
};
|
|
|
|
// On browser back/forward, trigger the right content reload.
|
|
window.addEventListener('popstate', function() {
|
|
const path = window.location.pathname;
|
|
const page = path === '/stats' ? 'stats' : 'map';
|
|
htmx.ajax('GET', '/' + page, { target: '#content', swap: 'innerHTML' });
|
|
window.__onPageSwap(page);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|