new stack

This commit is contained in:
Polen 2026-04-07 21:42:30 -04:00
parent 6922e9d63b
commit ac9737b125
10 changed files with 1476 additions and 1221 deletions

68
templates/map.html Normal file
View file

@ -0,0 +1,68 @@
{{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}}