CarteVoyageGie/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 mondiale interactive des destinations de voyage et des niveaux d'autorisation pour les militaires de la Gendarmerie."
    />
    <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 des destinations de voyage - Militaires de la Gendarmerie"
    />
    <meta
      property="og:description"
      content="Consultez une carte du monde interactive avec catégories d'autorisation, recherche pays et détails de procédure."
    />
    <meta property="og:url" content="https://git.goutfer.fr/benjamin/CarteVoyageGie" />
    <meta property="og:site_name" content="CarteVoyageGie" />
    <meta property="og:image" content="./favicon.svg" />
    <meta name="twitter:card" content="summary" />
    <meta
      name="twitter:title"
      content="Carte des destinations de voyage - Militaires de la Gendarmerie"
    />
    <meta
      name="twitter:description"
      content="Carte du monde interactive avec niveaux d'autorisation et détails par pays."
    />
    <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 du monde interactive</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main class="app">
      <header class="map-header">
        <h1>Carte des destinations de voyage</h1>
        <p>Militaires de la Gendarmerie</p>
      </header>

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

      <button
        id="toggle-mobile-legend"
        class="mobile-legend-button"
        type="button"
        aria-controls="category-legend"
        aria-expanded="false"
      >
        Légende
      </button>

      <aside class="country-sidebar" aria-label="Liste des pays">
        <h3>Pays</h3>
        <input
          id="country-search"
          class="country-search"
          type="search"
          placeholder="Rechercher un pays..."
          autocomplete="off"
        />
        <p id="country-list-count" class="country-list-count"></p>
        <ul id="country-list" class="country-list"></ul>
      </aside>

      <div id="map" class="map" role="img" aria-label="Carte du monde interactive"></div>
      <section id="category-legend" class="legend" aria-live="polite"></section>
      <p class="map-footer">
        Création MDC GOUTFER Benjamin -
        <a
          href="https://git.goutfer.fr/benjamin/CarteVoyageGie"
          target="_blank"
          rel="noopener noreferrer"
          aria-label="En savoir plus"
          >En savoir plus</a
        >
      </p>
    </main>
    <div id="map-tooltip" class="map-tooltip" aria-hidden="true"></div>

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

    <div id="country-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">Pays sélectionné</h2>
        <p id="country-name"></p>
        <p id="country-category" class="country-category"></p>
        <div id="country-data" class="country-data"></div>
      </div>
    </div>

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