Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PerseverAI - Compagnon Pédagogique</title> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #2563eb; | |
| --primary-dark: #1d4ed8; | |
| --secondary: #475569; | |
| --success: #16a34a; | |
| --warning: #d97706; | |
| --danger: #dc2626; | |
| --info: #0891b2; | |
| --purple: #7c3aed; | |
| --gray-50: #f8fafc; | |
| --gray-100: #f1f5f9; | |
| --gray-200: #e2e8f0; | |
| --gray-600: #475569; | |
| --gray-800: #1e293b; | |
| --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); | |
| --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; | |
| background: var(--gray-50); | |
| color: var(--gray-800); | |
| line-height: 1.5; | |
| } | |
| .container { max-width: 1400px; margin: 0 auto; padding: 24px; } | |
| .header { | |
| background: white; | |
| border-radius: 12px; | |
| padding: 24px 32px; | |
| margin-bottom: 24px; | |
| box-shadow: var(--shadow-sm); | |
| border: 1px solid var(--gray-200); | |
| } | |
| .header h1 { font-size: 1.75rem; font-weight: 600; color: var(--gray-800); margin-bottom: 8px; } | |
| .header p { color: var(--gray-600); font-size: 0.9rem; } | |
| .badge { display: inline-block; background: var(--gray-100); padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; color: var(--gray-600); margin-top: 12px; } | |
| .nav-tabs { | |
| display: flex; | |
| background: white; | |
| border-radius: 12px; | |
| border: 1px solid var(--gray-200); | |
| overflow-x: auto; | |
| margin-bottom: 24px; | |
| } | |
| .nav-tab { | |
| padding: 14px 20px; | |
| background: transparent; | |
| border: none; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| color: var(--gray-600); | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| white-space: nowrap; | |
| border-bottom: 2px solid transparent; | |
| } | |
| .nav-tab:hover { color: var(--primary); background: var(--gray-50); } | |
| .nav-tab.active { color: var(--primary); border-bottom-color: var(--primary); } | |
| .card { | |
| background: white; | |
| border-radius: 12px; | |
| border: 1px solid var(--gray-200); | |
| padding: 24px; | |
| margin-bottom: 24px; | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| padding-bottom: 16px; | |
| border-bottom: 1px solid var(--gray-200); | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| } | |
| .card-header h3 { font-size: 1.25rem; font-weight: 600; color: var(--gray-800); } | |
| .form-group { margin-bottom: 20px; } | |
| .form-label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--gray-600); margin-bottom: 8px; } | |
| .form-control { | |
| width: 100%; | |
| padding: 10px 14px; | |
| border: 1px solid var(--gray-200); | |
| border-radius: 8px; | |
| font-size: 0.9rem; | |
| transition: all 0.2s; | |
| } | |
| .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } | |
| .form-row { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; } | |
| .form-col { flex: 1; min-width: 200px; } | |
| .btn { | |
| padding: 10px 18px; | |
| border-radius: 8px; | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| border: none; | |
| } | |
| .btn-primary { background: var(--primary); color: white; } | |
| .btn-primary:hover { background: var(--primary-dark); } | |
| .btn-secondary { background: white; border: 1px solid var(--gray-200); color: var(--gray-600); } | |
| .btn-secondary:hover { background: var(--gray-50); } | |
| .btn-large { padding: 12px 24px; font-size: 0.9rem; } | |
| /* Planning Stats Cards */ | |
| .planning-stats { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 16px; | |
| margin-bottom: 28px; | |
| background: var(--gray-50); | |
| border-radius: 16px; | |
| padding: 20px; | |
| } | |
| .planning-stat-item { | |
| text-align: center; | |
| background: white; | |
| padding: 16px; | |
| border-radius: 12px; | |
| border: 1px solid var(--gray-200); | |
| } | |
| .planning-stat-number { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| } | |
| .planning-stat-label { | |
| font-size: 0.75rem; | |
| color: var(--gray-600); | |
| margin-top: 4px; | |
| } | |
| /* Planning Table */ | |
| .planning-sessions-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-top: 20px; | |
| } | |
| .planning-sessions-table th { | |
| text-align: left; | |
| padding: 14px 12px; | |
| background: var(--gray-50); | |
| border-bottom: 2px solid var(--gray-200); | |
| font-weight: 600; | |
| font-size: 0.8rem; | |
| color: var(--gray-600); | |
| } | |
| .planning-sessions-table td { | |
| padding: 16px 12px; | |
| border-bottom: 1px solid var(--gray-200); | |
| vertical-align: top; | |
| } | |
| .session-type-badge { | |
| display: inline-block; | |
| padding: 4px 10px; | |
| border-radius: 20px; | |
| font-size: 0.7rem; | |
| font-weight: 500; | |
| } | |
| .type-apprentissage { background: #dbeafe; color: #1e40af; } | |
| .type-consolidation { background: #dcfce7; color: #166534; } | |
| .type-maintien { background: #fef3c7; color: #92400e; } | |
| .interval-visual { | |
| width: 100%; | |
| height: 80px; | |
| background: var(--gray-100); | |
| border-radius: 8px; | |
| position: relative; | |
| margin-top: 20px; | |
| } | |
| .retention-slider { | |
| width: 100%; | |
| margin: 15px 0; | |
| } | |
| .retention-slider input { | |
| width: 100%; | |
| cursor: pointer; | |
| accent-color: var(--primary); | |
| } | |
| .retention-labels { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.7rem; | |
| color: var(--gray-600); | |
| margin-top: 5px; | |
| } | |
| .time-slots-group { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| margin-top: 8px; | |
| } | |
| .time-slot-checkbox { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| background: var(--gray-50); | |
| padding: 6px 12px; | |
| border-radius: 20px; | |
| border: 1px solid var(--gray-200); | |
| cursor: pointer; | |
| } | |
| .radio-group { | |
| display: flex; | |
| gap: 20px; | |
| margin-top: 8px; | |
| } | |
| .radio-option { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| cursor: pointer; | |
| } | |
| .notifications-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.85rem; | |
| } | |
| .notifications-table th { | |
| text-align: left; | |
| padding: 12px 8px; | |
| background: var(--gray-50); | |
| border-bottom: 2px solid var(--gray-200); | |
| font-weight: 600; | |
| } | |
| .notifications-table td { | |
| padding: 12px 8px; | |
| border-bottom: 1px solid var(--gray-200); | |
| } | |
| .priority-high { color: var(--danger); font-weight: 600; } | |
| .priority-medium { color: var(--warning); font-weight: 600; } | |
| .priority-low { color: var(--success); font-weight: 600; } | |
| .status-badge { | |
| display: inline-block; | |
| padding: 4px 10px; | |
| border-radius: 20px; | |
| font-size: 0.7rem; | |
| font-weight: 500; | |
| } | |
| .status-pending { background: #fef3c7; color: #92400e; } | |
| .status-accepted { background: #dcfce7; color: #166534; } | |
| .action-cell { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| } | |
| .action-icon-btn { | |
| background: transparent; | |
| border: none; | |
| cursor: pointer; | |
| padding: 6px 10px; | |
| border-radius: 20px; | |
| font-size: 0.7rem; | |
| font-weight: 500; | |
| transition: all 0.2s; | |
| } | |
| .action-accept { background: #dcfce7; color: #166534; } | |
| .action-reject { background: #fee2e2; color: #991b1b; } | |
| .action-hold { background: #e0f2fe; color: #075985; } | |
| .action-help { background: #fed7aa; color: #9a3412; } | |
| .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; } | |
| .stat-card { background: white; border: 1px solid var(--gray-200); border-radius: 8px; padding: 16px; text-align: center; } | |
| .stat-value { font-size: 1.75rem; font-weight: 700; color: var(--primary); } | |
| .chart-container { height: 300px; margin-top: 20px; } | |
| .tab-content { display: none; } | |
| .tab-content.active { display: block; } | |
| @media (max-width: 768px) { | |
| .container { padding: 16px; } | |
| .planning-sessions-table { font-size: 0.7rem; } | |
| .planning-sessions-table td, .planning-sessions-table th { padding: 8px 6px; } | |
| } | |
| .session-detail-line { font-size: 0.75rem; color: var(--gray-600); margin: 4px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } | |
| .session-detail-line i { width: 20px; color: var(--primary); } | |
| .export-btn { background: white; border: 1px solid var(--gray-200); padding: 8px 16px; border-radius: 8px; cursor: pointer; } | |
| .export-btn:hover { background: var(--gray-50); } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header class="header"> | |
| <h1>PerseverAI</h1> | |
| <p>Compagnon d'apprentissage autorégulé - Notifications IA & Actions</p> | |
| <div class="badge">AI · Aid · Perseverance · Tableau des événements</div> | |
| </header> | |
| <nav class="nav-tabs"> | |
| <button class="nav-tab" onclick="showTab('profile')">Profil</button> | |
| <button class="nav-tab" onclick="showTab('objectif')">Objectif</button> | |
| <button class="nav-tab" onclick="showTab('planner')">Planning</button> | |
| <button class="nav-tab" onclick="showTab('dashboard')">Mon Dashboard</button> | |
| <button class="nav-tab" onclick="showTab('journal')">Mon Journal</button> | |
| <button class="nav-tab active" onclick="showTab('notifications')">Notifications IA</button> | |
| </nav> | |
| <section id="profile" class="tab-content"> | |
| <div class="card"> | |
| <div class="card-header"><h3>Profil d'apprentissage</h3><button class="btn btn-secondary" onclick="saveProfile()">Sauvegarder</button></div> | |
| <div class="profile-summary" style="display:grid; grid-template-columns:1fr 1fr; gap:20px;"> | |
| <div><h4>Big Five</h4><div id="big5-summary"></div></div> | |
| <div><h4>Motivation</h4><div id="motivation-summary"></div></div> | |
| </div> | |
| <button class="btn btn-primary" onclick="completeProfile()">Finaliser le profil</button> | |
| </div> | |
| </section> | |
| <section id="objectif" class="tab-content"> | |
| <div class="card"> | |
| <div class="card-header"><h3>Définir mon Objectif d'Apprentissage</h3></div> | |
| <div class="form-row"> | |
| <div class="form-col"><label class="form-label">Compétence Cible</label><select id="competence" class="form-control"></select></div> | |
| <div class="form-col"><label class="form-label">Niveau Actuel</label><select id="level" class="form-control"><option value="0">Débutant</option><option value="1" selected>Intermédiaire</option><option value="2">Avancé</option></select></div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-col"><label class="form-label">Date de Début</label><input type="date" id="start" class="form-control" value="2024-01-15"></div> | |
| <div class="form-col"><label class="form-label">Date de Fin</label><input type="date" id="end" class="form-control" value="2024-12-31"></div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-col"><label class="form-label">Durée par Session (minutes)</label><select id="sessionDuration" class="form-control"><option value="20" selected>20 minutes (Optimal)</option><option value="30">30 minutes</option><option value="45">45 minutes</option></select></div> | |
| <div class="form-col"><label class="form-label">Méthode Productivité</label><div class="radio-group"><label class="radio-option"><input type="radio" name="productivityMethod" value="pomodoro" checked> Pomodoro</label><label class="radio-option"><input type="radio" name="productivityMethod" value="deepwork"> Deep Work</label></div></div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-col"><label class="form-label">Type d'Énergie</label><div class="radio-group"><label class="radio-option"><input type="radio" name="energyType" value="morning" checked> Matinale</label><label class="radio-option"><input type="radio" name="energyType" value="evening"> Vespérale</label></div></div> | |
| <div class="form-col"><label class="form-label">Créneaux Disponibles</label><div class="time-slots-group" id="timeSlotsGroup"><label class="time-slot-checkbox"><input type="checkbox" value="08:00-10:00"> 08:00-10:00</label><label class="time-slot-checkbox"><input type="checkbox" value="10:00-12:00"> 10:00-12:00</label><label class="time-slot-checkbox"><input type="checkbox" value="14:00-16:00"> 14:00-16:00</label></div></div> | |
| </div> | |
| <div class="form-group"><label class="form-label">Qualité Estimée de Rétention</label><div class="retention-slider"><input type="range" id="retentionQuality" min="0" max="3" step="1" value="2"><div class="retention-labels"><span>0 - Faible</span><span>1 - Moyenne</span><span>2 - Bonne</span><span>3 - Excellente</span></div></div><div class="retention-value" id="retentionValueDisplay">Bon - Consolidation progressive</div></div> | |
| <button class="btn btn-primary btn-large" onclick="generatePlanner()" style="width:100%;"><i class="fas fa-magic"></i> Générer le Planner Personnalisé</button> | |
| </div> | |
| </section> | |
| <!-- PLANNING - Version complète avec statistiques et tableau SM-2 --> | |
| <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> | |
| <!-- Statistiques du planning --> | |
| <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> | |
| <!-- Tableau des sessions planifiées (modèle SM-2) --> | |
| <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"> | |
| <!-- Les sessions seront générées dynamiquement --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Visualisation des intervalles SM-2 --> | |
| <div style="margin-top: 32px;"> | |
| <h4 style="margin-bottom: 16px; font-size: 0.9rem;"><i class="fas fa-chart-line"></i> Visualisation des Intervalles SM-2</h4> | |
| <div style="background: var(--gray-50); border-radius: 12px; padding: 20px; position: relative;"> | |
| <canvas id="intervalChart" width="100%" height="80" style="max-height: 100px; width: 100%;"></canvas> | |
| <div style="display: flex; justify-content: space-between; margin-top: 12px; font-size: 0.7rem; color: var(--gray-600);" id="intervalDates"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="dashboard" class="tab-content"> | |
| <div class="card"><div class="card-header"><h3>Tableau de bord</h3></div><div class="stats-grid" id="dashboardStats"></div><div class="chart-container"><canvas id="progressChart"></canvas></div></div> | |
| </section> | |
| <section id="journal" class="tab-content"> | |
| <div class="card"><div class="card-header"><h3>Mon journal d'apprentissage</h3><button class="btn btn-secondary" onclick="saveJournal()">Sauvegarder</button></div> | |
| <div class="form-group"><label class="form-label">Accompli aujourd'hui</label><textarea id="done" class="form-control" rows="2"></textarea></div> | |
| <div class="form-group"><label class="form-label">Stratégie utilisée</label><textarea id="metacognition" class="form-control" rows="2"></textarea></div> | |
| <div id="journalEntriesList"></div></div> | |
| </section> | |
| <section id="notifications" class="tab-content active"> | |
| <div class="card"> | |
| <div class="card-header"><h3><i class="fas fa-bell"></i> Notifications IA - Tableau des événements</h3><button class="btn btn-primary" onclick="generateRandomEvent()"><i class="fas fa-plus"></i> Générer un événement</button></div> | |
| <div class="stats-grid"><div class="stat-card"><div class="stat-value" id="totalEvents">0</div><div class="stat-label">Total</div></div><div class="stat-card"><div class="stat-value" id="pendingEvents">0</div><div class="stat-label">En attente</div></div><div class="stat-card"><div class="stat-value" id="acceptedEvents">0</div><div class="stat-label">Acceptés</div></div></div> | |
| <div style="overflow-x:auto;"><table class="notifications-table"><thead><tr><th>Date</th><th>Type</th><th>Titre</th><th>Message</th><th>Priorité</th><th>Statut</th><th>Actions</th></tr></thead><tbody id="notificationsTableBody"></tbody></table></div> | |
| <div class="chart-container"><canvas id="notificationEfficiencyChart"></canvas></div> | |
| </div> | |
| </section> | |
| </div> | |
| <script> | |
| const competencesData = [ | |
| { "id": "D-MCONJ", "label": "Marques de la conjugaison", "category": "Discours" }, | |
| { "id": "D-PDV", "label": "Points de vue adoptés", "category": "Discours" }, | |
| { "id": "D-SSENT", "label": "Compréhension des mots", "category": "Discours" }, | |
| { "id": "M-CHOI", "label": "Choix des mots et des expressions", "category": "Maîtrise" }, | |
| { "id": "M-COMP", "label": "Construction des phrases", "category": "Maîtrise" }, | |
| { "id": "M-DEV", "label": "Développement du vocabulaire", "category": "Maîtrise" } | |
| ]; | |
| let eventsList = []; | |
| let profile = { bigFive: { extraversion:3, conscientiousness:4, neuroticism:3 } }; | |
| let currentSessions = []; | |
| 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" } | |
| ]; | |
| document.addEventListener('DOMContentLoaded', () => { | |
| initCompetencesSelect(); | |
| loadSavedData(); | |
| renderEventsTable(); | |
| updateEventStats(); | |
| createChart(); | |
| initProfileSummary(); | |
| const retentionSlider = document.getElementById('retentionQuality'); | |
| if(retentionSlider) retentionSlider.addEventListener('input', function() { | |
| const val = parseInt(this.value); | |
| const messages = {0: "0 - Faible", 1: "1 - Moyenne", 2: "2 - Bon - Consolidation progressive", 3: "3 - Excellente"}; | |
| document.getElementById('retentionValueDisplay').innerText = messages[val]; | |
| }); | |
| // Générer planning par défaut | |
| generateDefaultPlanning(); | |
| }); | |
| 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 initProfileSummary() { | |
| document.getElementById('big5-summary').innerHTML = `<div>Extraversion: ${profile.bigFive.extraversion}</div><div>Conscience: ${profile.bigFive.conscientiousness}</div>`; | |
| document.getElementById('motivation-summary').innerHTML = `<div>Motivation: 3.5/5</div>`; | |
| } | |
| // Génération du planning selon le modèle SM-2 avec intervalles exponentiels | |
| function generatePlanner() { | |
| const competence = document.getElementById('competence')?.value || "comprendre_mots"; | |
| const competenceLabel = competencesData.find(c=>c.id===competence)?.label || "Comprendre les mots"; | |
| const startDate = new Date(document.getElementById('start')?.value || "2024-01-15"); | |
| const sessionDur = document.getElementById('sessionDuration')?.value || "20"; | |
| const method = document.querySelector('input[name="productivityMethod"]:checked')?.value || "pomodoro"; | |
| const energy = document.querySelector('input[name="energyType"]:checked')?.value || "morning"; | |
| const retention = document.getElementById('retentionQuality')?.value || "2"; | |
| const timeSlot = document.querySelector('#timeSlotsGroup input:checked')?.value || "08:00-10:00"; | |
| // Intervalles SM-2: 1, 7, 16, 35, 70, 140 jours | |
| const intervals = [1, 7, 16, 35, 70, 140]; | |
| const sessions = []; | |
| let currentDate = new Date(startDate); | |
| for(let i = 0; i < intervals.length; i++) { | |
| if(i > 0) currentDate = new Date(startDate); | |
| if(i > 0) currentDate.setDate(startDate.getDate() + intervals[i-1]); | |
| else currentDate = new Date(startDate); | |
| const sessionTypes = ["Apprentissage", "Consolidation", "Consolidation", "Maintien", "Maintien", "Maintien"]; | |
| const strategies = ["Focus intense", "Révision active", "Révision active", "Révision active", "Révision active", "Révision active"]; | |
| sessions.push({ | |
| id: i+1, | |
| date: new Date(currentDate), | |
| dateStr: currentDate.toLocaleDateString('fr-FR'), | |
| dayName: currentDate.toLocaleDateString('fr-FR', { weekday: 'long' }), | |
| competence: competenceLabel, | |
| duration: sessionDur + " minutes", | |
| interval: intervals[i] + " jours", | |
| type: sessionTypes[i], | |
| strategy: strategies[i], | |
| productivity: method === 'pomodoro' ? 'Pomodoro' : 'Deep Work', | |
| optimalTime: timeSlot | |
| }); | |
| } | |
| currentSessions = sessions; | |
| renderPlanningTable(sessions); | |
| updatePlanningStats(sessions, retention, sessionDur); | |
| drawIntervalChart(sessions); | |
| showToast("Planning personnalisé généré avec succès !"); | |
| showTab('planner'); | |
| } | |
| function generateDefaultPlanning() { | |
| const startDate = new Date("2024-01-17"); | |
| const intervals = [1, 7, 16, 35, 70, 140]; | |
| const sessions = []; | |
| for(let i = 0; i < intervals.length; i++) { | |
| let currentDate = new Date(startDate); | |
| if(i > 0) currentDate.setDate(startDate.getDate() + (i===1?1: intervals[i-1])); | |
| else currentDate = new Date(startDate); | |
| const sessionTypes = ["Apprentissage", "Consolidation", "Consolidation", "Maintien", "Maintien", "Maintien"]; | |
| const strategies = ["Focus intense", "Révision active", "Révision active", "Révision active", "Révision active", "Révision active"]; | |
| sessions.push({ | |
| id: i+1, | |
| date: new Date(currentDate), | |
| dateStr: currentDate.toLocaleDateString('fr-FR'), | |
| dayName: currentDate.toLocaleDateString('fr-FR', { weekday: 'long' }), | |
| competence: "comprendre_mots", | |
| duration: "20 minutes", | |
| interval: intervals[i] + " jours", | |
| type: sessionTypes[i], | |
| strategy: strategies[i], | |
| productivity: "Pomodoro", | |
| optimalTime: "08:00-10:00" | |
| }); | |
| } | |
| currentSessions = sessions; | |
| renderPlanningTable(sessions); | |
| updatePlanningStats(sessions, "2", "20"); | |
| drawIntervalChart(sessions); | |
| } | |
| function renderPlanningTable(sessions) { | |
| const tbody = document.getElementById('sessionsTableBody'); | |
| if(!tbody) return; | |
| tbody.innerHTML = sessions.map(s => ` | |
| <tr> | |
| <td style="white-space:nowrap;"><strong>${s.dateStr}</strong><br><span style="font-size:0.7rem; color:var(--gray-600);">${s.dayName}</span></td> | |
| <td><strong>R${s.id}</strong></td> | |
| <td>${s.competence}</td> | |
| <td>${s.duration}</td> | |
| <td>${s.interval}</td> | |
| <td><span class="session-type-badge ${s.type === 'Apprentissage' ? 'type-apprentissage' : (s.type === 'Consolidation' ? 'type-consolidation' : 'type-maintien')}">${s.type}</span></td> | |
| <td>${s.strategy}</td> | |
| <td>${s.productivity}</td> | |
| <td>${s.optimalTime}</td> | |
| </tr> | |
| `).join(''); | |
| } | |
| function updatePlanningStats(sessions, quality, duration) { | |
| document.getElementById('statSessions').innerText = sessions.length; | |
| if(sessions.length > 0) { | |
| const lastDate = sessions[sessions.length-1].date; | |
| const firstDate = sessions[0].date; | |
| const totalDays = Math.ceil((lastDate - firstDate) / (1000 * 60 * 60 * 24)); | |
| document.getElementById('statTotalDays').innerText = totalDays; | |
| } else { | |
| document.getElementById('statTotalDays').innerText = "0"; | |
| } | |
| const qualityMap = {'0':'1/4','1':'2/4','2':'3/4','3':'4/4'}; | |
| document.getElementById('statQuality').innerText = qualityMap[quality] || "3/4"; | |
| document.getElementById('statDuration').innerText = duration + "min"; | |
| } | |
| function drawIntervalChart(sessions) { | |
| const canvas = document.getElementById('intervalChart'); | |
| if(!canvas) return; | |
| const ctx = canvas.getContext('2d'); | |
| canvas.width = canvas.parentElement.clientWidth - 40; | |
| canvas.height = 80; | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| if(sessions.length === 0) return; | |
| const startTime = sessions[0].date.getTime(); | |
| const endTime = sessions[sessions.length-1].date.getTime(); | |
| const totalDuration = endTime - startTime; | |
| ctx.beginPath(); | |
| ctx.strokeStyle = '#2563eb'; | |
| ctx.lineWidth = 3; | |
| for(let i = 0; i < sessions.length; i++) { | |
| const x = ((sessions[i].date.getTime() - startTime) / totalDuration) * canvas.width; | |
| ctx.fillStyle = '#2563eb'; | |
| ctx.beginPath(); | |
| ctx.arc(x, canvas.height/2, 6, 0, 2*Math.PI); | |
| ctx.fill(); | |
| ctx.fillStyle = 'white'; | |
| ctx.beginPath(); | |
| ctx.arc(x, canvas.height/2, 3, 0, 2*Math.PI); | |
| ctx.fill(); | |
| ctx.fillStyle = '#1e293b'; | |
| ctx.font = '10px Inter'; | |
| ctx.fillText(`R${i+1}`, x-6, canvas.height/2 - 8); | |
| } | |
| // Ligne de connexion | |
| ctx.beginPath(); | |
| ctx.strokeStyle = '#94a3b8'; | |
| ctx.lineWidth = 1.5; | |
| ctx.setLineDash([5, 5]); | |
| for(let i = 0; i < sessions.length; i++) { | |
| const x = ((sessions[i].date.getTime() - startTime) / totalDuration) * canvas.width; | |
| if(i === 0) ctx.moveTo(x, canvas.height/2); | |
| else ctx.lineTo(x, canvas.height/2); | |
| } | |
| ctx.stroke(); | |
| ctx.setLineDash([]); | |
| // Dates sous le graphique | |
| const datesDiv = document.getElementById('intervalDates'); | |
| if(datesDiv) { | |
| datesDiv.innerHTML = sessions.map(s => `<span>${s.dateStr}</span>`).join(''); | |
| } | |
| } | |
| function exportPlanning() { | |
| let csv = "Date,Session,Compétence,Durée,Intervalle,Type,Stratégie,Productivité,Heure Optimale\n"; | |
| currentSessions.forEach(s => { | |
| csv += `"${s.dateStr}","R${s.id}","${s.competence}","${s.duration}","${s.interval}","${s.type}","${s.strategy}","${s.productivity}","${s.optimalTime}"\n`; | |
| }); | |
| const blob = new Blob([csv], {type: 'text/csv'}); | |
| const link = document.createElement('a'); | |
| link.href = URL.createObjectURL(blob); | |
| link.download = 'planning_perseverai.csv'; | |
| link.click(); | |
| showToast("Planning exporté en CSV"); | |
| } | |
| // ========== FONCTIONS NOTIFICATIONS ========== | |
| function generateRandomEvent() { | |
| const template = eventTemplates[Math.floor(Math.random() * eventTemplates.length)]; | |
| const newEvent = { id: Date.now() + Math.random(), date: new Date().toLocaleString(), type: template.type, title: template.title, message: template.message, priority: template.priority, status: 'pending' }; | |
| eventsList.unshift(newEvent); | |
| saveEvents(); | |
| renderEventsTable(); | |
| updateEventStats(); | |
| showToast(`Nouvel événement: ${template.title}`); | |
| } | |
| function executeAction(eventId, actionType, actionLabel) { | |
| const eventIndex = eventsList.findIndex(e => e.id == eventId); | |
| if(eventIndex === -1) return; | |
| eventsList[eventIndex].status = actionType === 'ACCEPT' ? 'accepted' : (actionType === 'REJECT' ? 'rejected' : 'hold'); | |
| renderEventsTable(); | |
| updateEventStats(); | |
| saveEvents(); | |
| showToast(`${actionLabel}`); | |
| } | |
| function renderEventsTable() { | |
| const tbody = document.getElementById('notificationsTableBody'); | |
| if(!tbody) return; | |
| if(eventsList.length === 0) { tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;">Aucun événement</td></tr>'; return; } | |
| tbody.innerHTML = eventsList.map(event => `<tr> | |
| <td>${event.date}</td><td>${event.type}</td><td><strong>${event.title}</strong></td><td>${event.message}</td> | |
| <td><span class="priority-${event.priority}">${event.priority}</span></td> | |
| <td><span class="status-badge ${event.status === 'accepted' ? 'status-accepted' : 'status-pending'}">${event.status === 'accepted' ? 'Accepté' : 'En attente'}</span></td> | |
| <td class="action-cell"><button class="action-icon-btn action-accept" onclick="executeAction(${event.id}, 'ACCEPT', 'Accepté')">✓ Accepter</button> | |
| <button class="action-icon-btn action-reject" onclick="executeAction(${event.id}, 'REJECT', 'Rejeté')">✗ Rejeter</button> | |
| <button class="action-icon-btn action-hold" onclick="executeAction(${event.id}, 'HOLD', 'En attente')">⏸ Attente</button> | |
| <button class="action-icon-btn action-help" onclick="executeAction(${event.id}, 'HELP', 'Aide demandée')">🆘 Aide</button></td> | |
| </tr>`).join(''); | |
| } | |
| function updateEventStats() { | |
| document.getElementById('totalEvents').innerText = eventsList.length; | |
| document.getElementById('pendingEvents').innerText = eventsList.filter(e => e.status === 'pending').length; | |
| document.getElementById('acceptedEvents').innerText = eventsList.filter(e => e.status === 'accepted').length; | |
| } | |
| let efficiencyChart = null; | |
| 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: ['#16a34a','#dc2626','#d97706'] }] }, options: { responsive: true } }); | |
| } | |
| function saveJournal() { if(document.getElementById('done')?.value) { let journal = JSON.parse(localStorage.getItem('journal') || '[]'); journal.unshift({ date: new Date().toLocaleString(), done: document.getElementById('done').value }); localStorage.setItem('journal', JSON.stringify(journal)); showToast("Journal sauvegardé"); document.getElementById('done').value = ''; } } | |
| function saveProfile() { localStorage.setItem('profile', JSON.stringify(profile)); showToast("Profil sauvegardé"); } | |
| function completeProfile() { saveProfile(); showToast("Profil finalisé"); } | |
| 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') { const ctx = document.getElementById('progressChart')?.getContext('2d'); if(ctx && !window.dashChart) window.dashChart = new Chart(ctx, { type:'line', data:{ labels:['Sem1','Sem2','Sem3','Sem4'], datasets:[{ label:'Progression', data:[30,45,60,75], borderColor:'#2563eb' }] } }); } | |
| if(tabId === 'planner' && currentSessions.length === 0) generateDefaultPlanning(); | |
| if(tabId === 'notifications') { renderEventsTable(); updateEventStats(); if(efficiencyChart) efficiencyChart.data.datasets[0].data = [eventsList.filter(e=>e.status==='accepted').length, eventsList.filter(e=>e.status==='rejected').length, eventsList.filter(e=>e.status==='pending').length]; efficiencyChart?.update(); } | |
| } | |
| 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.getElementById('dashboardStats') && (document.getElementById('dashboardStats').innerHTML = `<div class="stat-card"><div class="stat-value">12</div><div class="stat-label">Sessions</div></div><div class="stat-card"><div class="stat-value">85%</div><div class="stat-label">Complétion</div></div>`); | |
| </script> | |
| </body> | |
| </html> |