Arnaud
5633969d98
Carte Leaflet (annuaire Éducation nationale) + API PHP/MySQL : fiche établissement (effectifs, IPS, population INSEE, DPE ADEME), GED documents/photos, commentaires par groupe, gestion utilisateurs et politique de mots de passe. Imports opendata (effectifs, IPS, population, DPE, IRIS). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
184 lines
7.5 KiB
HTML
184 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Carte des établissements scolaires — France</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="style.css"/>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<aside id="sidebar">
|
||
<header>
|
||
<h1>Établissements scolaires</h1>
|
||
<p class="subtitle">Annuaire de l'Éducation nationale</p>
|
||
<p id="count" class="count">Chargement…</p>
|
||
</header>
|
||
|
||
<div class="filters">
|
||
<div class="field">
|
||
<label for="search">Recherche (nom / commune)</label>
|
||
<input type="search" id="search" placeholder="Ex. Jean Jaurès, Lyon…" autocomplete="off">
|
||
</div>
|
||
|
||
<fieldset>
|
||
<legend>Type d'établissement</legend>
|
||
<div id="f-type" class="checks"></div>
|
||
</fieldset>
|
||
|
||
<fieldset>
|
||
<legend>Statut</legend>
|
||
<div id="f-stat" class="checks"></div>
|
||
</fieldset>
|
||
|
||
<fieldset>
|
||
<legend>État</legend>
|
||
<div id="f-etat" class="checks"></div>
|
||
</fieldset>
|
||
|
||
<div class="field">
|
||
<label for="f-reg">Région</label>
|
||
<select id="f-reg"></select>
|
||
</div>
|
||
<div class="field">
|
||
<label for="f-aca">Académie</label>
|
||
<select id="f-aca"></select>
|
||
</div>
|
||
<div class="field">
|
||
<label for="f-dep">Département</label>
|
||
<select id="f-dep"></select>
|
||
</div>
|
||
<div class="field">
|
||
<label for="f-circ">Circonscription</label>
|
||
<select id="f-circ"></select>
|
||
</div>
|
||
|
||
<fieldset>
|
||
<legend>Options proposées</legend>
|
||
<div id="f-opt" class="checks"></div>
|
||
<p class="hint">Coché = uniquement les établissements proposant l'option.</p>
|
||
</fieldset>
|
||
|
||
<button id="reset" type="button">Réinitialiser les filtres</button>
|
||
</div>
|
||
|
||
<footer>
|
||
<p><a href="admin.html">🔐 Espace administration</a></p>
|
||
<p>Source : <a href="https://data.education.gouv.fr/explore/dataset/fr-en-annuaire-education/" target="_blank" rel="noopener">data.education.gouv.fr</a> — fond de carte © OpenStreetMap</p>
|
||
</footer>
|
||
</aside>
|
||
|
||
<main id="map"></main>
|
||
</div>
|
||
|
||
<div id="legend" class="legend"></div>
|
||
|
||
<!-- Fiche établissement plein écran (overlay superposé à la carte) -->
|
||
<div id="fiche" class="fiche" hidden>
|
||
<header class="fiche-bar">
|
||
<button id="fiche-back" class="fiche-back" type="button">← Retour à la carte</button>
|
||
<div class="fiche-title">
|
||
<h2 id="fiche-nom">—</h2>
|
||
<span id="fiche-sub" class="fiche-sub"></span>
|
||
</div>
|
||
</header>
|
||
|
||
<nav class="fiche-tabs">
|
||
<button class="fiche-tab active" type="button" data-tab="infos">Informations</button>
|
||
<button class="fiche-tab" type="button" data-tab="docs">Documents</button>
|
||
<button class="fiche-tab" type="button" data-tab="photos">Photothèque</button>
|
||
<button class="fiche-tab" type="button" data-tab="propose">＋ Proposer un élément</button>
|
||
</nav>
|
||
|
||
<div class="fiche-body">
|
||
<section id="tab-infos" class="tab-panel active">
|
||
<div class="tab-actions">
|
||
<button id="fiche-locate" type="button" class="btn-secondary">📍 Localiser sur la carte</button>
|
||
</div>
|
||
<div class="info-cols">
|
||
<div id="info-main" class="info-main"><!-- cartes : identité, coordonnées… --></div>
|
||
<div id="info-side" class="info-side"><!-- commentaires --></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="tab-docs" class="tab-panel">
|
||
<div class="docs-layout">
|
||
<nav id="folder-tree" class="folder-tree"></nav>
|
||
<div id="folder-items" class="folder-items"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="tab-photos" class="tab-panel">
|
||
<div id="photo-grid" class="photo-grid"></div>
|
||
</section>
|
||
|
||
<section id="tab-propose" class="tab-panel">
|
||
<form id="propose-form" class="propose-form" autocomplete="off">
|
||
<p class="propose-intro">
|
||
Proposez un document, une photo ou un lien. Votre proposition sera
|
||
publiée après validation par un administrateur.
|
||
</p>
|
||
|
||
<div class="field">
|
||
<label>Type d'élément</label>
|
||
<div class="radio-row">
|
||
<label><input type="radio" name="kind" value="file" checked> 📄 Fichier</label>
|
||
<label><input type="radio" name="kind" value="photo"> 🖼 Photo</label>
|
||
<label><input type="radio" name="kind" value="link"> 🔗 Lien</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="p-folder">Dossier</label>
|
||
<select id="p-folder" name="folder_id"></select>
|
||
</div>
|
||
|
||
<div class="field" data-when="file photo">
|
||
<label for="p-file">Fichier</label>
|
||
<input id="p-file" type="file">
|
||
</div>
|
||
|
||
<div class="field" data-when="link">
|
||
<label for="p-url">URL du lien</label>
|
||
<input id="p-url" type="url" placeholder="https://…">
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="p-title">Libellé <span class="opt">(facultatif pour un fichier)</span></label>
|
||
<input id="p-title" type="text" name="title" placeholder="Ex. Règlement intérieur 2025">
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="p-desc">Description <span class="opt">(facultatif)</span></label>
|
||
<textarea id="p-desc" name="description" rows="3" placeholder="Texte explicatif : de quoi s'agit-il, contexte, date du document…"></textarea>
|
||
</div>
|
||
|
||
<div class="field-2">
|
||
<div class="field">
|
||
<label for="p-name">Votre nom <span class="opt">(facultatif)</span></label>
|
||
<input id="p-name" type="text" name="submitter_name">
|
||
</div>
|
||
<div class="field">
|
||
<label for="p-mail">Votre e-mail <span class="opt">(facultatif)</span></label>
|
||
<input id="p-mail" type="email" name="submitter_email">
|
||
</div>
|
||
</div>
|
||
|
||
<button type="submit" class="btn-primary">Envoyer la proposition</button>
|
||
<p id="propose-msg" class="propose-msg"></p>
|
||
</form>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<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="fiche.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|