Spaces:

OUAREDAEK
/

PerseverAI

Sleeping

App Files Files Community

OUAREDAEK commited on Apr 15

Commit

8c9a3ad

verified ·

1 Parent(s): 78af178

Upload templates/index-old2.html with huggingface_hub

Browse files

Files changed (1) hide show

templates/index-old2.html +1018 -0

templates/index-old2.html ADDED Viewed

	@@ -0,0 +1,1018 @@

+<!DOCTYPE html>
+<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; }
+        .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; }
+        /* Spaced Repetition Curve */
+        .spaced-repetition-container {
+            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+            border-radius: 16px;
+            padding: 20px;
+            margin-top: 20px;
+        }
+        .curve-legend {
+            display: flex;
+            justify-content: center;
+            gap: 24px;
+            margin-bottom: 16px;
+            font-size: 0.75rem;
+        }
+        .legend-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .legend-color {
+            width: 20px;
+            height: 3px;
+            border-radius: 2px;
+        }
+        .legend-color.square {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+        }
+        @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; }
+        .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); }
+        /* Profile specific styles */
+        .profile-progress {
+            background: var(--gray-100);
+            border-radius: 12px;
+            padding: 16px;
+            margin-bottom: 24px;
+        }
+        .progress-bar-container {
+            background: var(--gray-200);
+            border-radius: 20px;
+            height: 10px;
+            margin: 12px 0;
+            overflow: hidden;
+        }
+        .progress-bar-fill {
+            background: var(--primary);
+            width: 0%;
+            height: 100%;
+            border-radius: 20px;
+            transition: width 0.3s ease;
+        }
+        .big5-rating {
+            display: flex;
+            gap: 8px;
+            margin-top: 8px;
+            flex-wrap: wrap;
+        }
+        .rating-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 40px;
+            border: 1px solid var(--gray-200);
+            background: white;
+            cursor: pointer;
+            font-weight: 600;
+            transition: all 0.2s;
+        }
+        .rating-btn:hover { background: var(--gray-100); }
+        .rating-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
+        .motivation-rating {
+            display: flex;
+            gap: 8px;
+            margin-top: 8px;
+            flex-wrap: wrap;
+        }
+        .profile-recommendations {
+            background: #fefce8;
+            border-left: 4px solid var(--warning);
+            padding: 16px;
+            border-radius: 12px;
+            margin-top: 20px;
+        }
+        .profile-summary-cards {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 16px;
+            margin-bottom: 24px;
+        }
+        .profile-mini-card {
+            background: var(--gray-50);
+            border-radius: 12px;
+            padding: 16px;
+            text-align: center;
+        }
+        .profile-mini-card h4 { font-size: 0.75rem; color: var(--gray-600); margin-bottom: 8px; }
+        .profile-mini-card .value { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
+        .flex-between { display: flex; justify-content: space-between; align-items: center; }
+    </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>
+    <!-- NOUVEAU PROFIL PERSONNALISÉ COMPLET -->
+    <section id="profile" class="tab-content">
+        <div class="card">
+            <div class="card-header">
+                <h3>Profil d'Apprentissage Personnalisé</h3>
+                <div>
+                    <button class="btn btn-secondary" onclick="autoFillProfile()">Remplir automatiquement</button>
+                    <button class="btn btn-secondary" onclick="saveProfileData()">Sauvegarder</button>
+                </div>
+            </div>
+            <!-- Barre de progression -->
+            <div class="profile-progress">
+                <div class="flex-between">
+                    <span><strong>Complétion du Profil</strong></span>
+                    <span id="profileCompletionPercent">40%</span>
+                </div>
+                <div class="progress-bar-container">
+                    <div class="progress-bar-fill" id="profileProgressFill" style="width: 40%;"></div>
+                </div>
+                <div class="flex-between" style="margin-top: 8px;">
+                    <span>Questionnaires complétés: <span id="completedCount">2</span>/5</span>
+                    <span>Profil personnalisé: <span id="profileLevel">Intermédiaire</span></span>
+                </div>
+            </div>
+            <!-- Section Big Five -->
+            <div class="card" style="margin-bottom: 20px; padding: 20px;">
+                <h4 style="margin-bottom: 16px;">Profil de Personnalité (Big Five Traits)</h4>
+                <p style="font-size: 0.8rem; color: var(--gray-600); margin-bottom: 20px;">Évaluez vos traits de personnalité sur une échelle de 1 à 5</p>
+                <div class="form-group">
+                    <label class="form-label">Je suis quelqu'un de sociable, extraverti, énergique</label>
+                    <div class="big5-rating" data-trait="extraversion">
+                        <button type="button" class="rating-btn" data-value="1">1</button>
+                        <button type="button" class="rating-btn" data-value="2">2</button>
+                        <button type="button" class="rating-btn" data-value="3">3</button>
+                        <button type="button" class="rating-btn" data-value="4">4</button>
+                        <button type="button" class="rating-btn" data-value="5">5</button>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">Je fais preuve de curiosité intellectuelle, j'aime les nouvelles expériences</label>
+                    <div class="big5-rating" data-trait="openness">
+                        <button type="button" class="rating-btn" data-value="1">1</button>
+                        <button type="button" class="rating-btn" data-value="2">2</button>
+                        <button type="button" class="rating-btn" data-value="3">3</button>
+                        <button type="button" class="rating-btn" data-value="4">4</button>
+                        <button type="button" class="rating-btn" data-value="5">5</button>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">Je suis organisé, fiable, je respecte mes engagements</label>
+                    <div class="big5-rating" data-trait="conscientiousness">
+                        <button type="button" class="rating-btn" data-value="1">1</button>
+                        <button type="button" class="rating-btn" data-value="2">2</button>
+                        <button type="button" class="rating-btn" data-value="3">3</button>
+                        <button type="button" class="rating-btn" data-value="4">4</button>
+                        <button type="button" class="rating-btn" data-value="5">5</button>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">Je suis coopératif, serviable, empathique</label>
+                    <div class="big5-rating" data-trait="agreeableness">
+                        <button type="button" class="rating-btn" data-value="1">1</button>
+                        <button type="button" class="rating-btn" data-value="2">2</button>
+                        <button type="button" class="rating-btn" data-value="3">3</button>
+                        <button type="button" class="rating-btn" data-value="4">4</button>
+                        <button type="button" class="rating-btn" data-value="5">5</button>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">Je ressens facilement de l'anxiété, du stress, de la nervosité</label>
+                    <div class="big5-rating" data-trait="neuroticism">
+                        <button type="button" class="rating-btn" data-value="1">1</button>
+                        <button type="button" class="rating-btn" data-value="2">2</button>
+                        <button type="button" class="rating-btn" data-value="3">3</button>
+                        <button type="button" class="rating-btn" data-value="4">4</button>
+                        <button type="button" class="rating-btn" data-value="5">5</button>
+                    </div>
+                </div>
+                <div style="margin-top: 16px; font-size: 0.8rem; color: var(--gray-600); background: var(--gray-50); padding: 12px; border-radius: 8px;">
+                    Section complétée - Score neuroticisme: <span id="neuroticismScore">4.0</span> (qualité du sommeil importante)
+                </div>
+            </div>
+            <!-- Section Motivation -->
+            <div class="card" style="margin-bottom: 20px; padding: 20px;">
+                <h4 style="margin-bottom: 16px;">Profil Motivationnel</h4>
+                <p style="font-size: 0.8rem; color: var(--gray-600); margin-bottom: 20px;">Pourquoi étudiez-vous ? Sélectionnez vos principales motivations</p>
+                <div class="form-group">
+                    <label class="form-label">J'étudie parce que j'aime apprendre, je trouve cela intéressant et plaisant</label>
+                    <div class="motivation-rating" data-motivation="intrinsic">
+                        <button type="button" class="rating-btn" data-value="1">1</button>
+                        <button type="button" class="rating-btn" data-value="2">2</button>
+                        <button type="button" class="rating-btn" data-value="3">3</button>
+                        <button type="button" class="rating-btn" data-value="4">4</button>
+                        <button type="button" class="rating-btn" data-value="5">5</button>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">J'étudie pour obtenir de bonnes notes et faire plaisir à mes parents/professeurs</label>
+                    <div class="motivation-rating" data-motivation="introjected">
+                        <button type="button" class="rating-btn" data-value="1">1</button>
+                        <button type="button" class="rating-btn" data-value="2">2</button>
+                        <button type="button" class="rating-btn" data-value="3">3</button>
+                        <button type="button" class="rating-btn" data-value="4">4</button>
+                        <button type="button" class="rating-btn" data-value="5">5</button>
+                    </div>
+                </div>
+                <div style="margin-top: 16px; font-size: 0.8rem; color: var(--gray-600); background: var(--gray-50); padding: 12px; border-radius: 8px;">
+                    Section complétée - Motivation introjectée: <span id="introjectedScore">4.0</span> (pression interne modérée)
+                </div>
+            </div>
+            <!-- Résumé des scores -->
+            <div class="profile-summary-cards">
+                <div class="profile-mini-card"><h4>Big Five Traits</h4><div class="value" id="summaryExtraversion">3.0</div><div>Extraversion</div></div>
+                <div class="profile-mini-card"><div class="value" id="summaryOpenness">3.0</div><div>Ouverture</div></div>
+                <div class="profile-mini-card"><div class="value" id="summaryConscientiousness">4.0</div><div>Conscience</div></div>
+                <div class="profile-mini-card"><h4>Motivation</h4><div class="value" id="summaryIntrinsic">3.0</div><div>Intrinsèque</div></div>
+                <div class="profile-mini-card"><div class="value" id="summaryIntrojected">4.0</div><div>Introjectée</div></div>
+            </div>
+            <!-- Recommandations personnalisées -->
+            <div class="profile-recommendations">
+                <h4 style="margin-bottom: 12px;"><i class="fas fa-lightbulb"></i> Recommandations Personnalisées Basées sur Votre Profil</h4>
+                <div id="recommendationsContainer">
+                    <p>💤 <strong>Qualité du sommeil:</strong> Avec un névrosisme modéré, il est important de maintenir 7-8 heures de sommeil de qualité.</p>
+                    <p>📅 <strong>Planification:</strong> Votre conscience est bonne. Établissez un planning régulier mais évitez le surmenage.</p>
+                </div>
+            </div>
+            <button class="btn btn-primary btn-large" onclick="finalizeProfile()" style="width:100%; margin-top: 20px;">
+                <i class="fas fa-check-circle"></i> Finaliser et Générer le Profil Personnalisé
+            </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>
+    <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 style="margin-bottom: 16px;"><i class="fas fa-chart-line"></i> Courbe de Répétition Espacée (SM-2 Algorithm)</h4><div class="curve-legend"><div class="legend-item"><div class="legend-color" style="background: #2563eb; width: 30px; height: 3px;"></div><span>Seuil de rétention (Forgetting Curve)</span></div><div class="legend-item"><div class="legend-color square" style="background: #ef4444;"></div><span>Sessions de révision</span></div><div class="legend-item"><div class="legend-color" style="background: #10b981; width: 30px; height: 3px;"></div><span>Intervalle optimal SM-2</span></div></div><div style="position: relative;"><canvas id="spacedRepetitionCurve" width="100%" height="220" style="max-height: 220px; width: 100%;"></canvas></div><div style="display: flex; justify-content: space-between; margin-top: 12px; font-size: 0.7rem; color: var(--gray-600);" id="intervalDatesCurve"></div><p style="font-size: 0.7rem; color: var(--gray-500); margin-top: 16px; text-align: center; font-style: italic;"><i class="fas fa-lightbulb"></i> La courbe montre l'évolution théorique de la rétention. Chaque révision au moment optimal (juste avant l'oubli) renforce la mémoire et augmente l'intervalle suivant.</p></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>
+    // Données compétences
+    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 currentSessions = [];
+    let spacedChart = null;
+    // Profil data
+    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" }
+    ];
+    document.addEventListener('DOMContentLoaded', () => {
+        initCompetencesSelect();
+        loadSavedData();
+        renderEventsTable();
+        updateEventStats();
+        createChart();
+        initProfileModule();
+        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];
+        });
+        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('');
+    }
+    // ==================== MODULE PROFIL COMPLET ====================
+    function initProfileModule() {
+        loadProfileFromStorage();
+        setupRatingListeners();
+        updateProfileUI();
+    }
+    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');
+        });
+    }
+    function updateProfileUI() {
+        // Mettre à jour les affichages
+        document.getElementById('summaryExtraversion').innerText = profileData.extraversion;
+        document.getElementById('summaryOpenness').innerText = profileData.openness;
+        document.getElementById('summaryConscientiousness').innerText = profileData.conscientiousness;
+        document.getElementById('summaryIntrinsic').innerText = profileData.intrinsic;
+        document.getElementById('summaryIntrojected').innerText = profileData.introjected;
+        document.getElementById('neuroticismScore').innerText = profileData.neuroticism;
+        document.getElementById('introjectedScore').innerText = profileData.introjected;
+        // Calcul du pourcentage de complétion (5 traits + 2 motivations = 7 champs)
+        let completed = 0;
+        if(profileData.extraversion) completed++;
+        if(profileData.openness) completed++;
+        if(profileData.conscientiousness) completed++;
+        if(profileData.agreeableness) completed++;
+        if(profileData.neuroticism) completed++;
+        if(profileData.intrinsic) completed++;
+        if(profileData.introjected) completed++;
+        const percent = Math.round((completed / 7) * 100);
+        document.getElementById('profileCompletionPercent').innerText = percent + '%';
+        document.getElementById('profileProgressFill').style.width = percent + '%';
+        document.getElementById('completedCount').innerText = Math.min(completed, 5);
+        let level = "Débutant";
+        if(profileData.conscientiousness >= 4 && profileData.intrinsic >= 4) level = "Avancé";
+        else if(profileData.conscientiousness >= 3) level = "Intermédiaire";
+        document.getElementById('profileLevel').innerText = level;
+        // Recommandations dynamiques
+        const recos = [];
+        if(profileData.neuroticism >= 4) recos.push("💤 <strong>Qualité du sommeil:</strong> Votre niveau de névrosisme est élevé. Accordez une attention particulière à votre sommeil (7-8h) et à des pauses régulières.");
+        else if(profileData.neuroticism >= 3) recos.push("💤 <strong>Qualité du sommeil:</strong> Avec un névrosisme modéré, il est important de maintenir 7-8 heures de sommeil de qualité.");
+        else recos.push("💤 <strong>Qualité du sommeil:</strong> Votre stabilité émotionnelle est bonne. Continuez à maintenir un bon rythme de sommeil.");
+        if(profileData.conscientiousness >= 4) recos.push("📅 <strong>Planification:</strong> Votre conscience est excellente. Établissez un planning régulier mais évitez le surmenage.");
+        else if(profileData.conscientiousness >= 3) recos.push("📅 <strong>Planification:</strong> Renforcez votre organisation avec des rappels et un agenda structuré.");
+        else recos.push("📅 <strong>Planification:</strong> Travaillez la régularité avec des petits objectifs quotidiens.");
+        if(profileData.intrinsic >= 4) recos.push("🎯 <strong>Motivation intrinsèque:</strong> Parfait ! Continuez à suivre vos passions et à explorer.");
+        else if(profileData.intrinsic <= 2) recos.push("🎯 <strong>Motivation intrinsèque:</strong> Essayez de trouver un sens plus profond à vos études pour renforcer votre engagement.");
+        document.getElementById('recommendationsContainer').innerHTML = recos.map(r => `<p>${r}</p>`).join('');
+    }
+    function autoFillProfile() {
+        profileData = { extraversion: 4, openness: 4, conscientiousness: 5, agreeableness: 4, neuroticism: 2, intrinsic: 5, introjected: 3 };
+        document.querySelectorAll('.big5-rating').forEach(container => {
+            const trait = container.dataset.trait;
+            if(profileData[trait]) updateRatingUI(container, profileData[trait]);
+        });
+        document.querySelectorAll('.motivation-rating').forEach(container => {
+            const motiv = container.dataset.motivation;
+            if(profileData[motiv]) updateRatingUI(container, profileData[motiv]);
+        });
+        updateProfileUI();
+        saveProfileToStorage();
+        showToast("Profil automatiquement rempli !");
+    }
+    function saveProfileData() {
+        saveProfileToStorage();
+        showToast("Profil sauvegardé !");
+    }
+    function finalizeProfile() {
+        saveProfileToStorage();
+        showToast("Profil finalisé et personnalisé !");
+    }
+    function saveProfileToStorage() {
+        localStorage.setItem('perseverAI_profile', JSON.stringify(profileData));
+    }
+    function loadProfileFromStorage() {
+        const saved = localStorage.getItem('perseverAI_profile');
+        if(saved) {
+            try {
+                const data = JSON.parse(saved);
+                Object.assign(profileData, data);
+            } catch(e) {}
+        }
+        document.querySelectorAll('.big5-rating').forEach(container => {
+            const trait = container.dataset.trait;
+            if(profileData[trait]) updateRatingUI(container, profileData[trait]);
+        });
+        document.querySelectorAll('.motivation-rating').forEach(container => {
+            const motiv = container.dataset.motivation;
+            if(profileData[motiv]) updateRatingUI(container, profileData[motiv]);
+        });
+        updateProfileUI();
+    }
+    // ==================== FIN PROFIL ====================
+    function retentionRate(days, strength = 0.5) { return Math.exp(-days / (strength * 30)) * 100; }
+    function drawSpacedRepetitionCurve(sessions) {
+        const canvas = document.getElementById('spacedRepetitionCurve');
+        if(!canvas || sessions.length === 0) return;
+        const ctx = canvas.getContext('2d');
+        const container = canvas.parentElement;
+        const width = container.clientWidth - 40;
+        const height = 200;
+        canvas.width = width;
+        canvas.height = height;
+        ctx.clearRect(0, 0, width, height);
+        const startDate = sessions[0].date.getTime();
+        const endDate = sessions[sessions.length-1].date.getTime();
+        const totalDays = (endDate - startDate) / (1000 * 60 * 60 * 24);
+        ctx.beginPath();
+        ctx.strokeStyle = '#2563eb';
+        ctx.lineWidth = 2.5;
+        ctx.setLineDash([]);
+        let firstPoint = true;
+        for(let x = 0; x <= width; x++) {
+            const dayProgression = (x / width) * totalDays;
+            const retention = retentionRate(dayProgression, 0.4);
+            const y = height - (retention / 100) * height;
+            if(firstPoint) { ctx.moveTo(x, y); firstPoint = false; }
+            else { ctx.lineTo(x, y); }
+        }
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(0, height);
+        for(let x = 0; x <= width; x++) {
+            const dayProgression = (x / width) * totalDays;
+            const retention = retentionRate(dayProgression, 0.4);
+            const y = height - (retention / 100) * height;
+            ctx.lineTo(x, y);
+        }
+        ctx.lineTo(width, height);
+        ctx.fillStyle = 'rgba(37, 99, 235, 0.05)';
+        ctx.fill();
+        ctx.beginPath();
+        ctx.strokeStyle = '#10b981';
+        ctx.lineWidth = 1.5;
+        ctx.setLineDash([8, 6]);
+        for(let i = 0; i < sessions.length; i++) {
+            const x = ((sessions[i].date.getTime() - startDate) / (endDate - startDate)) * width;
+            if(x >= 0 && x <= width) {
+                ctx.beginPath();
+                ctx.moveTo(x, 0);
+                ctx.lineTo(x, height);
+                ctx.stroke();
+            }
+        }
+        ctx.setLineDash([]);
+        for(let i = 0; i < sessions.length; i++) {
+            const x = ((sessions[i].date.getTime() - startDate) / (endDate - startDate)) * width;
+            const dayProgression = ((sessions[i].date.getTime() - startDate) / (1000 * 60 * 60 * 24));
+            const retentionAtSession = retentionRate(dayProgression, 0.4);
+            const y = height - (retentionAtSession / 100) * height;
+            ctx.beginPath();
+            ctx.fillStyle = '#ef4444';
+            ctx.arc(x, y, 6, 0, 2 * Math.PI);
+            ctx.fill();
+            ctx.fillStyle = 'white';
+            ctx.beginPath();
+            ctx.arc(x, y, 3, 0, 2 * Math.PI);
+            ctx.fill();
+            ctx.fillStyle = '#1e293b';
+            ctx.font = 'bold 9px Inter';
+            ctx.fillText(`R${i+1}`, x-5, y-8);
+        }
+        const datesDiv = document.getElementById('intervalDatesCurve');
+        if(datesDiv) datesDiv.innerHTML = sessions.map(s => `<span>${s.dateStr}</span>`).join('');
+        ctx.fillStyle = '#64748b';
+        ctx.font = '8px Inter';
+        ctx.fillText('100%', 5, 15);
+        ctx.fillText('75%', 5, height - (height * 0.25) + 5);
+        ctx.fillText('50%', 5, height - (height * 0.5) + 5);
+        ctx.fillText('25%', 5, height - (height * 0.75) + 5);
+        ctx.fillText('0%', 5, height - 5);
+    }
+    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 timeSlot = document.querySelector('#timeSlotsGroup input:checked')?.value || "08:00-10:00";
+        const retention = document.getElementById('retentionQuality')?.value || "2";
+        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() + 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);
+        drawSpacedRepetitionCurve(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");
+        drawSpacedRepetitionCurve(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;">${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; }
+        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 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");
+    }
+    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;
+        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();
+    }
+    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 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') { if(currentSessions.length === 0) generateDefaultPlanning(); else drawSpacedRepetitionCurve(currentSessions); }
+        if(tabId === 'notifications') { renderEventsTable(); updateEventStats(); }
+        if(tabId === 'profile') { loadProfileFromStorage(); updateProfileUI(); }
+    }
+    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>`);
+    window.addEventListener('resize', () => { if(document.getElementById('planner').classList.contains('active') && currentSessions.length > 0) drawSpacedRepetitionCurve(currentSessions); });
+</script>
+</body>
+</html>