Upload templates/index.html with huggingface_hub

templates/index.html

@@ -635,50 +635,57 @@ button:disabled {
   border-radius: 8px;
 }
 
-/* ================= LÉGENDE HEATMAP COMPACTE ================= */
+/* ================= LÉGENDE HEATMAP COMPACTE (RÉDUITE) ================= */
 .compact-enriched-legend {
   background: white;
-  padding: 15px;
+  padding: 10px 15px; /* Réduit de 15px à 10px en haut/bas */
   border-radius: 10px;
   border: 1px solid #e0e0e0;
-  margin: 15px 0;
-    height: 60px;          /* ← hauteur fixe */
+  margin: 10px 0; /* Réduit de 15px à 10px */
+  height: 50px; /* Réduit de 60px à 50px */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .compact-legend-section h5 {
   color: #1976D2;
-  margin-bottom: 10px;
-    margin-top: 0;
-  font-size: 14px;
+  margin: 0; /* Supprimé margin-bottom et margin-top */
+  font-size: 12px; /* Réduit de 14px à 12px */
   display: flex;
   align-items: center;
   gap: 6px;
 }
 
 .compact-legend-section {
-  margin-top: 0;
-  padding-top: 0;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 5px; /* Espacement réduit */
 }
 
+/* Grille de légende compacte sur une seule ligne */
 .compact-legend-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 8px;
+  display: flex; /* Changé de grid à flex pour une seule ligne */
+  gap: 5px; /* Réduit de 8px à 5px */
+  flex-wrap: nowrap;
 }
 
 .compact-legend-item-small {
   display: flex;
   align-items: center;
-  gap: 6px;
-  font-size: 11px;
+  gap: 3px; /* Réduit de 6px à 3px */
+  font-size: 9px; /* Réduit de 11px à 9px */
+  white-space: nowrap;
 }
 
 .compact-legend-color-small {
-  width: 16px;
-  height: 16px;
-  border-radius: 4px;
-  border: 2px solid white;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  width: 12px; /* Réduit de 16px à 12px */
+  height: 12px; /* Réduit de 16px à 12px */
+  border-radius: 3px; /* Réduit de 4px à 3px */
+  border: 1px solid white; /* Réduit de 2px à 1px */
+  box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Ombre plus légère */
 }
 
 /* ================= INDICATEURS DE PERSÉVÉRANCE COMPACTS ================= */
@@ -1275,6 +1282,13 @@ textarea:focus {
   .compact-heatmap-container {
     flex-direction: column;
   }
+  
+  .compact-enriched-legend {
+    height: auto;
+    flex-direction: column;
+    gap: 10px;
+    padding: 12px;
+  }
 }
 
 @media (max-width: 768px) {
@@ -1361,8 +1375,25 @@ textarea:focus {
     gap: 8px;
   }
   
+  .compact-enriched-legend {
+    height: auto;
+    flex-direction: column;
+    gap: 8px;
+    padding: 10px;
+  }
+  
   .compact-legend-grid {
-    grid-template-columns: repeat(2, 1fr);
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  
+  .compact-legend-item-small {
+    font-size: 8px;
+  }
+  
+  .compact-legend-color-small {
+    width: 10px;
+    height: 10px;
   }
   
   .compact-analysis-controls {
@@ -1448,6 +1479,16 @@ textarea:focus {
   .compact-heatmap-container {
     flex-direction: column;
   }
+  
+  .compact-enriched-legend {
+    height: auto;
+    padding: 8px;
+  }
+  
+  .compact-legend-item-small {
+    font-size: 7px;
+    gap: 2px;
+  }
 }
 </style>
 </head>
@@ -1673,27 +1714,27 @@ textarea:focus {
               <div class="compact-enriched-legend">
                 <div class="compact-legend-section">
                   <h5>📈 Niveaux d'activité</h5>
-                  <div class="compact-legend-grid">
-                    <div class="compact-legend-item-small">
-                      <div class="compact-legend-color-small" style="background:#EBEDF0;"></div>
-                      <span>Aucune activité</span>
-                    </div>
-                    <div class="compact-legend-item-small">
-                      <div class="compact-legend-color-small" style="background:#C6E48B;"></div>
-                      <span>Faible activité</span>
-                    </div>
-                    <div class="compact-legend-item-small">
-                      <div class="compact-legend-color-small" style="background:#7BC96F;"></div>
-                      <span>Activité modérée</span>
-                    </div>
-                    <div class="compact-legend-item-small">
-                      <div class="compact-legend-color-small" style="background:#239A3B;"></div>
-                      <span>Activité élevée</span>
-                    </div>
-                    <div class="compact-legend-item-small">
-                      <div class="compact-legend-color-small" style="background:#196127;"></div>
-                      <span>Activité intense</span>
-                    </div>
+                </div>
+                <div class="compact-legend-grid">
+                  <div class="compact-legend-item-small">
+                    <div class="compact-legend-color-small" style="background:#EBEDF0;"></div>
+                    <span>Aucune</span>
+                  </div>
+                  <div class="compact-legend-item-small">
+                    <div class="compact-legend-color-small" style="background:#C6E48B;"></div>
+                    <span>Faible</span>
+                  </div>
+                  <div class="compact-legend-item-small">
+                    <div class="compact-legend-color-small" style="background:#7BC96F;"></div>
+                    <span>Moyenne</span>
+                  </div>
+                  <div class="compact-legend-item-small">
+                    <div class="compact-legend-color-small" style="background:#239A3B;"></div>
+                    <span>Élevée</span>
+                  </div>
+                  <div class="compact-legend-item-small">
+                    <div class="compact-legend-color-small" style="background:#196127;"></div>
+                    <span>Intense</span>
                   </div>
                 </div>
               </div>
@@ -1853,8 +1894,10 @@ textarea:focus {
     <div id="tab-example" class="tab-content">
       <h3>📋 Exemple d'Analyse – Étudiant en difficulté / évitement de l'échec : peur de l'échec supérieure à la motivation de réussite.</h3>
       
-       <div class="example-analysis-box">
-          <h4> Éléments clés de l’analyse du comportement de l'apprenant</h4>
+      <div class="example-separator"></div>
+        
+        <div class="example-analysis-box">
+          <h4> Éléments clés de l'analyse du comportement de l'apprenant</h4>
           <ul>
   <li>
     <strong>Profil global :</strong><br>
@@ -1941,9 +1984,7 @@ textarea:focus {
           </table>
         </div>
         
-        <div class="example-separator"></div>
         
-       
       
       
     </div>
@@ -3872,4 +3913,4 @@ window.loadScenario = loadScenario;
 </div>
 
 </body>
-</html>
+</html>