Upload templates/index.html with huggingface_hub

templates/index.html

@@ -397,11 +397,48 @@
         .flex-between { display: flex; justify-content: space-between; align-items: center; }
 
         /* DASHBOARD PROFESSIONNEL : HEATMAP MODERNE & ELEGANT */
+        .dashboard-two-columns {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 24px;
+            margin-bottom: 32px;
+        }
+        .heatmap-wrapper {
+            flex: 1.2;
+            min-width: 280px;
+        }
+        .radar-wrapper {
+            flex: 1;
+            min-width: 280px;
+            background: white;
+            border-radius: 20px;
+            padding: 20px;
+            border: 1px solid var(--gray-200);
+            box-shadow: var(--shadow-sm);
+            transition: box-shadow 0.2s ease;
+        }
+        .radar-wrapper:hover {
+            box-shadow: var(--shadow-md);
+        }
+        .radar-title {
+            font-weight: 600;
+            font-size: 0.9rem;
+            color: var(--gray-800);
+            margin-bottom: 16px;
+            padding-bottom: 8px;
+            border-bottom: 1px solid #eef2f8;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .radar-container canvas {
+            max-height: 300px;
+            width: 100%;
+        }
         .heatmap-container {
             background: white;
             border-radius: 20px;
             padding: 24px 20px;
-            margin-bottom: 32px;
             border: 1px solid var(--gray-200);
             box-shadow: var(--shadow-sm);
             transition: box-shadow 0.2s ease;
@@ -920,12 +957,12 @@
     <!-- PLANNING -->
     <section id="planner" class="tab-content"><div class="card"><div class="card-header"><h3><i class="fas fa-calendar-alt"></i> Planner Personnalisé</h3><button class="export-btn" onclick="exportPlanning()"><i class="fas fa-download"></i> Exporter</button></div><div class="planning-stats" id="planningStats"><div class="planning-stat-item"><div class="planning-stat-number" id="statSessions">6</div><div class="planning-stat-label">Sessions Planifiées</div></div><div class="planning-stat-item"><div class="planning-stat-number" id="statTotalDays">270</div><div class="planning-stat-label">Jours Totaux</div></div><div class="planning-stat-item"><div class="planning-stat-number" id="statQuality">3/4</div><div class="planning-stat-label">Niveau de Qualité</div></div><div class="planning-stat-item"><div class="planning-stat-number" id="statDuration">20min</div><div class="planning-stat-label">Durée/Session</div></div></div><div style="overflow-x:auto;"><table class="planning-sessions-table" id="sessionsTable"><thead><tr><th>Date</th><th>Session</th><th>Compétence</th><th>Durée</th><th>Intervalle</th><th>Type</th><th>Stratégie</th><th>Productivité</th><th>Heure Optimale</th></tr></thead><tbody id="sessionsTableBody"></tbody></table></div><div class="spaced-repetition-container"><h4><i class="fas fa-chart-line"></i> Courbe de Répétition Espacée</h4><div class="curve-legend"><div class="legend-item"><div class="legend-color" style="background:#1e1e1e;"></div><span>Seuil de rétention</span></div><div class="legend-item"><div class="legend-color square" style="background:#424242;"></div><span>Sessions</span></div></div><canvas id="spacedRepetitionCurve" width="100%" height="200" style="max-height:200px; width:100%;"></canvas><div id="intervalDatesCurve" style="font-size:0.7rem; text-align:center; margin-top:8px;"></div></div></div></section>
     
-    <!-- DASHBOARD (avec message réflexif IA) -->
+    <!-- DASHBOARD (avec radar à côté heatmap + message réflexif IA) -->
     <section id="dashboard" class="tab-content">
         <div class="card">
             <div class="card-header"><h3><i class="fas fa-chart-simple"></i> Analyse de la persistance et du management de l'effort (persévérance)</h3><div class="dashboard-view-toggle"><button class="view-btn active" data-view="combined" onclick="setDashboardView('combined')">📊 Vue d'ensemble</button></div></div>
             
-            <!-- ========== MESSAGE RÉFLEXIF IA AJOUTÉ ========== -->
+            <!-- ========== MESSAGE RÉFLEXIF IA ========== -->
             <div class="ia-reflective-message">
                 <div class="ia-message-header">
                     <div class="ia-avatar">
@@ -941,16 +978,36 @@
             </div>
             <!-- ========== FIN DU MESSAGE RÉFLEXIF ========== -->
             
-            <div class="heatmap-container">
-                <div class="heatmap-title">
-                    <h4><i class="fas fa-fire" style="color:#f97316;"></i> Heatmap d'activité – 4 semaines</h4>
-                    <span class="heatmap-sub">Intensité d'engagement quotidien</span>
+            <!-- SECTION HEATMAP + RADAR CÔTE À CÔTE -->
+            <div class="dashboard-two-columns">
+                <!-- Heatmap (gauche ou 1.2) -->
+                <div class="heatmap-wrapper">
+                    <div class="heatmap-container">
+                        <div class="heatmap-title">
+                            <h4><i class="fas fa-fire" style="color:#f97316;"></i> Heatmap d'activité – 4 semaines</h4>
+                            <span class="heatmap-sub">Intensité d'engagement quotidien</span>
+                        </div>
+                        <div class="heatmap-grid-wrapper">
+                            <div class="heatmap-grid" id="heatmapGrid"></div>
+                        </div>
+                        <div class="legend-heatmap" id="heatmapLegend"></div>
+                    </div>
                 </div>
-                <div class="heatmap-grid-wrapper">
-                    <div class="heatmap-grid" id="heatmapGrid"></div>
+                
+                <!-- Radar (droite) -->
+                <div class="radar-wrapper">
+                    <div class="radar-title">
+                        <i class="fas fa-chart-pie"></i> Analyse de l'engagement : Indicateurs de comportement d'apprentissage
+                    </div>
+                    <div class="radar-container">
+                        <canvas id="engagementRadarChart" width="400" height="400" style="max-width:100%; height:auto;"></canvas>
+                    </div>
+                    <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; font-size: 0.7rem; color: var(--gray-600);">
+                
+                    </div>
                 </div>
-                <div class="legend-heatmap" id="heatmapLegend"></div>
             </div>
+            
             <div class="symmetry-curve-card"><div class="curve-header"><h4><i class="fas fa-chart-line"></i> La moyenne d'intensité par jour</h4><div class="curve-legend-mini"><span style="color:#1e1e1e;">● Intensité moyenne</span><span style="color:#616161;">● Miroir symétrique</span></div></div><canvas id="symmetryHeatmapCurve" width="100%" height="180" style="max-height:180px; width:100%;" class="symmetry-canvas"></canvas><p style="font-size:0.7rem; color:var(--gray-500); margin-top:12px; text-align:center;"><i class="fas fa-chart-simple"></i> Courbe de la moyenne d'intensité par jour (symétrie gauche/droite). Visualisation des pics d'activité.</p></div>
             <div class="indicator-grid">
                 <div class="indicator-card"><div class="indicator-header"><div class="indicator-icon"><i class="fas fa-clock"></i></div><div class="indicator-title">Régularité du travail</div></div><div class="circular-progress" id="regularityCircle"><svg viewBox="0 0 120 120"><circle class="bg-circle" cx="60" cy="60" r="54"></circle><circle class="progress-circle" cx="60" cy="60" r="54" id="regularityCircleProgress"></circle></svg><div class="progress-percent" id="regularityPercent">90%</div><div class="progress-label"></div></div><div class="indicator-sub">La constance de l'activité de l'apprenant dans le temps.</div></div>
@@ -1023,11 +1080,64 @@
       { "id": "T-ORG", "label": "Organisation textuelle", "category": "Texte" },
       { "id": "T-REP", "label": "Effets de style", "category": "Texte" }
     ];
