20250102

1年前 · 87c98514de
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@ -2,13 +2,14 @@
 <html lang="fr">

 <head>
  <meta charset="utf-8">
  <link rel="preload" as="font" type="font/woff2" href="./fonts/Fonte-Texte.woff2" crossorigin />
  <link rel="preload" as="font" type="font/woff2" href="./fonts/Fonte-Titre.woff2" crossorigin />
  <title>template TOPISTO</title>

  <meta name="description" content="Suivi activité">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta charset="utf-8">

  <link rel="preload" as="font" type="font/woff2" href="./fonts/Fonte-Texte.woff2" crossorigin />
  <link rel="preload" as="font" type="font/woff2" href="./fonts/Fonte-Titre.woff2" crossorigin />
  <link rel="stylesheet" type="text/css" href="styles/app.css?TIMESTAMP">

 </head>
@ -26,8 +27,11 @@
  <nav>
    <section id="ariane">
      <div id="fil"></div>
      <div id="aide"><a onclick="show_modal('type=login')"><span id="username" style="font-weight: bold;">Log
            In</span></a> - <a alt="aide" onclick="gotoHelp()">?</a></div>
      <div id="aide">
        <a onclick="show_modal('type=login')"><span id="username" style="font-weight: bold;">Log In</span></a>
        &nbsp;
        <a alt="aide" onclick="gotoHelp()">?</a>
      </div>
    </section>
    <section id="bandeau">
      <div id="menu">
@ -114,79 +118,32 @@
    <div class="statrow">
      <div class="statbox2">Indicateur 1<br>110</div>
      <div class="statbox1">Indicateur 2<br>45</div>
      <div class="statbox1">Indicateur 3<br>0</div>
      <div class="statbox1">Indicateur 3<br>27</div>
      <div class="statbox1">Indicateur 4<br>0</div>
      <div class="statbox2">Indicateur 5<br>26</div>
    </div>
    <div class="statrow">
      <div class="statbox2">Indicateur 6<br>67</div>
      <div class="statbox1">Indicateur 7<br>89</div>
      <div class="statbox1">Indicateur 8<br>345</div>
      <div class="statbox1">Indicateur 9<br>56</div>
    </div>    
  </template>

  <template id="footer_Home">
    <h2>Modèle de page HTML pour visulaisation de données</h2>
    <p>
      <small>
        Un projet est un ensemble d'efforts fournis de manière limitée dans le temps afin de produire un résultat
        unique.
        <br>La gestion de projet met en oeuvre un ensemble de techniques et de compétences pour garantir le succès
        d'un
        projet.
        <br>
        <br>Loi de Parkinson : le travail s'étale de façon à occuper tout le temps disponible pour son achèvement.
        <br>Loi de Hofstadter: il est presque impossible de prévoir le temps qui sera nécessaire à l'accomplissement
        d'une tâche complexe.
        <br>Principe de Pareto : 20% des efforts produisent 80% des effets.
        <br>
        <br>Loi de Conway : un produit est le reflet de l'organisation qui l'a conçu.
        <br>On ne peut améliorer que ce que l'on mesure : résultats, performances,...
        <br>
        <br>La tranquillité ce n'est pas l'inaction.
      </small>
    </p>
    <p>
      <i>
        NB : En Tchèque, SMETI c'est la poussière (littéralement : "ce qui peut être balayé")
      </i>
    </p>
    <h2>Explications</h2>
    <p>
      L'objectif de cette page est de présenter des données sous forme de tableau.<br>
      La page permet en outre :
    <ul>
      <li>De rappeler l'identité visuelle : logo, bannière</li>
      <li>De naviguer dans l'application</li>
      <li>D'accéder à une synthèse et à une explication des données</li>
    </ul>
    </p>
    <p>
      Le header est une bannière qui fait 30% du viewport.
      Elle contient une image de background alignée à gauche et un texte aligné à droite.
    </p>
    <p>
      Lorsque le header sort de la partie visible de la page :
    <h2>Modèle de page HTML pour visualisation de données</h2>
    <p>La page est composée comme suit :</p>
    <ul>
      <li>La barre de navigation devient "collée" au haut de page.</li>
      <li>Le pied de tableau devient "collé" en bas de page</li>
      <li>le logo apparaît à gauche de la barre de navigation.</li>
      <li>Un header avec le titre et un logo</li>
      <li>Un bandeau de navigation</li>
      <li>Une zone pour la synthèse des informations</li>
      <li>Un tableau d'affichage des données</li>
      <li>Un footer avec le texte explicatif</li>
    </ul>
    </p>
    <p>Lorsque le tableau sort de la partie visible de la page, le footer et la zone d'explication peuvent occuper
      toute
      la page.</p>
    <p> Provident pariatur fugit sint autem laudantium omnis. Dolores repudiandae voluptatem molestiae ratione placeat
      similique eaque. Aliquam sit ullam non non qui. Dicta molestiae neque repellendus dicta iure tempora. Et ipsam
      voluptatum nesciunt eligendi. Eos harum rerum vitae.
    </p>
    <h2>Focus sur la gestion des thèmes</h2>
    <p>
      Voici comment s'opère la gestion des couleurs.<br>
      Dans le default.css, la section CSS root contient des variables CSS.<br>
      On a le triplet (R,G,B) de la couleur dominante et celui de la couleur de fond.<br>
      Ces couleurs sont respectivement appelées "sombre" et "clair".<br>
      <br>
      Des variables sont ensuite définies pour décliner des dégradés de couleurs.<br>
    <p>Les règles de comportement de la page:</p>
    <ul>
      <li>- Soit par ajout de transparence, ce sont les variables --nuance-{sombre|clair}-alpha-XX</li>
      <li>- Soit par calul de dégradé</li>
      <li>Le bandeau de navigation est "sticky" en haut de page.</li>
      <li>L'entête du tableau de données est "sticky" sous le bandeau de navigation.</li>
      <li>Lorsque la zone de synthèse n'est plus visible, le pied de tableau est "sticky" en bas de page.</li>
    </ul>
    <br>
    Enfin une batterie de fonctions javascript permettent de modifier à la volée les couleurs "sombre" et "clair".
  </template>
--- a/frontend/src/scripts/default.js
+++ b/frontend/src/scripts/default.js
@ -1,6 +1,4 @@
  window.addEventListener('load', function() { 
    window.scrollTo(0,0);
  }, false);
  window.addEventListener('load', function() { window.scrollTo(0,0); }, false);

  /*
   * Personnalisation
--- a/frontend/src/styles/synthesis.css
+++ b/frontend/src/styles/synthesis.css
@ -24,6 +24,7 @@
 .statrow {
  display:flex; 
  width: 100%;
  margin-bottom: 4px;
 }

 .statrow>div:hover {