Upload templates/index.html with huggingface_hub

templates/index.html

@@ -1244,7 +1244,7 @@ textarea:focus {
   cursor: pointer;
   padding: 0;
   font-size: 20px;
-  line-height = 1;
+  line-height: 1;
 }
 
 /* ================= RESPONSIVE ================= */
@@ -1667,7 +1667,7 @@ textarea:focus {
               </div>
               
               <!-- Canvas pour le heatmap -->
-              <canvas id="heatmap" width="800" height="300" style="max-width: 100%; height: auto;"></canvas>
+              <canvas id="heatmap" width="800" height="250" style="max-width: 100%; height: auto;"></canvas>
               
               <!-- Légende des niveaux d'activité compacte -->
               <div class="compact-enriched-legend">
@@ -1853,6 +1853,32 @@ 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>
+          <ul>
+  <li>
+    <strong>Profil global :</strong><br>
+    Étudiant à risque, faible engagement et compétences fragiles.
+  </li>
+  <br>
+  <li>
+    <strong>Points forts :</strong><br>
+    Volonté minimale de progresser (essayer malgré l'échec), possibilité de reconstruire la motivation par petites actions.
+  </li>
+  <br>
+  <li>
+    <strong>Points à améliorer :</strong><br>
+    Niveau d'activité et d'implication, Organisation et stratégies d'apprentissage.
+  </li>
+  <br>
+  <li>
+    <strong>Objectif pédagogique :</strong><br>
+    Réintroduire l'étudiant dans un rythme régulier avec des objectifs accessibles, renforcer la confiance et la motivation, fournir un soutien plus concret.
+  </li>
+</ul>
+
+      </div>
+      
         <div class="example-analysis-box">
           <h4>Message auto-réflexif</h4>
             Ton niveau d'engagement est actuellement très faible : seulement 35 % des activités ont été démarrées et 30 % achevées. 😔 Tes compétences restent fragiles (40 %), ce qui indique un risque élevé de décrochage.
@@ -1917,31 +1943,7 @@ textarea:focus {
         
         <div class="example-separator"></div>
         
-        <div class="example-analysis-box">
-          <h4> Éléments clés du diagnostic</h4>
-          <ul>
-  <li>
-    <strong>Profil global :</strong><br>
-    Étudiant à risque, faible engagement et compétences fragiles.
-  </li>
-  <br>
-  <li>
-    <strong>Points forts :</strong><br>
-    Volonté minimale de progresser (essayer malgré l'échec), possibilité de reconstruire la motivation par petites actions.
-  </li>
-  <br>
-  <li>
-    <strong>Points à améliorer :</strong><br>
-    Niveau d'activité et d'implication, Organisation et stratégies d'apprentissage.
-  </li>
-  <br>
-  <li>
-    <strong>Objectif pédagogique :</strong><br>
-    Réintroduire l'étudiant dans un rythme régulier avec des objectifs accessibles, renforcer la confiance et la motivation, fournir un soutien plus concret.
-  </li>
-</ul>
-
-      </div>
+       
       
       
     </div>
@@ -2777,8 +2779,8 @@ function drawCompactEnrichedHeatmap(scenario) {
   if (!canvas) return;
   
   const ctx = canvas.getContext("2d");
-  const cellSize = 18;
-  const padding = 2;
+  const cellSize = 15;
+  const padding = 1;
   const days = ["L", "M", "M", "J", "V", "S", "D"];
   const weeks = 4;
   const totalDays = weeks * 7;
@@ -2866,40 +2868,18 @@ function drawCompactEnrichedHeatmap(scenario) {
     pattern: "Schéma à analyser"
   };
   
-  ctx.font = "bold 16px Arial";
+  ctx.font = "bold 14px Arial";
   ctx.fillStyle = "#1976D2";
   ctx.textAlign = "center";
-  ctx.fillText(`${scenarioInfo.emoji} ${scenarioInfo.title}`, canvas.width / 2, 25);
+  ctx.fillText(`${scenarioInfo.emoji} ${scenarioInfo.title}`, canvas.width / 2, 20);
   
-  ctx.font = "14px Arial";
+  ctx.font = "12px Arial";
   ctx.fillStyle = "#666";
-  ctx.fillText(`${scenarioInfo.pattern}`, canvas.width / 2, 45);
+  ctx.fillText(`${scenarioInfo.pattern}`, canvas.width / 2, 40);
   
   // Générer les données d'activité selon le scénario
   const activityData = generateCompactPersistenceData(scenario.id, totalDays);
   
-  // Labels des semaines
-  ctx.font = "bold 12px Arial";
-  ctx.fillStyle = "#333";
-  ctx.textAlign = "center";
-  ctx.textBaseline = "middle";
-  
-  for (let week = 0; week < weeks; week++) {
-    const x = 60 + week * (cellSize * 7 + padding * 7) + (cellSize * 7) / 2;
-    const y = 90;
-    ctx.fillText(`Semaine ${week + 1}`, x, y);
-  }
-  
-  // Labels des jours
-  ctx.font = "bold 11px Arial";
-  ctx.fillStyle = "#555";
-  ctx.textAlign = "right";
-  
-  for (let day = 0; day < 7; day++) {
-    const y = 120 + day * (cellSize + padding) + cellSize / 2;
-    ctx.fillText(`${days[day]}`, 55, y);
-  }
-  
   // Dessiner la heatmap
   const colors = ["#EBEDF0", "#C6E48B", "#7BC96F", "#239A3B", "#196127"];
   
@@ -2907,19 +2887,19 @@ function drawCompactEnrichedHeatmap(scenario) {
     const week = Math.floor(day / 7);
     const weekday = day % 7;
     
-    const x = 60 + week * (cellSize * 7 + padding * 7) + weekday * (cellSize + padding);
-    const y = 110 + weekday * (cellSize + padding);
+    const x = 30 + week * (cellSize * 7 + padding * 7) + weekday * (cellSize + padding);
+    const y = 60 + weekday * (cellSize + padding);
     
     const intensity = activityData[day];
     
-    // Dessiner la cellule avec juste la couleur
+    // Dessiner la cellule
     ctx.fillStyle = colors[intensity];
     ctx.fillRect(x, y, cellSize, cellSize);
     
     // Bordure avec indication des échéances (vendredi = jour important)
     if (weekday === 4) { // Vendredi
       ctx.strokeStyle = "#FF6B6B";
-      ctx.lineWidth = 2;
+      ctx.lineWidth = 1.5;
     } else {
       ctx.strokeStyle = intensity > 0 ? "#239A3B" : "#eee";
       ctx.lineWidth = 0.5;