-    let eventsList = [], currentSessions = [], spacedChart = null, symmetryChart = null;
+    let eventsList = [], currentSessions = [], spacedChart = null, symmetryChart = null, radarChart = null;
     let profileData = { extraversion: 3, openness: 3, conscientiousness: 4, agreeableness: 3, neuroticism: 3, intrinsic: 3, introjected: 4 };
     const eventTemplates = [{ type: "Rappel d'étude", title: "Session de révision", message: "Votre session est prévue aujourd'hui.", priority: "high" },{ type: "Conseil IA", title: "Optimisation", message: "Révisez les conjugaisons.", priority: "medium" },{ type: "Encouragement", title: "Progression", message: "80% des objectifs atteints.", priority: "low" }];
     let journalEntries = [];
     
+    // Données pour le radar (8 indicateurs)
+    const radarIndicators = [
+        "Démarrage des activités", "Achèvement des activités",
+        "Taux d'erreur", "Tentatives de réponses",
+        "Éléments des connaissances validées", "Interactions avec les ressources",
+        "Score", "Niveau moyen des compétences"
+    ];
+    const radarValues = [85, 74, 65, 78, 72, 80, 70, 68]; // Pourcentages
+    // Paires inversées pour l'affichage symétrique dans le titre
+    
+    // Fonction pour créer ou mettre à jour le radar chart
+    function initRadarChart() {
+        const ctx = document.getElementById('engagementRadarChart')?.getContext('2d');
+        if(!ctx) return;
+        if(radarChart) radarChart.destroy();
+        radarChart = new Chart(ctx, {
+            type: 'radar',
+            data: {
+                labels: radarIndicators,
+                datasets: [{
+                    label: 'Taux (%)',
+                    data: radarValues,
+                    backgroundColor: 'rgba(30, 30, 30, 0.2)',
+                    borderColor: '#1e1e1e',
+                    borderWidth: 2,
+                    pointBackgroundColor: '#1e1e1e',
+                    pointBorderColor: '#ffffff',
+                    pointRadius: 5,
+                    pointHoverRadius: 7,
+                    fill: true
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: true,
+                scales: {
+                    r: {
+                        beginAtZero: true,
+                        max: 100,
+                        ticks: { stepSize: 20, backdropColor: 'transparent' },
+                        grid: { color: '#e0e0e0' },
+                        angleLines: { color: '#e0e0e0' },
+                        pointLabels: { font: { size: 10, weight: '500' }, color: '#424242' }
+                    }
+                },
+                plugins: {
+                    tooltip: { callbacks: { label: (ctx) => `${ctx.label}: ${ctx.raw}%` } },
+                    legend: { display: false }
+                }
+            }
+        });
+    }
+    
     // JOURNAL : NOUVELLES FONCTIONS AVEC DATE
     function loadJournalEntries() { 
         const saved = localStorage.getItem('perseverAI_journal'); 
@@ -1099,13 +1209,13 @@
         }); 
     }
     
