<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<!--
Titre affiché dans l'onglet du navigateur.
Il ne joue aucun rôle de sécurité : il sert seulement à identifier la page.
-->
<title>Damier numérique aléatoire</title>
<!--
Rend l'exemple lisible sur mobile.
Important pour l'ergonomie, mais sans lien direct avec la sécurité.
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
Les styles sont volontairement séparés du HTML.
Cela permet de distinguer la structure, la présentation et le comportement.
-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--
Composant principal.
aria-labelledby relie la zone au titre, ce qui aide les technologies d'assistance
à comprendre le rôle de ce bloc.
-->
<main class="pin-component" aria-labelledby="pin-title">
<h1 id="pin-title">Saisie du code confidentiel</h1>
<!--
Texte d'aide court.
Il explique l'action attendue sans donner de détail technique inutile.
-->
<p class="pin-help">Cliquez sur les chiffres du damier pour composer votre code.</p>
<!--
Affichage de la progression.
Nous ne montrons pas les chiffres saisis, seulement le nombre de chiffres déjà choisis.
Attention : cela masque l'information à l'écran, mais cela ne rend pas la saisie
secrète côté navigateur. Le JavaScript connaît encore les chiffres sélectionnés.
-->
<div class="pin-display" aria-label="Progression de la saisie">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<!--
Le clavier numérique n'est pas écrit directement dans le HTML.
Il sera généré par JavaScript afin de pouvoir mélanger les chiffres à chaque affichage.
Ce choix rend l'exemple plus dynamique, mais il ne constitue pas une protection forte :
le navigateur reçoit et exécute le script.
-->
<div class="pin-pad" aria-label="Clavier numérique"></div>
<!--
Actions disponibles pendant la saisie.
type="button" évite qu'un bouton déclenche l'envoi d'un formulaire par défaut.
-->
<div class="pin-actions">
<button type="button" id="clear-last">Effacer</button>
<button type="button" id="clear-all">Recommencer</button>
</div>
<!--
Zone de retour après vérification serveur.
aria-live="polite" permet d'annoncer le message sans interrompre brutalement la lecture
par une technologie d'assistance.
-->
<p class="pin-result" aria-live="polite"></p>
</main>
<!--
Le JavaScript est chargé en fin de page pour que les éléments HTML existent déjà
lorsque le script les sélectionne.
-->
<script src="app.js"></script>
</body>
</html>