Carnet de caisse du marché d'Antalaha

index.html · 5.5 Ko

<!DOCTYPE html>
<!--
  ============================================================
  Fichier : index.html
  Rôle    : structure de la page « Carnet de caisse ».
  Dépend de : css/style.css, js/stockage.js, js/app.js
              (ATTENTION à l'ordre des scripts en bas de page :
               app.js utilise l'objet Stockage défini dans stockage.js).
  ============================================================
-->
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Carnet de caisse du marché</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <header class="entete">
    <img class="entete__image" src="medias/antalaha-vanille-paysage.svg" alt="">
    <div class="entete__texte">
      <h1>Carnet de caisse</h1>
      <p>Marché d'Antalaha – <span id="date-jour"></span></p>
    </div>
  </header>

  <main class="page">

    <!-- ===== Formulaire d'ajout d'une vente ===== -->
    <section class="carte" aria-labelledby="titre-ajout">
      <h2 id="titre-ajout">Noter une vente</h2>

      <form id="formulaire-vente" novalidate>
        <div class="champ">
          <label for="produit">Produit</label>
          <!-- list="..." : le navigateur propose les suggestions de la <datalist>, mais on peut taper autre chose -->
          <input id="produit" type="text" list="suggestions-produits" autocomplete="off"
                 maxlength="40" placeholder="Exemple : vanille">
          <datalist id="suggestions-produits">
            <option value="Vanille"></option>
            <option value="Girofle"></option>
            <option value="Litchis"></option>
            <option value="Riz"></option>
            <option value="Poisson"></option>
            <option value="Bananes"></option>
          </datalist>
        </div>

        <div class="deux-colonnes">
          <div class="champ">
            <label for="quantite">Quantité</label>
            <input id="quantite" type="text" inputmode="numeric" autocomplete="off" placeholder="1" value="1">
          </div>
          <div class="champ">
            <label for="prix">Prix unitaire (Ar)</label>
            <input id="prix" type="text" inputmode="numeric" autocomplete="off" placeholder="2 000">
          </div>
        </div>

        <p id="erreur-vente" class="erreur" role="alert"></p>
        <button type="submit" class="bouton">Ajouter la vente</button>
      </form>
    </section>

    <!-- ===== Total du jour ===== -->
    <section class="carte carte--total" aria-labelledby="titre-total">
      <h2 id="titre-total">Total du jour</h2>
      <!-- aria-live : le nouveau total est annoncé aux lecteurs d'écran à chaque changement -->
      <p class="total" id="total-jour" aria-live="polite">0 Ar</p>
      <p class="aide"><span id="nb-ventes">0 vente</span></p>
    </section>

    <!-- ===== Liste des ventes ===== -->
    <section class="carte" aria-labelledby="titre-ventes">
      <h2 id="titre-ventes">Ventes de la journée</h2>
      <p id="message-vide" class="aide">Aucune vente pour le moment. Ajoutez-en une ci-dessus.</p>
      <div class="tableau-defilant">
        <table id="tableau-ventes">
          <caption class="sr-only">Liste des ventes de la journée</caption>
          <thead>
            <tr>
              <th scope="col">Produit</th>
              <th scope="col" class="nombre">Qté</th>
              <th scope="col" class="nombre">Prix</th>
              <th scope="col" class="nombre">Montant</th>
              <th scope="col"><span class="sr-only">Action</span></th>
            </tr>
          </thead>
          <!-- Rempli par JavaScript. Un seul écouteur de clic sur ce <tbody> gère tous les boutons « Supprimer » (délégation d'événements). -->
          <tbody id="corps-ventes"></tbody>
        </table>
      </div>
    </section>

    <!-- ===== Regroupement par produit ===== -->
    <section class="carte" aria-labelledby="titre-groupes">
      <h2 id="titre-groupes">Total par produit</h2>
      <div class="tableau-defilant">
        <table>
          <caption class="sr-only">Quantités et montants regroupés par produit</caption>
          <thead>
            <tr>
              <th scope="col">Produit</th>
              <th scope="col" class="nombre">Qté</th>
              <th scope="col" class="nombre">Montant</th>
            </tr>
          </thead>
          <tbody id="corps-groupes"></tbody>
        </table>
      </div>
    </section>

    <!-- ===== Export texte ===== -->
    <section class="carte" aria-labelledby="titre-export">
      <h2 id="titre-export">Exporter le carnet</h2>
      <p class="aide">Copiez ce texte pour l'envoyer par message ou le coller dans un cahier numérique.</p>
      <label for="export-texte" class="sr-only">Résumé du carnet à copier</label>
      <textarea id="export-texte" rows="8" readonly></textarea>
      <div class="boutons">
        <button type="button" id="bouton-copier" class="bouton">Copier le texte</button>
        <button type="button" id="bouton-vider" class="bouton bouton--danger">Vider le carnet</button>
      </div>
      <p id="statut-copie" class="aide" role="status"></p>
    </section>

    <p id="statut-stockage" class="aide centre" role="status"></p>
  </main>

  <footer class="pied">
    <p>Site pédagogique du Portail Antalaha – code ouvert : lisez <code>js/app.js</code>.</p>
  </footer>

  <!-- ORDRE IMPORTANT : stockage.js d'abord (il crée l'objet Stockage), app.js ensuite. -->
  <script src="js/stockage.js"></script>
  <script src="js/app.js"></script>
</body>
</html>