Upload templates/index.html with huggingface_hub

templates/index.html

@@ -318,44 +318,52 @@ button:disabled {
   display: grid;
   grid-template-columns: repeat(4, 1fr); /* 4 colonnes */
   grid-template-rows: repeat(3, auto); /* 3 lignes */
-  gap: 15px;
-  margin: 20px 0;
+  gap: 8px; /* Réduit */
+  margin: 8px 0; /* Réduit */
 }
 
+/* HAUTEUR RÉDUITE À 50% DES BOX DE COMPÉTENCES */
 .compact-competence-matrix-item {
-  padding: 15px;
+  padding: 6px; /* Réduit */
   background: linear-gradient(135deg, #f8f9fa, #e9ecef);
-  border-radius: 10px;
-  border-left: 4px solid #1976D2;
+  border-radius: 5px; /* Réduit */
+  border-left: 2px solid #1976D2; /* Réduit */
   transition: all 0.3s ease;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  min-height: 120px;
+  min-height: 60px; /* RÉDUIT À 50% DE 120px = 60px */
 }
 
 .compact-competence-matrix-item:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+  transform: translateY(-1px); /* Réduit */
+  box-shadow: 0 1px 6px rgba(0,0,0,0.05); /* Réduit l'ombre */
   background: linear-gradient(135deg, #e3f2fd, #bbdefb);
 }
 
 .compact-matrix-competence-label {
-  font-size: 13px;
+  font-size: 9px; /* RÉDUIT À 50% DE 13px ≈ 6.5px, ajusté à 9px pour lisibilité */
   font-weight: 600;
   color: #333;
-  margin-bottom: 10px;
-  line-height: 1.4;
+  margin-bottom: 3px; /* RÉDUIT */
+  line-height: 1.0; /* AJUSTÉ */
   flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  max-height: 20px; /* Limite la hauteur */
 }
 
 .compact-matrix-competence-value {
-  font-size: 24px;
+  font-size: 12px; /* RÉDUIT À 50% DE 24px ≈ 12px */
   font-weight: bold;
   color: #1976D2;
   text-align: center;
-  margin: 10px 0;
+  margin: 3px 0; /* RÉDUIT */
+  min-height: 15px; /* Hauteur minimale pour la valeur */
 }
 
 .compact-matrix-competence-value.high { color: #43A047; }
@@ -363,19 +371,28 @@ button:disabled {
 .compact-matrix-competence-value.low { color: #E53935; }
 
 .compact-matrix-competence-bar {
-  height: 8px;
+  height: 3px; /* RÉDUIT À 50% DE 8px ≈ 4px, ajusté à 3px */
   background: #e0e0e0;
-  border-radius: 4px;
+  border-radius: 1px;
   overflow: hidden;
-  margin: 8px 0;
+  margin: 2px 0; /* RÉDUIT */
 }
 
 .compact-matrix-competence-fill {
   height: 100%;
-  border-radius: 4px;
+  border-radius: 1px;
   transition: width 0.5s ease;
 }
 
+/* LÉGENDE 0% - 100% RÉDUITE */
+.compact-competence-matrix-item > div:last-child {
+  font-size: 7px; /* RÉDUIT À 50% DE 11px ≈ 5.5px, ajusté à 7px */
+  margin-top: 1px; /* RÉDUIT */
+  display: flex;
+  justify-content: space-between;
+  color: #999;
+}
+
 /* ================= LÉGENDE RADAR COMPACTE ================= */
 .compact-radar-legend {
   display: flex;
@@ -410,6 +427,74 @@ button:disabled {
 .compact-legend-medium { background: linear-gradient(135deg, #fb8c00, #ff9800); }
 .compact-legend-high { background: linear-gradient(135deg, #43a047, #4caf50); }
 
+/* ================= MÉTRIQUES RADAR COMPACTES - 8 INDICATEURS EN 1 LIGNE ================= */
+.compact-radar-metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr); /* 8 colonnes pour les 8 indicateurs */
+  gap: 8px; /* Espacement réduit */
+  margin: 15px 0;
+}
+
+.compact-metric-card {
+  background: white;
+  border-radius: 8px; /* Réduit */
+  padding: 10px; /* Réduit */
+  box-shadow: 0 2px 5px rgba(0,0,0,0.06); /* Ombre plus légère */
+  border-left: 3px solid #1976D2; /* Réduit */
+  transition: transform 0.2s;
+  text-align: center;
+  min-height: 90px; /* Hauteur réduite pour tenir sur une ligne */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.compact-metric-card:hover {
+  transform: translateY(-2px); /* Effet hover réduit */
+  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
+}
+
+.compact-metric-icon {
+  font-size: 18px; /* Réduit */
+  margin-bottom: 5px;
+}
+
+.compact-metric-name {
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 3px;
+  font-size: 11px; /* Réduit */
+  line-height: 1.2;
+  height: 26px; /* Hauteur fixe pour 2 lignes */
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.compact-metric-value {
+  font-size: 16px; /* Réduit */
+  font-weight: bold;
+  color: #1976D2;
+  margin: 5px 0;
+}
+
+.compact-metric-value.high { color: #43A047; }
+.compact-metric-value.medium { color: #FB8C00; }
+.compact-metric-value.low { color: #E53935; }
+
+.compact-metric-description {
+  font-size: 10px; /* Réduit */
+  color: #666;
+  margin-top: 3px;
+  line-height: 1.2;
+  height: 24px; /* Hauteur fixe pour 2 lignes */
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
 /* ================= RADAR COMPACT ================= */
 #radar-container {
   background: white;
@@ -485,59 +570,6 @@ button:disabled {
   font-size: 12px;
 }
 
-/* ================= GRILLE DES MÉTRIQUES RADAR COMPACTE ================= */
-.compact-radar-metrics-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 12px;
-  margin: 15px 0;
-}
-
-.compact-metric-card {
-  background: white;
-  border-radius: 10px;
-  padding: 15px;
-  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
-  border-left: 4px solid #1976D2;
-  transition: transform 0.3s;
-  text-align: center;
-}
-
-.compact-metric-card:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 5px 15px rgba(0,0,0,0.12);
-}
-
-.compact-metric-icon {
-  font-size: 24px;
-  margin-bottom: 8px;
-}
-
-.compact-metric-name {
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 5px;
-  font-size: 14px;
-}
-
-.compact-metric-value {
-  font-size: 20px;
-  font-weight: bold;
-  color: #1976D2;
-  margin: 5px 0;
-}
-
-.compact-metric-value.high { color: #43A047; }
-.compact-metric-value.medium { color: #FB8C00; }
-.compact-metric-value.low { color: #E53935; }
-
-.compact-metric-description {
-  font-size: 11px;
-  color: #666;
-  margin-top: 5px;
-  line-height: 1.3;
-}
-
 /* ================= HEATMAP COMPACT ================= */
 .compact-heatmap-and-indicators {
   background: white;
@@ -1208,6 +1240,12 @@ textarea:focus {
     grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
     grid-template-rows: repeat(5, auto); /* 5 lignes */
   }
+  
+  /* Pour les écrans moyens : 4 indicateurs sur 2 lignes */
+  .compact-radar-metrics-grid {
+    grid-template-columns: repeat(4, 1fr); /* 4 colonnes sur 2 lignes */
+    grid-template-rows: repeat(2, auto);
+  }
 }
 
 @media (max-width: 768px) {
@@ -1243,24 +1281,49 @@ textarea:focus {
   .compact-competences-grid {
     grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
     grid-template-rows: repeat(7, auto); /* 7 lignes */
-    gap: 12px;
+    gap: 6px; /* Réduit pour mobile */
   }
   
   .compact-competence-matrix-item {
-    padding: 12px;
-    min-height: 100px;
+    padding: 5px; /* Réduit pour mobile */
+    min-height: 50px; /* Réduit pour mobile (50% de 90px ≈ 45px, ajusté à 50px) */
   }
   
   .compact-matrix-competence-label {
-    font-size: 12px;
+    font-size: 8px; /* Réduit pour mobile */
+    -webkit-line-clamp: 2; /* Garder 2 lignes sur mobile */
+    max-height: 18px; /* Réduit pour mobile */
   }
   
   .compact-matrix-competence-value {
-    font-size: 20px;
+    font-size: 11px; /* Réduit pour mobile */
+    min-height: 13px; /* Réduit pour mobile */
   }
   
+  /* Pour les tablettes : 4 indicateurs sur 2 lignes */
   .compact-radar-metrics-grid {
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, auto);
+    gap: 6px;
+  }
+  
+  .compact-metric-card {
+    min-height: 85px;
+    padding: 8px;
+  }
+  
+  .compact-metric-name {
+    font-size: 10px;
+    height: 24px;
+  }
+  
+  .compact-metric-value {
+    font-size: 14px;
+  }
+  
+  .compact-metric-description {
+    font-size: 9px;
+    height: 22px;
   }
   
   .compact-radar-legend {
@@ -1301,13 +1364,46 @@ textarea:focus {
     grid-template-columns: 1fr;
   }
   
+  /* Pour les mobiles : 2 indicateurs sur 4 lignes */
   .compact-radar-metrics-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur 4 lignes */
+    grid-template-rows: repeat(4, auto);
+    gap: 5px;
+  }
+  
+  .compact-metric-card {
+    min-height: 80px;
+    padding: 6px;
+  }
+  
+  .compact-metric-name {
+    font-size: 9px;
+    height: 22px;
+  }
+  
+  .compact-metric-value {
+    font-size: 13px;
+  }
+  
+  .compact-metric-description {
+    font-size: 8px;
+    height: 20px;
   }
   
   .compact-competences-grid {
     grid-template-columns: 1fr; /* 1 colonne */
     grid-template-rows: repeat(14, auto); /* 14 lignes */
+    gap: 5px; /* Réduit pour très petits écrans */
+  }
+  
+  .compact-competence-matrix-item {
+    min-height: 45px; /* Réduit pour très petits écrans */
+  }
+  
+  .compact-matrix-competence-label {
+    font-size: 7px; /* Réduit pour très petits écrans */
+    -webkit-line-clamp: 2; /* Garder 2 lignes */
+    max-height: 16px; /* Réduit pour très petits écrans */
   }
   
   .example-metrics-table th,
@@ -1463,8 +1559,6 @@ textarea:focus {
 
       <h3>📊 Progression par compétence </h3>
       <div id="competence-bars">
-        <p style="font-size: 14px; color: #666; margin-bottom: 15px; font-style: italic;">
-        </p>
         <div id="compact-competences">
           <em>Chargement des compétences...</em>
         </div>
@@ -1488,7 +1582,7 @@ textarea:focus {
       
       <h3>🕸️ Analyse de l'engagement: Indicateurs de comportement d'apprentissage </h3>
 
-      <!-- Grille des métriques radar compacte -->
+      <!-- Grille des métriques radar compacte - 8 indicateurs en 1 ligne -->
       <div class="compact-radar-metrics-grid" id="compact-radar-metrics-grid">
         <!-- Les métriques seront ajoutées dynamiquement -->
       </div>
@@ -2344,7 +2438,7 @@ function updateCompactCompetences(competences) {
         <div class="compact-matrix-competence-fill" style="width: ${comp.value}%; background: ${color};">
         </div>
       </div>
-      <div style="display: flex; justify-content: space-between; font-size: 11px; color: #666; margin-top: 5px;">
+      <div>
         <span>0%</span>
         <span>100%</span>
       </div>
@@ -2370,6 +2464,10 @@ function updateCompactCompetences(competences) {
         <div class="compact-matrix-competence-fill" style="width: 0%; background: #999;">
         </div>
       </div>
+      <div>
+        <span>0%</span>
+        <span>100%</span>
+      </div>
     `;
     gridContainer.appendChild(emptyItem);
   }
@@ -3363,9 +3461,6 @@ window.clearEvaluatorFields = clearEvaluatorFields;
 window.loadScenario = loadScenario;
 </script>
 
-
-<!-- ... (le reste du code HTML reste inchangé) ... -->
-
 </div> <!-- Fin de la div principale #reflection -->
 
 <!-- PIED DE PAGE -->