From 87c98514deb442acab79d7076b07bd37e9cf9137 Mon Sep 17 00:00:00 2001
From: Thibaud <tibo@topisto.net>
Date: Fri, 3 Jan 2025 08:36:29 +0100
Subject: [PATCH] 20250102

---
 frontend/src/html/index.html      | 97 +++++++++----------------------
 frontend/src/scripts/default.js   |  4 +-
 frontend/src/styles/synthesis.css |  1 +
 3 files changed, 29 insertions(+), 73 deletions(-)
diff --git a/frontend/src/html/index.html b/frontend/src/html/index.html
index 736a8e3..878db50 100644
--- 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>
\ No newline at end of file
diff --git a/frontend/src/scripts/default.js b/frontend/src/scripts/default.js
index c318d49..763bf8f 100644
--- 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
diff --git a/frontend/src/styles/synthesis.css b/frontend/src/styles/synthesis.css
index 7d982c7..75bc038 100644
--- 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 {
