index.html

<!doctype html>
<html lang="fr" data-fr-scheme="system">
  <head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="dsfr/dsfr.min.css">
    <link rel="stylesheet" href="dsfr/utility/utility.min.css">

    <meta name="theme-color" content="#000091"><!-- Défini la couleur de thème du navigateur (Safari/Android) -->
    <link rel="apple-touch-icon" href="dsfr/favicon/apple-touch-icon.png"><!-- 180×180 -->
    <link rel="icon" href="dsfr/favicon/favicon.svg" type="image/svg+xml">
    <link rel="shortcut icon" href="dsfr/favicon/favicon.ico" type="image/x-icon"><!-- 32×32 -->
    <link rel="manifest" href="dsfr/favicon/manifest.webmanifest" crossorigin="use-credentials">
    <!-- Modifier les chemins relatifs des favicons en fonction de la structure du projet -->
    <!-- Dans le fichier manifest.webmanifest aussi, modifier les chemins vers les images -->

    <title>Portail de demande de badges d'accès au site de Lyon Saint Exupéry du SNA-CE</title>
  </head>
  <body>

<header role="banner" class="fr-header">
    <div class="fr-header__body">
        <div class="fr-container">
            <div class="fr-header__body-row">
                <div class="fr-header__brand fr-enlarge-link">
                    <div class="fr-header__brand-top">
                        <div class="fr-header__logo">
                            <a href="/" title="Accueil - SNA-CE">
                                <p class="fr-logo">
                                    SNA-CE
                                    <br>Lyon
                                </p>
                            </a>
                        </div>
                        <div class="fr-header__navbar">
                            <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-491"  id="button-492" title="Menu">
                                Menu
                            </button>
                        </div>
                    </div>
                    <div class="fr-header__service">
                        <a href="/" title="Accueil - Portail Badges - SNA-CE">
                            <p class="fr-header__service-title">
                                Portail Badges - SNA-CE
                            </p>
                        </a>
                        <p class="fr-header__service-tagline">Site de Lyon Saint Exupéry</p>
                    </div>
                </div>
                <div class="fr-header__tools">
                  <div class="fr-header__tools-links">
                    <ul class="fr-btns-group">
                        <li>
                            <button class="fr-btn fr-icon-theme-fill" aria-controls="fr-theme-modal" data-fr-opened="false">Paramètres d'affichage</button>
                        </li>
                    </ul>
                </div>
              </div>
            </div>
        </div>
    </div>
    <!--
    <div class="fr-header__menu fr-modal" id="modal-491" aria-labelledby="button-492">
        <div class="fr-container">
            <button class="fr-btn--close fr-btn" aria-controls="modal-491" title="Fermer">
                Fermer
            </button>
            <div class="fr-header__menu-links">
            </div>
            <nav class="fr-nav" id="navigation-494" role="navigation" aria-label="Menu principal">
                <ul class="fr-nav__list">
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    -->
</header>

<p></p>

<div class="fr-container">

  <div class="fr-grid-row fr-mb-3w fr-grid-row--gutters">
    <div class="fr-col fr-col-md-3">
        <div class="fr-card fr-enlarge-link">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="https://dgaviationcivile.sharepoint.com/:l:/t/SNA-CE-Sret/FJwuZ1S_ksZAte4pkg-BfiwBqPudjPx9akEzOcQGbIxLng?nav=ZDJiZmZjZTMtM2RjOS00Nzg0LTk5ODMtNTk1YmQ3NWFmOTFl">Obtenir un badge visiteur Accompagné</a>
                    </h3>
                    <p class="fr-card__desc">
                    Toute personne souhaitant accéder aux bâtiments du SNA-CE à Lyon doit être accompagné durant toute la visite et porter de manière apparente un badge. La demande de badge est à faire par l'accompagnateur au moins 48h avant la visite.</p>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-responsive-img" src="/img/placeholder.16x9.png" alt="Photo d'un badge A">
                </div>
            </div>
        </div>
    </div>

    <div class="fr-col fr-col-md-3">
        <div class="fr-card fr-enlarge-link">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Obtenir un badge Visiteur non accompagné.</a>
                    </h3>
                    <p class="fr-card__desc">

                    </p>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-responsive-img" src="/img/placeholder.16x9.png" alt="Photo d'un badge V">
                </div>
            </div>
        </div>
    </div>


    <div class="fr-col fr-col-md-3">
        <div class="fr-card fr-enlarge-link">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Obtenir un badge d'accès permanent nominatif</a>
                    </h3>
                    <p class="fr-card__desc"></p>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-responsive-img" src="/img/placeholder.16x9.png" alt="Photo d'un badge bleu Lyon">
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>

    <div class="fr-col fr-col-md-3">
        <div class="fr-card fr-enlarge-link">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Obtenir un badge d'accès en ZSAR</a>
                    </h3>
                    <p class="fr-card__desc"></p>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-responsive-img" src="/img/placeholder.16x9.png" alt="Photo d'un badge rouge ZSAR">
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>


  </div>


