Upload templates/index.html with huggingface_hub
Browse files- templates/index.html +5 -46
templates/index.html
CHANGED
|
@@ -1244,7 +1244,7 @@ textarea:focus {
|
|
| 1244 |
cursor: pointer;
|
| 1245 |
padding: 0;
|
| 1246 |
font-size: 20px;
|
| 1247 |
-
line-height
|
| 1248 |
}
|
| 1249 |
|
| 1250 |
/* ================= RESPONSIVE ================= */
|
|
@@ -2780,7 +2780,6 @@ function drawCompactEnrichedHeatmap(scenario) {
|
|
| 2780 |
const cellSize = 18;
|
| 2781 |
const padding = 2;
|
| 2782 |
const days = ["L", "M", "M", "J", "V", "S", "D"];
|
| 2783 |
-
const dayNames = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"];
|
| 2784 |
const weeks = 4;
|
| 2785 |
const totalDays = weeks * 7;
|
| 2786 |
|
|
@@ -2894,16 +2893,11 @@ function drawCompactEnrichedHeatmap(scenario) {
|
|
| 2894 |
// Labels des jours
|
| 2895 |
ctx.font = "bold 11px Arial";
|
| 2896 |
ctx.fillStyle = "#555";
|
|
|
|
| 2897 |
|
| 2898 |
for (let day = 0; day < 7; day++) {
|
| 2899 |
const y = 120 + day * (cellSize + padding) + cellSize / 2;
|
| 2900 |
-
ctx.textAlign = "right";
|
| 2901 |
ctx.fillText(`${days[day]}`, 55, y);
|
| 2902 |
-
|
| 2903 |
-
// Version complète au survol (tooltip serait mieux)
|
| 2904 |
-
ctx.font = "9px Arial";
|
| 2905 |
-
ctx.fillStyle = "#888";
|
| 2906 |
-
ctx.fillText(`(${dayNames[day]})`, 55, y + 10);
|
| 2907 |
}
|
| 2908 |
|
| 2909 |
// Dessiner la heatmap
|
|
@@ -2918,56 +2912,21 @@ function drawCompactEnrichedHeatmap(scenario) {
|
|
| 2918 |
|
| 2919 |
const intensity = activityData[day];
|
| 2920 |
|
| 2921 |
-
// Dessiner la cellule
|
| 2922 |
ctx.fillStyle = colors[intensity];
|
| 2923 |
ctx.fillRect(x, y, cellSize, cellSize);
|
| 2924 |
|
| 2925 |
-
// Ajouter un indicateur de caractère dans la cellule
|
| 2926 |
-
ctx.font = "bold 10px Arial";
|
| 2927 |
-
ctx.fillStyle = intensity < 2 ? "#666" : "white";
|
| 2928 |
-
ctx.textAlign = "center";
|
| 2929 |
-
ctx.textBaseline = "middle";
|
| 2930 |
-
|
| 2931 |
-
// Caractère selon l'intensité
|
| 2932 |
-
let char = "";
|
| 2933 |
-
switch(intensity) {
|
| 2934 |
-
case 0: char = "∅"; break; // Aucune
|
| 2935 |
-
case 1: char = "·"; break; // Faible
|
| 2936 |
-
case 2: char = "○"; break; // Modérée
|
| 2937 |
-
case 3: char = "●"; break; // Élevée
|
| 2938 |
-
case 4: char = "■"; break; // Intense
|
| 2939 |
-
}
|
| 2940 |
-
|
| 2941 |
-
// Dessiner le caractère au centre de la cellule
|
| 2942 |
-
ctx.fillText(char, x + cellSize/2, y + cellSize/2);
|
| 2943 |
-
|
| 2944 |
// Bordure avec indication des échéances (vendredi = jour important)
|
| 2945 |
if (weekday === 4) { // Vendredi
|
| 2946 |
ctx.strokeStyle = "#FF6B6B";
|
| 2947 |
ctx.lineWidth = 2;
|
| 2948 |
-
ctx.strokeRect(x, y, cellSize, cellSize);
|
| 2949 |
-
|
| 2950 |
-
// Indicateur spécial pour vendredi
|
| 2951 |
-
ctx.fillStyle = "#FF6B6B";
|
| 2952 |
-
ctx.font = "bold 8px Arial";
|
| 2953 |
-
ctx.fillText("V", x + cellSize - 6, y + 8);
|
| 2954 |
} else {
|
| 2955 |
ctx.strokeStyle = intensity > 0 ? "#239A3B" : "#eee";
|
| 2956 |
ctx.lineWidth = 0.5;
|
| 2957 |
-
ctx.strokeRect(x, y, cellSize, cellSize);
|
| 2958 |
}
|
|
|
|
| 2959 |
}
|
| 2960 |
|
| 2961 |
-
// Légende des caractères en bas
|
| 2962 |
-
ctx.font = "10px Arial";
|
| 2963 |
-
ctx.fillStyle = "#666";
|
| 2964 |
-
ctx.textAlign = "center";
|
| 2965 |
-
|
| 2966 |
-
const legendChars = ["∅ Aucune", "· Faible", "○ Modérée", "● Élevée", "■ Intense"];
|
| 2967 |
-
const legendX = canvas.width / 2;
|
| 2968 |
-
const legendY = canvas.height - 15;
|
| 2969 |
-
|
| 2970 |
-
|
| 2971 |
// Analyser et afficher les métriques de persévérance compactes
|
| 2972 |
analyzeCompactPersistenceMetrics(activityData, scenario.id);
|
| 2973 |
}
|
|
@@ -2984,7 +2943,7 @@ function updatePerseveranceProfile(scenarioTitle) {
|
|
| 2984 |
if (regularityText) {
|
| 2985 |
regularityText.innerHTML = `
|
| 2986 |
<div style="font-size: 12px; color: #555; line-height: 1.4;">
|
| 2987 |
-
|
| 2988 |
</div>
|
| 2989 |
`;
|
| 2990 |
}
|
|
|
|
| 1244 |
cursor: pointer;
|
| 1245 |
padding: 0;
|
| 1246 |
font-size: 20px;
|
| 1247 |
+
line-height = 1;
|
| 1248 |
}
|
| 1249 |
|
| 1250 |
/* ================= RESPONSIVE ================= */
|
|
|
|
| 2780 |
const cellSize = 18;
|
| 2781 |
const padding = 2;
|
| 2782 |
const days = ["L", "M", "M", "J", "V", "S", "D"];
|
|
|
|
| 2783 |
const weeks = 4;
|
| 2784 |
const totalDays = weeks * 7;
|
| 2785 |
|
|
|
|
| 2893 |
// Labels des jours
|
| 2894 |
ctx.font = "bold 11px Arial";
|
| 2895 |
ctx.fillStyle = "#555";
|
| 2896 |
+
ctx.textAlign = "right";
|
| 2897 |
|
| 2898 |
for (let day = 0; day < 7; day++) {
|
| 2899 |
const y = 120 + day * (cellSize + padding) + cellSize / 2;
|
|
|
|
| 2900 |
ctx.fillText(`${days[day]}`, 55, y);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 2901 |
}
|
| 2902 |
|
| 2903 |
// Dessiner la heatmap
|
|
|
|
| 2912 |
|
| 2913 |
const intensity = activityData[day];
|
| 2914 |
|
| 2915 |
+
// Dessiner la cellule avec juste la couleur
|
| 2916 |
ctx.fillStyle = colors[intensity];
|
| 2917 |
ctx.fillRect(x, y, cellSize, cellSize);
|
| 2918 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 2919 |
// Bordure avec indication des échéances (vendredi = jour important)
|
| 2920 |
if (weekday === 4) { // Vendredi
|
| 2921 |
ctx.strokeStyle = "#FF6B6B";
|
| 2922 |
ctx.lineWidth = 2;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 2923 |
} else {
|
| 2924 |
ctx.strokeStyle = intensity > 0 ? "#239A3B" : "#eee";
|
| 2925 |
ctx.lineWidth = 0.5;
|
|
|
|
| 2926 |
}
|
| 2927 |
+
ctx.strokeRect(x, y, cellSize, cellSize);
|
| 2928 |
}
|
| 2929 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 2930 |
// Analyser et afficher les métriques de persévérance compactes
|
| 2931 |
analyzeCompactPersistenceMetrics(activityData, scenario.id);
|
| 2932 |
}
|
|
|
|
| 2943 |
if (regularityText) {
|
| 2944 |
regularityText.innerHTML = `
|
| 2945 |
<div style="font-size: 12px; color: #555; line-height: 1.4;">
|
| 2946 |
+
Analyse de persévérance non disponible pour ce profil.
|
| 2947 |
</div>
|
| 2948 |
`;
|
| 2949 |
}
|