-    // Autres fonctions existantes (non modifiées)
+    // Autres fonctions existantes 
     function generateHeatmapData() { const days = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']; const weeks = 4; let matrix = []; for(let w = 0; w < weeks; w++) { let week = []; for(let d = 0; d < 7; d++) { let base = (w * 7 + d) % 10; let level = 0; if(base < 3) level = 1; else if(base < 6) level = 2; else if(base < 8) level = 3; else level = 4; if(d === 3 || d === 4) level = Math.min(4, level+1); week.push(level); } matrix.push(week); } return { days, weeks: matrix }; }
     function renderHeatmap() { const container = document.getElementById('heatmapGrid'); if(!container) return; const { days, weeks } = generateHeatmapData(); container.innerHTML = ''; for(let i = 0; i < days.length; i++) { let dayDiv = document.createElement('div'); dayDiv.className = 'heatmap-day-label'; dayDiv.innerText = days[i]; container.appendChild(dayDiv); } for(let w = 0; w < weeks.length; w++) { for(let d = 0; d < weeks[w].length; d++) { let cell = document.createElement('div'); cell.className = `heatmap-cell level-${weeks[w][d]}`; cell.title = `${days[d]} Semaine ${w+1} : Niveau ${weeks[w][d]}`; container.appendChild(cell); } } const legendContainer = document.getElementById('heatmapLegend'); if(legendContainer) { legendContainer.innerHTML = `<div class="legend-heatmap-item"><div class="legend-color-box level-0"></div><span>Aucune activité</span></div><div class="legend-heatmap-item"><div class="legend-color-box level-1"></div><span>Faible</span></div><div class="legend-heatmap-item"><div class="legend-color-box level-2"></div><span>Moyenne</span></div><div class="legend-heatmap-item"><div class="legend-color-box level-3"></div><span>Élevée</span></div><div class="legend-heatmap-item"><div class="legend-color-box level-4"></div><span>Intense</span></div>`; } }
     function drawSymmetryCurve() { const canvas = document.getElementById('symmetryHeatmapCurve'); if(!canvas) return; const ctx = canvas.getContext('2d'); const container = canvas.parentElement; const width = container.clientWidth - 40; const height = 160; canvas.width = width; canvas.height = height; ctx.clearRect(0, 0, width, height); const { days, weeks } = generateHeatmapData(); let avgIntensity = new Array(7).fill(0); for(let w = 0; w < weeks.length; w++) for(let d = 0; d < 7; d++) avgIntensity[d] += weeks[w][d]; avgIntensity = avgIntensity.map(v => v / weeks.length); let reversed = [...avgIntensity].reverse(); let combined = avgIntensity.map((v,i)=> (v + reversed[i])/2); const points = combined.map((val, idx) => ({ x: (idx / 6) * width, y: height - (val / 4) * height })); ctx.beginPath(); ctx.strokeStyle = '#1e1e1e'; ctx.lineWidth = 2.5; ctx.setLineDash([]); points.forEach((p,i) => i===0 ? ctx.moveTo(p.x,p.y) : ctx.lineTo(p.x,p.y)); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = '#616161'; ctx.lineWidth = 2; ctx.setLineDash([6,8]); let mirrorPoints = points.map(p => ({ x: width - p.x, y: p.y })); mirrorPoints.forEach((p,i)=> i===0 ? ctx.moveTo(p.x,p.y) : ctx.lineTo(p.x,p.y)); ctx.stroke(); ctx.setLineDash([]); points.forEach(p => { ctx.beginPath(); ctx.fillStyle = '#1e1e1e'; ctx.arc(p.x, p.y, 4, 0, 2*Math.PI); ctx.fill(); ctx.fillStyle = 'white'; ctx.beginPath(); ctx.arc(p.x, p.y, 2, 0, 2*Math.PI); ctx.fill(); }); ctx.fillStyle = '#475569'; ctx.font = '9px Inter'; days.forEach((d,i) => { let x = (i/6)*width; ctx.fillText(d, x-8, height-6); }); }
     function updateCircularProgress(elementId, percent) { const circle = document.getElementById(elementId); if(!circle) return; const radius = 54; const circumference = 2 * Math.PI * radius; const offset = circumference - (percent / 100) * circumference; circle.style.strokeDasharray = `${circumference}`; circle.style.strokeDashoffset = offset; }
     function updateIndicators() { document.getElementById('regularityPercent').innerText = '90%'; document.getElementById('deadlinePercent').innerText = '88%'; updateCircularProgress('regularityCircleProgress', 90); updateCircularProgress('deadlineCircleProgress', 88); document.getElementById('effortPattern').innerHTML = "Effort concentré (Pic d'activité jeudi/vendredi)"; document.getElementById('persistenceScore').innerHTML = "Très élevée"; }
-    function setDashboardView(view) { if(view === 'combined') { renderHeatmap(); drawSymmetryCurve(); updateIndicators(); } }
+    function setDashboardView(view) { if(view === 'combined') { renderHeatmap(); drawSymmetryCurve(); updateIndicators(); initRadarChart(); } }
     function initCompetencesSelect() { const select = document.getElementById('competence'); if(select) select.innerHTML = '<option value="comprendre_mots">Comprendre les mots</option>' + competencesData.map(c => `<option value="${c.id}">${c.label}</option>`).join(''); }
     function setupRatingListeners() { document.querySelectorAll('.big5-rating .rating-btn').forEach(btn => btn.addEventListener('click', function() { const container = this.closest('.big5-rating'); const trait = container.dataset.trait; const value = parseInt(this.dataset.value); profileData[trait] = value; updateRatingUI(container, value); updateProfileUI(); saveProfileToStorage(); })); document.querySelectorAll('.motivation-rating .rating-btn').forEach(btn => btn.addEventListener('click', function() { const container = this.closest('.motivation-rating'); const motivation = container.dataset.motivation; const value = parseInt(this.dataset.value); profileData[motivation] = value; updateRatingUI(container, value); updateProfileUI(); saveProfileToStorage(); })); }
     function updateRatingUI(container, value) { container.querySelectorAll('.rating-btn').forEach(btn => { btn.classList.remove('active'); if(parseInt(btn.dataset.value) === value) btn.classList.add('active'); }); }
@@ -1130,7 +1240,7 @@
     function createChart() { const ctx = document.getElementById('notificationEfficiencyChart')?.getContext('2d'); if(ctx) efficiencyChart = new Chart(ctx, { type: 'bar', data: { labels: ['Acceptés', 'Rejetés', 'En attente'], datasets: [{ label: 'Actions', data: [0,0,0], backgroundColor: ['#2e7d32','#c62828','#b76e0e'] }] }, options: { responsive: true } }); }
     function saveEvents() { localStorage.setItem('eventsList', JSON.stringify(eventsList)); }
     function loadSavedData() { const saved = localStorage.getItem('eventsList'); if(saved) eventsList = JSON.parse(saved); }
-    function showTab(tabId) { document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active')); document.getElementById(tabId).classList.add('active'); document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active')); if(window.event?.target) window.event.target.classList.add('active'); if(tabId === 'dashboard') { renderHeatmap(); drawSymmetryCurve(); updateIndicators(); } if(tabId === 'planner') { if(currentSessions.length === 0) generateDefaultPlanning(); else drawSpacedRepetitionCurve(currentSessions); } if(tabId === 'notifications') { renderEventsTable(); updateEventStats(); } if(tabId === 'profile') { loadProfileFromStorage(); updateProfileUI(); } if(tabId === 'journal') { loadJournalEntries(); } }
+    function showTab(tabId) { document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active')); document.getElementById(tabId).classList.add('active'); document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active')); if(window.event?.target) window.event.target.classList.add('active'); if(tabId === 'dashboard') { renderHeatmap(); drawSymmetryCurve(); updateIndicators(); initRadarChart(); } if(tabId === 'planner') { if(currentSessions.length === 0) generateDefaultPlanning(); else drawSpacedRepetitionCurve(currentSessions); } if(tabId === 'notifications') { renderEventsTable(); updateEventStats(); } if(tabId === 'profile') { loadProfileFromStorage(); updateProfileUI(); } if(tabId === 'journal') { loadJournalEntries(); } }
     function showToast(msg) { let div = document.createElement('div'); div.style.cssText = `position:fixed; bottom:20px; right:20px; background:#1e293b; color:white; padding:12px 20px; border-radius:8px; z-index:1000;`; div.innerHTML = msg; document.body.appendChild(div); setTimeout(()=>div.remove(), 2500); }
     
     document.addEventListener('DOMContentLoaded', () => { 
@@ -1151,13 +1261,13 @@
         loadJournalEntries(); 
         updateCircularProgress('regularityCircleProgress', 90); 
         updateCircularProgress('deadlineCircleProgress', 88);
-        // Initialisation de la date du journal
         const todayDate = new Date().toISOString().split('T')[0];
         const journalDateInput = document.getElementById('journalDate');
         if(journalDateInput) journalDateInput.value = todayDate;
+        initRadarChart();
     });
     function initProfileModule() { loadProfileFromStorage(); setupRatingListeners(); updateProfileUI(); }
-    window.addEventListener('resize', () => { if(document.getElementById('dashboard').classList.contains('active')) drawSymmetryCurve(); if(document.getElementById('planner').classList.contains('active') && currentSessions.length > 0) drawSpacedRepetitionCurve(currentSessions); });
+    window.addEventListener('resize', () => { if(document.getElementById('dashboard').classList.contains('active')) { drawSymmetryCurve(); if(radarChart) radarChart.resize(); } if(document.getElementById('planner').classList.contains('active') && currentSessions.length > 0) drawSpacedRepetitionCurve(currentSessions); });
 </script>
 </body>
 </html>