68 lines
2.3 KiB
HTML
68 lines
2.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>
|
|
|
|
<div id="slider-panel" class="map-panel">
|
|
<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>
|
|
<select id="region-select">
|
|
<option value="">Toutes les régions</option>
|
|
{{range .Regions}}
|
|
<option value="{{.}}">{{.}}</option>
|
|
{{end}}
|
|
</select>
|
|
<div style="display:flex; align-items:center; gap:6px; margin-bottom:10px;">
|
|
<div class="fuel-btns" id="cluster-btns" style="margin-bottom:0;">
|
|
<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>
|
|
<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>
|
|
|
|
<div id="last-updated" class="map-panel">{{.LastUpdated}}</div>
|
|
|
|
<div id="legend" class="map-panel">
|
|
<h3 id="legend-title">Prix régulier (¢/L)</h3>
|
|
<div class="legend-gradient"></div>
|
|
<div class="legend-labels">
|
|
<span id="min-price">-</span>
|
|
<span id="max-price">-</span>
|
|
</div>
|
|
<div id="map-stats">{{.StationCount}} stations</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
window.__stations = {{.StationsJSON}};
|
|
window.__deltas = {{.DeltasJSON}};
|
|
</script>
|
|
<script src="/map.js"></script>
|
|
{{end}}
|