GiePlaces/index.html

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Carte de France interactive."
    />
    <meta name="theme-color" content="#1f2328" />
    <meta
      name="robots"
      content="noindex, nofollow, noarchive, nosnippet, noimageindex, notranslate"
    />
    <meta
      name="googlebot"
      content="noindex, nofollow, noarchive, nosnippet, noimageindex"
    />
    <meta
      name="bingbot"
      content="noindex, nofollow, noarchive, nosnippet, noimageindex"
    />
    <meta property="og:locale" content="fr_FR" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Carte Intéractive de Gendarmerie" />
    <meta
      property="og:description"
      content="Explorez toutes les communes de France, Corse, DOM, TOM et COM avec tooltip au survol."
    />
    <meta property="og:image" content="./favicon.svg" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="Carte Intéractive de Gendarmerie" />
    <meta
      name="twitter:description"
      content="Carte interactive de la Gendarmerie Départementale."
    />
    <meta name="twitter:image" content="./favicon.svg" />
    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
    <link rel="shortcut icon" href="./favicon.svg" />
    <title>Carte Intéractive de Gendarmerie</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main class="app">
      <header class="map-header">
        <h1>Carte intéractive de la Gendarmerie Départementale</h1>
        <p>France, régions de gendarmerie, groupements, communes et outre-mer</p>
      </header>

      <button
        id="open-mobile-commune-list"
        class="mobile-country-button"
        type="button"
        aria-label="Ouvrir la recherche"
      >
        🔍
      </button>

      <button
        id="toggle-mobile-territories"
        class="mobile-legend-button"
        type="button"
        aria-controls="territory-panel"
        aria-expanded="false"
      >
        Territoires
      </button>

      <aside id="entity-sidebar" class="country-sidebar" aria-label="Liste des éléments">
        <h3 id="entity-list-title">Éléments</h3>
        <input
          id="commune-search"
          class="country-search"
          type="search"
          placeholder="Rechercher..."
          autocomplete="off"
        />
        <p id="commune-list-count" class="country-list-count"></p>
        <ul id="commune-list" class="country-list"></ul>
      </aside>

      <div id="map-shell" class="map" role="img" aria-label="Carte interactive des territoires français">
        <canvas id="map-canvas" class="map-canvas"></canvas>
        <div id="map-status" class="map-status" hidden></div>
      </div>

      <section id="territory-panel" class="legend" aria-live="polite">
        <h3>Territoires</h3>
        <p id="territory-summary" class="legend-copy"></p>
        <ul id="territory-list" class="territory-list"></ul>
      </section>

      <div id="masking-disclaimer" class="masking-disclaimer" hidden>
        <span id="masking-disclaimer-text"></span>
        <button id="open-masking-modal" class="masking-disclaimer-action" type="button">
          Voir le détail
        </button>
      </div>

      <p class="map-footer">
        Création MDC GOUTFER Benjamin -
        <a
          href="https://git.goutfer.fr/benjamin.goutfer/carte-communes-france"
          target="_blank"
          rel="noopener noreferrer"
          aria-label="Consulter la source officielle des données"
          >En savoir plus</a
        >
      </p>
    </main>

    <div id="map-tooltip" class="map-tooltip" aria-hidden="true"></div>

    <div
      id="commune-list-modal"
      class="country-list-modal"
      aria-hidden="true"
      role="dialog"
      aria-modal="true"
      aria-labelledby="commune-list-modal-title"
    >
      <div class="country-list-modal-content">
        <div class="country-list-modal-head">
          <h2 id="commune-list-modal-title">Rechercher</h2>
          <button
            id="close-commune-list-modal"
            class="close"
            aria-label="Fermer la recherche"
          >
            ×
          </button>
        </div>
        <input
          id="commune-search-mobile"
          class="country-search"
          type="search"
          placeholder="Rechercher..."
          autocomplete="off"
        />
        <p id="commune-list-count-mobile" class="country-list-count"></p>
        <ul id="commune-list-mobile" class="country-list"></ul>
      </div>
    </div>

    <div id="commune-modal" class="modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="modal-title">
      <div class="modal-content">
        <button id="close-modal" class="close" aria-label="Fermer la fenêtre">×</button>
        <h2 id="modal-title">Élément sélectionné</h2>
        <p id="commune-name"></p>
        <p id="commune-territory" class="country-category"></p>
        <div id="commune-data" class="country-data"></div>
        <button id="modal-open-territory" class="modal-action" type="button" hidden></button>
      </div>
    </div>

    <div id="masking-modal" class="modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="masking-modal-title">
      <div class="modal-content masking-modal-content">
        <button id="close-masking-modal" class="close" aria-label="Fermer la fenêtre">×</button>
        <h2 id="masking-modal-title">Zones masquées</h2>
        <p id="masking-modal-summary"></p>
        <div id="masking-modal-data" class="masking-modal-data"></div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>