85 lines
4.3 KiB
HTML
85 lines
4.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>
|
|
<a href="https://github.com/Polensky/prixdugaz" target="_blank" rel="noopener noreferrer" class="github-link" aria-label="GitHub">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.868-.013-1.703-2.782.605-3.369-1.342-3.369-1.342-.454-1.154-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836a9.59 9.59 0 0 1 2.504.337c1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.744 0 .267.18.579.688.481C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z"/>
|
|
</svg>
|
|
</a>
|
|
</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>
|