</div>


<dialog id="fr-theme-modal" class="fr-modal" role="dialog" aria-labelledby="fr-theme-modal-title">
    <div class="fr-container fr-container--fluid fr-container-md">
        <div class="fr-grid-row fr-grid-row--center">
            <div class="fr-col-12 fr-col-md-6 fr-col-lg-4">
                <div class="fr-modal__body">
                    <div class="fr-modal__header">
                        <button class="fr-btn--close fr-btn" aria-controls="fr-theme-modal" id="button-5622" title="Fermer">
                            Fermer
                        </button>
                    </div>
                    <div class="fr-modal__content">
                        <h1 id="fr-theme-modal-title" class="fr-modal__title">
                            Paramètres d’affichage
                        </h1>
                        <div id="fr-display" class="fr-display">
                            <fieldset class="fr-fieldset" id="display-fieldset">
                                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="display-fieldset-legend">
                                    Choisissez un thème pour personnaliser l’apparence du site.
                                </legend>
                                <div class="fr-fieldset__element">
                                    <div class="fr-radio-group fr-radio-rich">
                                        <input value="light" type="radio" id="fr-radios-theme-light" name="fr-radios-theme">
                                        <label class="fr-label" for="fr-radios-theme-light">
                                            Thème clair
                                        </label>
                                        <div class="fr-radio-rich__img">
                                            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                                                <use class="fr-artwork-decorative" href="/img/artwork/pictograms/environment/sun.svg#artwork-decorative"></use>
                                                <use class="fr-artwork-minor" href="/img/artwork/pictograms/environment/sun.svg#artwork-minor"></use>
                                                <use class="fr-artwork-major" href="/img/artwork/pictograms/environment/sun.svg#artwork-major"></use>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                                <div class="fr-fieldset__element">
                                    <div class="fr-radio-group fr-radio-rich">
                                        <input value="dark" type="radio" id="fr-radios-theme-dark" name="fr-radios-theme">
                                        <label class="fr-label" for="fr-radios-theme-dark">
                                            Thème sombre
                                        </label>
                                        <div class="fr-radio-rich__img">
                                            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                                                <use class="fr-artwork-decorative" href="/img/artwork/pictograms/environment/moon.svg#artwork-decorative"></use>
                                                <use class="fr-artwork-minor" href="/img/artwork/pictograms/environment/moon.svg#artwork-minor"></use>
                                                <use class="fr-artwork-major" href="/img/artwork/pictograms/environment/moon.svg#artwork-major"></use>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                                <div class="fr-fieldset__element">
                                    <div class="fr-radio-group fr-radio-rich">
                                        <input value="system" type="radio" id="fr-radios-theme-system" name="fr-radios-theme">
                                        <label class="fr-label" for="fr-radios-theme-system">
                                            Système
                                            <span class="fr-hint-text">Utilise les paramètres système</span>
                                        </label>
                                        <div class="fr-radio-rich__img">
                                            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                                                <use class="fr-artwork-decorative" href="/img/artwork/pictograms/system/system.svg#artwork-decorative"></use>
                                                <use class="fr-artwork-minor" href="/img/artwork/pictograms/system/system.svg#artwork-minor"></use>
                                                <use class="fr-artwork-major" href="/img/artwork/pictograms/system/system.svg#artwork-major"></use>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</dialog>


    <!-- Script en version es6 module et nomodule pour les navigateurs le ne supportant pas -->
    <script type="module" src="./dsfr/dsfr.module.min.js"></script>
    <script type="text/javascript" nomodule src="./dsfr/dsfr.nomodule.min.js"></script>
  </body>
</html>