Upload folder using huggingface_hub

index.html

@@ -168,6 +168,265 @@
             gap: 10px;
         }
         
+        /* Heatmap d'activité */
+        .heatmap-container {
+            margin-top: 2rem;
+        }
+        
+        .heatmap-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1.5rem;
+        }
+        
+        .heatmap-title {
+            font-size: 1.3rem;
+            color: var(--dark-color);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        
+        .heatmap-controls {
+            display: flex;
+            gap: 10px;
+        }
+        
+        .heatmap-period {
+            padding: 8px 15px;
+            border: 2px solid #e2e8f0;
+            border-radius: 8px;
+            background: #f8fafc;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        
+        .heatmap-period:hover {
+            border-color: var(--primary-color);
+        }
+        
+        .heatmap-period.active {
+            background: var(--primary-color);
+            color: white;
+            border-color: var(--primary-color);
+        }
+        
+        .heatmap-grid {
+            display: grid;
+            grid-template-columns: auto repeat(7, 1fr);
+            gap: 8px;
+            margin-top: 1rem;
+        }
+        
+        .heatmap-day-label {
+            text-align: right;
+            padding: 10px;
+            font-weight: 600;
+            color: var(--dark-color);
+        }
+        
+        .heatmap-cell {
+            aspect-ratio: 1;
+            border-radius: 4px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.8rem;
+            font-weight: bold;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+        
+        .heatmap-cell:hover {
+            transform: scale(1.1);
+            z-index: 10;
+        }
+        
+        .heatmap-intensity-0 { background: #f1f5f9; color: var(--gray-color); }
+        .heatmap-intensity-1 { background: #dbeafe; color: var(--dark-color); }
+        .heatmap-intensity-2 { background: #93c5fd; color: white; }
+        .heatmap-intensity-3 { background: #3b82f6; color: white; }
+        .heatmap-intensity-4 { background: #1d4ed8; color: white; }
+        
+        .heatmap-week-label {
+            text-align: center;
+            padding: 5px;
+            font-size: 0.9rem;
+            color: var(--gray-color);
+        }
+        
+        .heatmap-legend {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 15px;
+            margin-top: 1.5rem;
+            padding-top: 1.5rem;
+            border-top: 2px solid #f1f5f9;
+        }
+        
+        .legend-item {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        
+        .legend-color {
+            width: 20px;
+            height: 20px;
+            border-radius: 4px;
+        }
+        
+        /* Indicateurs de gestion du temps */
+        .time-management-stats {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+            margin-top: 2rem;
+        }
+        
+        .time-stat-card {
+            background: white;
+            border-radius: 12px;
+            padding: 1.5rem;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+            border-top: 4px solid var(--secondary-color);
+        }
+        
+        .time-stat-header {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 1rem;
+        }
+        
+        .time-stat-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.2rem;
+            color: white;
+        }
+        
+        .time-stat-value {
+            font-size: 2.5rem;
+            font-weight: bold;
+            color: var(--secondary-color);
+            margin: 10px 0;
+        }
+        
+        .time-stat-description {
+            color: var(--gray-color);
+            font-size: 0.9rem;
+            margin-top: 5px;
+        }
+        
+        .progress-circle {
+            width: 100px;
+            height: 100px;
+            position: relative;
+            margin: 0 auto;
+        }
+        
+        .progress-circle svg {
+            width: 100%;
+            height: 100%;
+        }
+        
+        .progress-text {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: var(--secondary-color);
+        }
+        
+        /* Effort Pattern */
+        .effort-pattern {
+            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+            border-radius: 12px;
+            padding: 1.5rem;
+            margin-top: 2rem;
+        }
+        
+        .pattern-badge {
+            display: inline-block;
+            padding: 8px 15px;
+            background: linear-gradient(135deg, #f59e0b, #d97706);
+            color: white;
+            border-radius: 20px;
+            font-weight: bold;
+            margin-bottom: 1rem;
+        }
+        
+        .pattern-details {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin-top: 1rem;
+        }
+        
+        .pattern-item {
+            background: white;
+            padding: 1rem;
+            border-radius: 8px;
+            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
+        }
+        
+        .pattern-label {
+            font-size: 0.9rem;
+            color: var(--gray-color);
+            margin-bottom: 5px;
+        }
+        
+        .pattern-value {
+            font-size: 1.1rem;
+            font-weight: bold;
+            color: var(--dark-color);
+        }
+        
+        /* Persistance */
+        .persistence-section {
+            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+            border-radius: 12px;
+            padding: 1.5rem;
+            margin-top: 2rem;
+            border-left: 5px solid #f59e0b;
+        }
+        
+        .persistence-header {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 1rem;
+        }
+        
+        .persistence-level {
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: #d97706;
+        }
+        
+        .persistence-details {
+            margin-top: 1rem;
+        }
+        
+        .persistence-item {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 10px;
+            padding: 8px;
+            background: rgba(255, 255, 255, 0.5);
+            border-radius: 8px;
+        }
+        
         /* Form Elements */
         .form-group {
             margin-bottom: 1.5rem;
@@ -721,6 +980,18 @@
             .flashcard-stats-summary {
                 grid-template-columns: 1fr;
             }
+            
+            .heatmap-grid {
+                gap: 4px;
+            }
+            
+            .heatmap-cell {
+                font-size: 0.7rem;
+            }
+            
+            .time-management-stats {
+                grid-template-columns: 1fr;
+            }
         }
     </style>
 </head>
@@ -729,8 +1000,8 @@
         <!-- Header -->
         <header class="header">
             <h1><i class="fas fa-graduation-cap"></i> Compagnon Pédagogique</h1>
-            <p>SCompétences ciblées, niveau maîtrisé, délai respecté — avec persistance et gestion de l’effort.</p>
-            <div class="badge">PerseverAId (AI + Aid + Perseverance)</div>
+            <p>Soutien à l'Apprentissage Autorégulé Durable par une Planification d'Étude Personnalisée et une Adaptation Générative de Contenu</p>
+            <div class="badge">Version Professionnelle 2.0 | SM-2 Niveau Avancé</div>
         </header>
         
         <!-- Navigation -->
@@ -1119,6 +1390,145 @@
                 
                 <div id="statsContainer" class="stats-grid"></div>
                 
+                <!-- Heatmap d'activité -->
+                <div class="heatmap-container">
+                    <div class="heatmap-header">
+                        <div class="heatmap-title">
+                            <i class="fas fa-fire"></i> Heatmap d'activité
+                        </div>
+                        <div class="heatmap-controls">
+                            <button class="heatmap-period active" onclick="changeHeatmapPeriod('month')">Mois</button>
+                            <button class="heatmap-period" onclick="changeHeatmapPeriod('quarter')">Trimestre</button>
+                            <button class="heatmap-period" onclick="changeHeatmapPeriod('year')">Année</button>
+                        </div>
+                    </div>
+                    
+                    <div id="heatmapContent">
+                        <!-- La heatmap sera générée ici par JavaScript -->
+                    </div>
+                    
+                    <div class="heatmap-legend">
+                        <div class="legend-item">
+                            <div class="legend-color heatmap-intensity-0"></div>
+                            <span>0 min</span>
+                        </div>
+                        <div class="legend-item">
+                            <div class="legend-color heatmap-intensity-1"></div>
+                            <span>15 min</span>
+                        </div>
+                        <div class="legend-item">
+                            <div class="legend-color heatmap-intensity-2"></div>
+                            <span>30 min</span>
+                        </div>
+                        <div class="legend-item">
+                            <div class="legend-color heatmap-intensity-3"></div>
+                            <span>45 min</span>
+                        </div>
+                        <div class="legend-item">
+                            <div class="legend-color heatmap-intensity-4"></div>
+                            <span>60+ min</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Indicateurs de gestion du temps -->
+                <div class="time-management-stats">
+                    <div class="time-stat-card">
+                        <div class="time-stat-header">
+                            <div class="time-stat-icon" style="background: linear-gradient(135deg, #10b981, #059669);">
+                                <i class="fas fa-calendar-check"></i>
+                            </div>
+                            <div>
+                                <h4>Régularité du travail</h4>
+                                <div class="time-stat-description">Constance de l'activité dans le temps</div>
+                            </div>
+                        </div>
+                        <div class="progress-circle">
+                            <svg viewBox="0 0 100 100">
+                                <circle cx="50" cy="50" r="45" fill="none" stroke="#e2e8f0" stroke-width="8"/>
+                                <circle cx="50" cy="50" r="45" fill="none" stroke="#10b981" stroke-width="8" 
+                                        stroke-linecap="round" stroke-dasharray="283" stroke-dashoffset="28.3"/>
+                            </svg>
+                            <div class="progress-text">90%</div>
+                        </div>
+                    </div>
+                    
+                    <div class="time-stat-card">
+                        <div class="time-stat-header">
+                            <div class="time-stat-icon" style="background: linear-gradient(135deg, #3b82f6, #1d4ed8);">
+                                <i class="fas fa-clock"></i>
+                            </div>
+                            <div>
+                                <h4>Gestion des échéances</h4>
+                                <div class="time-stat-description">Capacité à respecter les délais</div>
+                            </div>
+                        </div>
+                        <div class="progress-circle">
+                            <svg viewBox="0 0 100 100">
+                                <circle cx="50" cy="50" r="45" fill="none" stroke="#e2e8f0" stroke-width="8"/>
+                                <circle cx="50" cy="50" r="45" fill="none" stroke="#3b82f6" stroke-width="8" 
+                                        stroke-linecap="round" stroke-dasharray="283" stroke-dashoffset="53.77"/>
+                            </svg>
+                            <div class="progress-text">81%</div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Schéma d'effort -->
+                <div class="effort-pattern">
+                    <div class="pattern-badge">🕖 Schéma d'effort</div>
+                    <h4>Effort concentré (Pic d'activité jeudi/vendredi)</h4>
+                    <div class="time-stat-description">La dynamique temporelle de l'effort</div>
+                    
+                    <div class="pattern-details">
+                        <div class="pattern-item">
+                            <div class="pattern-label">Jour de pic</div>
+                            <div class="pattern-value">Jeudi</div>
+                        </div>
+                        <div class="pattern-item">
+                            <div class="pattern-label">Heure optimale</div>
+                            <div class="pattern-value">14h-16h</div>
+                        </div>
+                        <div class="pattern-item">
+                            <div class="pattern-label">Durée moyenne</div>
+                            <div class="pattern-value">42 min</div>
+                        </div>
+                        <div class="pattern-item">
+                            <div class="pattern-label">Fréquence</div>
+                            <div class="pattern-value">5j/semaine</div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Persistance et gestion des efforts -->
+                <div class="persistence-section">
+                    <div class="persistence-header">
+                        <div class="time-stat-icon" style="background: linear-gradient(135deg, #f59e0b, #d97706);">
+                            <i class="fas fa-mountain"></i>
+                        </div>
+                        <div>
+                            <h4>Persistance et gestion des efforts</h4>
+                            <div class="persistence-level">Très élevée</div>
+                        </div>
+                    </div>
+                    <div class="time-stat-description">Efforts constants, persévère même face aux difficultés</div>
+                    
+                    <div class="persistence-details">
+                        <div class="persistence-item">
+                            <i class="fas fa-check-circle" style="color: #10b981;"></i>
+                            <span>87% des sessions complétées sans interruption</span>
+                        </div>
+                        <div class="persistence-item">
+                            <i class="fas fa-check-circle" style="color: #10b981;"></i>
+                            <span>Maintien de la concentration pendant 92% du temps</span>
+                        </div>
+                        <div class="persistence-item">
+                            <i class="fas fa-check-circle" style="color: #10b981;"></i>
+                            <span>Récupération rapide après les difficultés</span>
+                        </div>
+                    </div>
+                </div>
+                
                 <div class="visualization-container">
                     <h4><i class="fas fa-chart-area"></i> Progression de la Rétention</h4>
                     <div class="chart-container">
@@ -1195,6 +1605,10 @@
             due: 0
         };
         
+        // Variables pour la heatmap
+        let heatmapData = [];
+        let currentHeatmapPeriod = 'month';
+        
         // Initialisation
         document.addEventListener('DOMContentLoaded', function() {
             loadCompetences();
@@ -1204,6 +1618,7 @@
             initializeHabitsProductivity();
             loadFlashcards();
             updateFlashcardStats();
+            generateHeatmap();
         });
         
         // Navigation
@@ -1241,6 +1656,7 @@
             // Actions spécifiques par onglet
             if (tabId === 'stats') {
                 refreshStats();
+                generateHeatmap();
             } else if (tabId === 'learn') {
                 updateComparisonChart();
             } else if (tabId === 'flashcards') {
@@ -1612,6 +2028,148 @@
             });
         }
         
+        // ============================================
+        // HEATMAP D'ACTIVITÉ
+        // ============================================
+        
+        // Générer la heatmap
+        function generateHeatmap() {
+            const container = document.getElementById('heatmapContent');
+            
+            // Générer des données de démonstration
+            heatmapData = generateDemoHeatmapData(currentHeatmapPeriod);
+            
+            // Créer la structure de la heatmap
+            let html = '<div class="heatmap-grid">';
+            
+            // Ajouter les étiquettes des jours
+            const days = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];
+            html += '<div class="heatmap-day-label"></div>';
+            days.forEach(day => {
+                html += `<div class="heatmap-day-label">${day}</div>`;
+            });
+            
+            // Ajouter les cellules de la heatmap
+            heatmapData.forEach((week, weekIndex) => {
+                html += `<div class="heatmap-week-label">S${weekIndex + 1}</div>`;
+                
+                days.forEach((day, dayIndex) => {
+                    const activity = week[dayIndex];
+                    if (activity !== null) {
+                        const intensity = getIntensityLevel(activity);
+                        const tooltip = `Jour: ${day}, Semaine ${weekIndex + 1}\nActivité: ${activity} minutes`;
+                        html += `
+                            <div class="heatmap-cell heatmap-intensity-${intensity}" 
+                                 title="${tooltip}" 
+                                 onclick="showDayDetails(${weekIndex}, ${dayIndex}, ${activity})">
+                                ${activity}
+                            </div>
+                        `;
+                    } else {
+                        html += '<div class="heatmap-cell" style="visibility: hidden;"></div>';
+                    }
+                });
+            });
+            
+            html += '</div>';
+            container.innerHTML = html;
+        }
+        
+        // Générer des données de démonstration pour la heatmap
+        function generateDemoHeatmapData(period) {
+            const data = [];
+            let weeks = 4; // Par défaut pour le mois
+            
+            if (period === 'quarter') weeks = 13;
+            if (period === 'year') weeks = 52;
+            
+            // Pattern d'activité typique (plus d'activité jeudi/vendredi)
+            for (let week = 0; week < weeks; week++) {
+                const weekData = [];
+                for (let day = 0; day < 7; day++) {
+                    // Générer une activité aléatoire avec un pattern spécifique
+                    let activity = 0;
+                    
+                    // Plus d'activité jeudi (jour 3) et vendredi (jour 4)
+                    if (day === 3 || day === 4) {
+                        // Jeudi/vendredi: haute activité (30-75 min)
+                        activity = Math.floor(Math.random() * 45) + 30;
+                    } else if (day === 0 || day === 6) {
+                        // Week-end: activité moyenne (15-45 min)
+                        activity = Math.floor(Math.random() * 30) + 15;
+                    } else {
+                        // Autres jours: activité basse (0-30 min)
+                        activity = Math.floor(Math.random() * 30);
+                    }
+                    
+                    // Ajouter une variabilité hebdomadaire
+                    if (week % 4 === 0) {
+                        // Semaines fortes
+                        activity = Math.min(activity * 1.3, 90);
+                    } else if (week % 4 === 2) {
+                        // Semaines faibles
+                        activity = Math.max(activity * 0.7, 10);
+                    }
+                    
+                    // Arrondir à l'entier le plus proche
+                    activity = Math.round(activity);
+                    
+                    weekData.push(activity);
+                }
+                data.push(weekData);
+            }
+            
+            return data;
+        }
+        
+        // Obtenir le niveau d'intensité basé sur le temps d'activité
+        function getIntensityLevel(activity) {
+            if (activity === 0) return 0;
+            if (activity <= 15) return 1;
+            if (activity <= 30) return 2;
+            if (activity <= 45) return 3;
+            return 4;
+        }
+        
+        // Changer la période de la heatmap
+        function changeHeatmapPeriod(period) {
+            currentHeatmapPeriod = period;
+            
+            // Mettre à jour les boutons
+            document.querySelectorAll('.heatmap-period').forEach(btn => {
+                btn.classList.remove('active');
+                if (btn.textContent.toLowerCase().includes(period)) {
+                    btn.classList.add('active');
+                }
+            });
+            
+            // Regénérer la heatmap
+            generateHeatmap();
+        }
+        
+        // Afficher les détails d'un jour spécifique
+        function showDayDetails(weekIndex, dayIndex, activity) {
+            const days = ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'];
+            const dayName = days[dayIndex];
+            
+            let evaluation = '';
+            if (activity >= 60) {
+                evaluation = '🌋 Activité intense';
+            } else if (activity >= 45) {
+                evaluation = '🔥 Très productive';
+            } else if (activity >= 30) {
+                evaluation = '💪 Productive';
+            } else if (activity >= 15) {
+                evaluation = '🌱 Régulière';
+            } else if (activity > 0) {
+                evaluation = '🌼 Légère';
+            } else {
+                evaluation = '⏸️ Repos';
+            }
+            
+            alert(`📅 ${dayName}, Semaine ${weekIndex + 1}\n⏱️ Temps d'étude: ${activity} minutes\n📊 Évaluation: ${evaluation}`);
+        }
+        
         // ============================================
         // FLASHCARD APPLICATION
         // ============================================