Horloge d'Antalaha - décor jour et nuit (p5.js)

index.html · 2.7 Ko

<!DOCTYPE html>
<!--
  ============================================================
  Horloge d'Antalaha - tutoriel p5.js (niveau débutant)
  ============================================================
  Cette page contient :
    - le squelette HTML (titre, zone du canevas, commandes) ;
    - le chargement de p5.js puis de NOS scripts, dans l'ordre.

  L'ordre des scripts est important : p5.js d'abord (il fournit
  createCanvas, map, lerpColor...), puis nos fichiers. Le dernier,
  sketch.js, contient setup() et draw() que p5 appelle tout seul.
-->
<html lang="fr">
<head>
  <meta charset="utf-8">
  <!-- "viewport" : indispensable pour que la page s'adapte aux téléphones -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Horloge d'Antalaha</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <h1>Horloge d'Antalaha</h1>
    <p class="sous-titre">Le décor change selon l'heure : aube, jour, crépuscule, nuit.</p>
  </header>

  <main>
    <!-- p5 va placer son canevas dans cette boîte (voir setup() dans sketch.js).
         role="img" + aria-label : description pour les lecteurs d'écran. -->
    <div id="conteneur-canvas" role="img"
         aria-label="Horloge analogique devant un paysage de la baie d'Antalaha dont les couleurs changent selon l'heure"></div>

    <!-- Texte accessible : l'heure en toutes lettres, mis à jour par sketch.js -->
    <p id="texte-heure" class="texte-heure">Chargement…</p>
    <p id="texte-date" class="texte-date"></p>

    <!-- Commandes pour voyager dans le temps (sans attendre la nuit !) -->
    <section class="commandes" aria-label="Simuler une heure">
      <label for="curseur-heure">Simuler une heure : <strong id="valeur-curseur">heure réelle</strong></label>
      <input id="curseur-heure" type="range" min="0" max="23.99" step="0.05" value="12">
      <button id="bouton-reel" type="button">Revenir à l'heure réelle</button>
    </section>

    <noscript>
      <p class="avertissement">Cette horloge a besoin de JavaScript pour fonctionner.
         Activez-le dans votre navigateur pour la voir tourner.</p>
    </noscript>
  </main>

  <footer>
    <p>Code ouvert : lisez les fichiers <code>js/</code> pour comprendre comment ça marche.</p>
  </footer>

  <!-- 1) La bibliothèque p5.js (chemin absolu fourni par le portail) -->
  <script src="/libs/p5.min.js"></script>
  <!-- 2) Nos scripts, du plus "général" au plus "précis" -->
  <script src="js/config.js"></script>   <!-- constantes réglables + couleurs -->
  <script src="js/decor.js"></script>    <!-- ciel, astres, mer, palmiers -->
  <script src="js/horloge.js"></script>  <!-- cadran et aiguilles -->
  <script src="js/sketch.js"></script>   <!-- setup(), draw(), windowResized() -->
</body>
</html>