> For the complete documentation index, see [llms.txt](https://ksaar.gitbook.io/ksaar-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ksaar.gitbook.io/ksaar-documentation/design/bibliotheque-delements-html.md).

# Bibliothèque d'éléments HTML

Cette page recense plusieurs exemples d'éléments HTML qui peuvent s'intégrer dans votre application. Veillez à ajouter les variables nécessaires dans le code afin d'exploiter entièrement la capacité de ces éléments.

Ces éléments sont destinés à une utilisation avancée de Ksaar et ne sont absolument pas nécessaires au bon fonctionnement de votre application.

## Champs non modifiables

### Champ texte non modifiable de taille automatique

<details>

<summary>Code</summary>

```html
<p style="font-family: {font};">Voici un champ non modifiable</p>
	<div style="width: 100%; height:auto;min-height: 52px; border: 1px solid #e0e5e9; border-radius: 4px; padding: 12px; margin-bottom: 24px; background-color: #eee; margin-top: 8px; align-items: center; white-space: normal; text-overflow: ellipsis >
	<p style="margin: 0;">Valeur du champ</p>
</div>
```

</details>

Exemple de rendu :&#x20;

<figure><img src="/files/x3RpfEYTrYsKZujgQiaU" alt=""><figcaption><p>Exemple de bloc non modifiable côté maker</p></figcaption></figure>

### Champ single select non modifiable

<details>

<summary>Code</summary>

Veillez à adapter les réponses `data-option` avec les réponses présentes dans votre champ.

```html
  <style>
    .options {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      /* ← nombre de colonnes modifiable (4 ici) */
      gap: 16px;
      padding: 20px;
      width: 100%;
    }

    .option {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100px;
      border: 1px solid #ccc;
      border-radius: 10px;
      background-color: #fff;
      color: #333;
      font-weight: normal;
      text-align: center;
      width: 100%;
      font-size: 16px;
      transition: all 0.2s ease-in-out;
    }

    .options[data-value="Oui"] .option[data-option="Oui"],
    .options[data-value="Non"] .option[data-option="Non"],
    .options[data-value="Peut-être"] .option[data-option="Peut-être"],
    .options[data-value="NSP"] .option[data-option="NSP"] {
      border-color: #018291;
      /* ← couleur de la bordure des boutons */
      background-color: #e0f7fa;
      /* ← couleur du fond des boutons */
      color: #018291;
      /* ← couleur du texte */
      font-weight: bold;
    }
  </style>

  <div class="options" data-value="{Single Select 9}"> <!-- Source du QCU -->
    <div class="option" data-option="Oui">Oui</div>
    <div class="option" data-option="Non">Non</div>
    <div class="option" data-option="Peut-être">Peut-être</div>
    <div class="option" data-option="NSP">NSP</div>
    <!-- Liste des options avec possibilité d'en ajouter autant qu'on le souhaite -->
  </div>
```

</details>

Exemple de rendu :&#x20;

<figure><img src="/files/OVsWSWovMSfhCHwg81xG" alt=""><figcaption></figcaption></figure>

## Jauge&#x20;

<details>

<summary>Code</summary>

```html
<style>
	meter {
	width: 100%;
	height: 30px; /* Ajustez la hauteur de la jauge */
}

/* Définissez les couleurs pour différentes plages de valeurs */
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value {
    background: linear-gradient(to right,
        #4CAF50 0%, /* Vert 0% */
        #FFC107 50%, /* Jaune 50% */
        #FF5722 100%); /* Rouge 100% */
}
</style>

<h7> Titre : <span id="criticiteValeur">{Votre Nombre} / 100</span></h7> <!-- Remplacez la valeur par votre variable -->

<meter min="1" max="100" value="{Votre Nombre}"></meter> <!-- Remplacez la valeur par votre variable -->
```

</details>

Exemple de rendu :&#x20;

<figure><img src="/files/dFa1tihNatxTJnTHesCB" alt=""><figcaption><p>Exemple de jauge html côté utilisateur final</p></figcaption></figure>

## Frises

### Frise à bulles

<details>

<summary>Code</summary>

```html
<style>

        .timeline {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 80%;
            max-width: 900px;
            position: relative;
        }

        .timeline::before {
            content: "";
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
            height: 5px;
            background-color: #ddd;
            z-index: 0;
        }

        .step {
            position: relative;
            text-align: center;
            z-index: 1;
        }

        .step .circle {
            width: 40px;
            height: 40px;
            border: 3px solid #ddd;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto 10px;
            background-color: #fff;
            font-weight: bold;
            color: #999;
        }

        .step.active .circle, .step.completed .circle {
            border-color: #a0c333;
        }

        .step.active .circle {
            background-color: #a0c333;
            color: white;
        }

        .step.completed .circle {
            background-color: white;
            color: #a0c333;
        }

        .step .label {
            font-size: 14px;
            color: #555;
        }

        .step.active .label, .step.completed .label {
            color: #a0c333;
        }
    </style>
    
    <div class="timeline">
        <div class="step completed">
            <div class="circle">&#x2713;</div>
            <div class="label">Transmis</div>
        </div>
        <div class="step active" aria-current="step">
            <div class="circle">2</div>
            <div class="label">Rendez-vous</div>
        </div>
        <div class="step">
            <div class="circle">3</div>
            <div class="label">Devis</div>
        </div>
        <div class="step">
            <div class="circle">4</div>
            <div class="label">Chantier planifié</div>
        </div>
        <div class="step">
            <div class="circle">5</div>
            <div class="label">Clôturé</div>
        </div>
    </div>
```

</details>

Exemple de rendu :&#x20;

<figure><img src="/files/JOQj94u5gmgKVw7xC2jg" alt="" width="563"><figcaption><p>Exemple de frise à étapes côté utilisateur final</p></figcaption></figure>

### Frise à étapes

<details>

<summary>Code</summary>

```html
<style>
  .step h2 {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
    line-height: 1.4;
    /* Ajuste cet valeur pour changer l'espacement entre les lignes */
  }

  .timeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Adjusted to use available width without scrolling */
    padding: 20px;
    align-items: stretch;
  }

  .step {
    flex: 1;
    /* Flex grow to fill the space */
    margin: 10px;
    padding: 20px;
    background-color: #d6eaff;
    /* Default color, each step will have its own */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
  }

  .step h2 {
    font-size: 16px;
    /* Smaller font size */
    color: #333;
    margin-bottom: 10px;
  }

  .step p {
    font-size: 12px;
    /* Smaller font size */
    color: #666;
  }

  /* Arrows between steps */
  .step::after {
    content: '→';
    position: absolute;
    right: -20px;
    top: 50%;
    font-size: 24px;
    color: #ccc;
  }

  .step:last-child::after {
    content: '';
  }

  /* Colors for each step */
  .step1 {
    background-color: #ffdede;
  }

  .step2 {
    background-color: #e9d6ff;
  }

  .step3 {
    background-color: #d6f5d6;
  }

  .step4 {
    background-color: #ffd6a5;
  }

  .step5 {
    background-color: #a5c8ff;
  }
</style>
</head>

<body>
  <div class="timeline">
    <div class="step step1">
      <h2>Présentation de tes Projets</h2>
      <p>Fournis les coordonnées et détails de deux projets facturés et en production.</p>
    </div>
    <div class="step step2">
      <h2>Rencontre avec un Membre Certifié</h2>
      <p>Discussion sur tes ambitions et retour d'expérience.</p>
    </div>
    <div class="step step3">
      <h2>Discussion sur tes Objectifs et Maîtrise</h2>
      <p>Échange approfondi sur ta maîtrise de l'outil.</p>
    </div>
    <div class="step step4">
      <h2>Questionnaire Ksaar Certified</h2>
      <p>Réussis un questionnaire sur des thèmes clés pour valider la certification.</p>
    </div>
    <div class="step step5">
      <h2>Signature du Contrat de Partenariat</h2>
      <p>Signe le contrat qui formalise ton statut de freelance certifié par Ksaar.</p>
    </div>
  </div>
</body>

</html>
```

</details>

Exemple de rendu :&#x20;

<figure><img src="/files/aQBbFRaAY4RZPaHSuvMr" alt="" width="563"><figcaption><p>Exemple de frise à étapes côté utilisateur final</p></figcaption></figure>

## Infobulle pop-up

<details>

<summary>Code</summary>

```html
<style>
  #infoVoies .modal-toggle {
    display: none;
  }

  #infoVoies .modal-label {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    line-height: 1;
  }

  #infoVoies .modal-box {
    display: none;
    position: fixed;
    z-index: 1050;
    top: 50%;
    left: 50%;
    width: 90%;
    max-width: 500px;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: .3rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    padding: 1.5rem;
  }

  #infoVoies .modal-backdrop {
    display: none;
  }

  #infoVoies .modal-toggle:checked + .modal-backdrop {
    display: block;
    position: fixed;
    z-index: 1040;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
  }

  #infoVoies .modal-toggle:checked ~ .modal-box {
    display: block;
  }

  #infoVoies .close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.5rem;
    color: #000;
    cursor: pointer;
  }

  #infoVoies h6 {
    display: inline;
  }

  #infoVoies .modal-label {
    margin-left: 0.5rem;
  }

#infoVoies.container {
  padding: 0 !important;
}

</style>

<div id="infoVoies" class="container my-2">
  <input type="checkbox" id="toggleInfoVoies" class="modal-toggle" />

  <h6>Nombre de voies impactée(s)</h6>
  <label for="toggleInfoVoies" class="modal-label" title="Voir la définition">ℹ️</label>

  <label for="toggleInfoVoies" class="modal-backdrop"></label>

  <div class="modal-box text-left">
    <label for="toggleInfoVoies" class="close-modal">&times;</label>
    <h5><strong>Définition</strong></h5>
    <p>Cette variable indique le nombre total de voies affectées à la circulation générale (sans distinction de sens), en section courante, hors bande d'arrêt d'urgence (BAU), accotement, trottoir et voies réservées : voie de stationnement, bande cyclable, voies bus, etc.</p>
    <p>Les voies d'insertion ou de décélération ainsi que les voies lentes doivent être comptabilisées.</p>
  </div>
</div>
```

</details>

Exemple de rendu :&#x20;

{% columns %}
{% column width="41.66666666666667%" %}

<figure><img src="/files/FDTzSjmrEeIL9YKoOvqx" alt=""><figcaption><p>Exemple d'infobulle non active</p></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/UUL6lSvAxSmAEZNOCMdo" alt=""><figcaption><p>Exemple d'infobulle active au clic sur l'emoji</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://ksaar.gitbook.io/ksaar-documentation/design/bibliotheque-delements-html.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.