77 lines
3 KiB
HTML
77 lines
3 KiB
HTML
{{define "map-content"}}
|
|
<!-- Loading overlay -->
|
|
<div id="loading">
|
|
<div aria-busy="true"></div>
|
|
<span>Chargement des données...</span>
|
|
</div>
|
|
|
|
<!-- ── MAP PAGE ── -->
|
|
<div id="page-map">
|
|
<div id="map"></div>
|
|
|
|
<button id="filter-toggle" class="map-panel" aria-label="Filtres">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
|
|
<span>Filtres</span>
|
|
</button>
|
|
|
|
<div id="slider-panel" class="map-panel">
|
|
<select id="region-select">
|
|
<option value="">Toutes les régions</option>
|
|
{{range .Regions}}
|
|
<option value="{{.}}">{{.}}</option>
|
|
{{end}}
|
|
</select>
|
|
<div class="fuel-btns">
|
|
<button class="fuel-btn active" data-fuel="regular">Régulier</button>
|
|
<button class="fuel-btn" data-fuel="super">Super</button>
|
|
<button class="fuel-btn" data-fuel="diesel">Diesel</button>
|
|
</div>
|
|
<div class="cluster-row" style="display:flex; align-items:center; gap:6px; margin-bottom:10px;">
|
|
<div class="fuel-btns" id="cluster-btns" style="margin-bottom:0; flex:1;">
|
|
<button class="fuel-btn cluster-btn" data-mode="min">Min</button>
|
|
<button class="fuel-btn cluster-btn active" data-mode="avg">Moy</button>
|
|
<button class="fuel-btn cluster-btn" data-mode="max">Max</button>
|
|
</div>
|
|
<div class="cluster-info-tip">
|
|
?
|
|
<div class="cluster-info-tooltip">
|
|
Prix affiché sur chaque groupe de stations :<br><br>
|
|
<strong>Min</strong> — prix le plus bas du groupe<br>
|
|
<strong>Moy</strong> — prix moyen du groupe<br>
|
|
<strong>Max</strong> — prix le plus élevé du groupe<br><br>
|
|
La couleur reflète également la valeur affichée.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cluster-hint">Prix affiché sur chaque groupe de stations.</div>
|
|
<label style="display:flex; align-items:center; gap:6px; margin-bottom:10px; font-size:14px; cursor:pointer;">
|
|
<input type="checkbox" role="switch" id="costco-toggle" checked>
|
|
Costco
|
|
</label>
|
|
<label for="price-slider">Prix max: <span id="slider-label">-</span></label>
|
|
<input type="range" id="price-slider" min="0" max="300" step="0.5" value="300">
|
|
<div id="slider-value">
|
|
<span id="slider-min">-</span>
|
|
<span id="slider-max">-</span>
|
|
</div>
|
|
<div id="visible-count"></div>
|
|
<div id="legend">
|
|
<div class="legend-header" id="legend-title">Régulier (¢/L)</div>
|
|
<div class="legend-gradient"></div>
|
|
<div class="legend-labels">
|
|
<span id="min-price">-</span>
|
|
<span id="max-price">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="filter-backdrop"></div>
|
|
<div id="last-updated" class="map-panel">{{.LastUpdated}}</div>
|
|
</div>
|
|
|
|
<script>
|
|
window.__stations = {{.StationsJSON}};
|
|
window.__deltas = {{.DeltasJSON}};
|
|
</script>
|
|
<script src="/map.js"></script>
|
|
{{end}}
|