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: #1e1e1e; | |
| --primary-dark: #000000; | |
| --secondary: #3a3a3a; | |
| --success: #2e7d32; | |
| --warning: #b76e0e; | |
| --danger: #c62828; | |
| --info: #0d47a1; | |
| --purple: #4a148c; | |
| --gray-50: #fafafa; | |
| --gray-100: #f5f5f5; | |
| --gray-200: #e0e0e0; | |
| --gray-600: #616161; | |
| --gray-800: #212121; | |
| --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(0,0,0,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 { | |
| 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-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: #e0e0e0; color: #1e1e1e; } | |
| .type-consolidation { background: #d0d0d0; color: #1e1e1e; } | |
| .type-maintien { background: #c0c0c0; color: #1e1e1e; } | |
| .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: #e0e0e0; color: #424242; } | |
| .status-accepted { background: #c8e6c9; color: #1b5e20; } | |
| .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: #e8f0e8; color: #1e1e1e; } | |
| .action-reject { background: #fce4e4; color: #c62828; } | |
| .action-hold { background: #e3f2fd; color: #0d47a1; } | |
| .action-help { background: #fff3e0; color: #b76e0e; } | |
| .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); } | |
| .tab-content { display: none; } | |
| .tab-content.active { display: block; } | |
| .spaced-repetition-container { | |
| background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 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-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: #faf8e8; | |
| 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; } | |
| .dashboard-two-columns { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 24px; | |
| margin-bottom: 32px; | |
| } | |
| .heatmap-wrapper { | |
| flex: 1.2; | |
| min-width: 280px; | |
| } | |
| .radar-wrapper { | |
| flex: 1; | |
| min-width: 280px; | |
| background: white; | |
| border-radius: 20px; | |
| padding: 20px; | |
| border: 1px solid var(--gray-200); | |
| box-shadow: var(--shadow-sm); | |
| transition: box-shadow 0.2s ease; | |
| } | |
| .radar-wrapper:hover { | |
| box-shadow: var(--shadow-md); | |
| } | |
| .radar-title { | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| color: var(--gray-800); | |
| margin-bottom: 16px; | |
| padding-bottom: 8px; | |
| border-bottom: 1px solid #eef2f8; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .radar-container canvas { | |
| max-height: 300px; | |
| width: 100%; | |
| } | |
| .heatmap-container { | |
| background: white; | |
| border-radius: 20px; | |
| padding: 24px 20px; | |
| border: 1px solid var(--gray-200); | |
| box-shadow: var(--shadow-sm); | |
| transition: box-shadow 0.2s ease; | |
| } | |
| .heatmap-container:hover { | |
| box-shadow: var(--shadow-md); | |
| } | |
| .heatmap-title { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: baseline; | |
| flex-wrap: wrap; | |
| margin-bottom: 24px; | |
| padding-bottom: 8px; | |
| border-bottom: 1px solid #eef2f8; | |
| } | |
| .heatmap-title h4 { | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| color: var(--gray-800); | |
| letter-spacing: -0.2px; | |
| } | |
| .heatmap-sub { | |
| font-size: 0.7rem; | |
| color: var(--gray-500); | |
| background: #f8fafc; | |
| padding: 4px 10px; | |
| border-radius: 30px; | |
| } | |
| .heatmap-grid-wrapper { | |
| display: flex; | |
| justify-content: center; | |
| margin: 16px 0 10px 0; | |
| overflow-x: auto; | |
| } | |
| .heatmap-grid { | |
| display: grid; | |
| grid-template-columns: repeat(7, 1fr); | |
| gap: 8px; | |
| max-width: 700px; | |
| min-width: 280px; | |
| background: #ffffff; | |
| padding: 8px 4px; | |
| border-radius: 24px; | |
| } | |
| .heatmap-day-label { | |
| text-align: center; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| color: #5b6e8c; | |
| margin-bottom: 8px; | |
| letter-spacing: 0.3px; | |
| } | |
| .heatmap-cell { | |
| aspect-ratio: 1 / 1; | |
| border-radius: 10px; | |
| transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1); | |
| cursor: default; | |
| box-shadow: 0 1px 2px rgba(0,0,0,0.02); | |
| } | |
| .heatmap-cell:hover { | |
| transform: scale(1.04); | |
| filter: brightness(0.96); | |
| box-shadow: 0 4px 10px rgba(0,0,0,0.05); | |
| } | |
| .heatmap-cell.level-0 { background-color: #f5f5f5; } | |
| .heatmap-cell.level-1 { background-color: #d6d6d6; } | |
| .heatmap-cell.level-2 { background-color: #a0a0a0; } | |
| .heatmap-cell.level-3 { background-color: #6e6e6e; } | |
| .heatmap-cell.level-4 { background-color: #2c2c2c; } | |
| .legend-heatmap { | |
| display: flex; | |
| justify-content: center; | |
| gap: 24px; | |
| margin-top: 20px; | |
| flex-wrap: wrap; | |
| background: #fafcff; | |
| padding: 12px 20px; | |
| border-radius: 60px; | |
| width: fit-content; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .legend-heatmap-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 0.7rem; | |
| font-weight: 500; | |
| color: var(--gray-700); | |
| } | |
| .legend-color-box { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 8px; | |
| transition: transform 0.1s; | |
| } | |
| .legend-color-box.level-0 { background-color: #f5f5f5; border: 1px solid #e0e0e0; } | |
| .legend-color-box.level-1 { background-color: #d6d6d6; } | |
| .legend-color-box.level-2 { background-color: #a0a0a0; } | |
| .legend-color-box.level-3 { background-color: #6e6e6e; } | |
| .legend-color-box.level-4 { background-color: #2c2c2c; } | |
| .symmetry-curve-card { | |
| background: white; | |
| border-radius: 20px; | |
| padding: 18px 20px; | |
| margin-bottom: 28px; | |
| border: 1px solid var(--gray-200); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .curve-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: baseline; | |
| flex-wrap: wrap; | |
| margin-bottom: 20px; | |
| } | |
| .curve-header h4 { | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| color: var(--gray-800); | |
| } | |
| .curve-legend-mini { | |
| display: flex; | |
| gap: 20px; | |
| font-size: 0.7rem; | |
| } | |
| .symmetry-canvas { | |
| max-height: 210px; | |
| width: 100%; | |
| background: #ffffff; | |
| border-radius: 16px; | |
| } | |
| .indicator-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 0; | |
| } | |
| .indicator-card { | |
| background: white; | |
| border-radius: 20px; | |
| padding: 20px 18px; | |
| border: 1px solid var(--gray-200); | |
| transition: box-shadow 0.2s; | |
| box-shadow: var(--shadow-sm); | |
| text-align: center; | |
| } | |
| .indicator-card:hover { | |
| box-shadow: var(--shadow-md); | |
| } | |
| .indicator-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 16px; | |
| justify-content: center; | |
| } | |
| .indicator-icon { | |
| font-size: 1.6rem; | |
| color: var(--primary); | |
| background: #f0f0f0; | |
| width: 44px; | |
| height: 44px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 44px; | |
| } | |
| .indicator-title { | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| color: var(--gray-800); | |
| letter-spacing: -0.2px; | |
| } | |
| .circular-progress { | |
| position: relative; | |
| width: 140px; | |
| height: 140px; | |
| margin: 0 auto 15px; | |
| } | |
| .circular-progress svg { | |
| width: 140px; | |
| height: 140px; | |
| transform: rotate(-90deg); | |
| } | |
| .circular-progress circle { | |
| fill: none; | |
| stroke-width: 10; | |
| stroke-linecap: round; | |
| } | |
| .circular-progress .bg-circle { | |
| stroke: var(--gray-200); | |
| } | |
| .circular-progress .progress-circle { | |
| stroke: var(--primary); | |
| stroke-dasharray: 377; | |
| stroke-dashoffset: 377; | |
| transition: stroke-dashoffset 0.8s ease; | |
| } | |
| .circular-progress .progress-percent { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: var(--gray-800); | |
| } | |
| .circular-progress .progress-label { | |
| position: absolute; | |
| bottom: -5px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-size: 0.7rem; | |
| color: var(--gray-600); | |
| white-space: nowrap; | |
| } | |
| .indicator-value { | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| color: var(--gray-700); | |
| margin-top: 8px; | |
| } | |
| .indicator-sub { | |
| font-size: 0.75rem; | |
| color: var(--gray-600); | |
| border-top: 1px solid var(--gray-100); | |
| margin-top: 12px; | |
| padding-top: 12px; | |
| } | |
| .effort-badge-modern { | |
| display: inline-block; | |
| background: #f1f5f9; | |
| padding: 6px 14px; | |
| border-radius: 40px; | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| color: #1e293b; | |
| } | |
| .persistence-tag { | |
| background: #e0e0e0; | |
| color: #1e1e1e; | |
| padding: 4px 12px; | |
| border-radius: 40px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| display: inline-block; | |
| } | |
| .dashboard-view-toggle { | |
| display: flex; | |
| gap: 12px; | |
| margin-bottom: 24px; | |
| } | |
| .view-btn { | |
| padding: 8px 18px; | |
| border-radius: 40px; | |
| background: white; | |
| border: 1px solid var(--gray-200); | |
| cursor: pointer; | |
| font-weight: 500; | |
| } | |
| .view-btn.active { | |
| background: var(--primary); | |
| color: white; | |
| border-color: var(--primary); | |
| } | |
| .journal-section { | |
| background: var(--gray-50); | |
| border-radius: 12px; | |
| padding: 18px; | |
| margin-bottom: 24px; | |
| border: 1px solid var(--gray-200); | |
| } | |
| .journal-section h4 { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| margin-bottom: 12px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| color: var(--gray-800); | |
| } | |
| .journal-section textarea { | |
| width: 100%; | |
| border: 1px solid var(--gray-200); | |
| border-radius: 10px; | |
| padding: 12px; | |
| font-family: inherit; | |
| font-size: 0.85rem; | |
| resize: vertical; | |
| background: white; | |
| } | |
| .self-rating-group { | |
| display: flex; | |
| gap: 12px; | |
| align-items: center; | |
| margin-top: 12px; | |
| flex-wrap: wrap; | |
| } | |
| .self-rating-group span { | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| color: var(--gray-700); | |
| } | |
| .rating-stars { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .star-btn { | |
| background: white; | |
| border: 1px solid var(--gray-200); | |
| width: 42px; | |
| padding: 8px 0; | |
| border-radius: 40px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: all 0.2s; | |
| text-align: center; | |
| } | |
| .star-btn.active { | |
| background: var(--primary); | |
| color: white; | |
| border-color: var(--primary); | |
| } | |
| .journal-entries-list { | |
| margin-top: 24px; | |
| border-top: 1px solid var(--gray-200); | |
| padding-top: 20px; | |
| } | |
| .journal-entry-item { | |
| background: white; | |
| border-radius: 12px; | |
| padding: 14px; | |
| margin-bottom: 12px; | |
| border: 1px solid var(--gray-200); | |
| } | |
| .journal-entry-date { | |
| font-size: 0.7rem; | |
| color: var(--gray-500); | |
| margin-bottom: 8px; | |
| } | |
| .journal-entry-content { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| margin-top: 6px; | |
| } | |
| .journal-badge { | |
| background: var(--gray-100); | |
| padding: 2px 10px; | |
| border-radius: 20px; | |
| font-size: 0.7rem; | |
| } | |
| .date-selector { | |
| margin-bottom: 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| flex-wrap: wrap; | |
| } | |
| .date-selector label { | |
| font-weight: 500; | |
| color: var(--gray-700); | |
| } | |
| .journal-actions { | |
| display: flex; | |
| gap: 12px; | |
| justify-content: flex-end; | |
| margin-top: 10px; | |
| } | |
| .ia-reflective-message { | |
| background: linear-gradient(135deg, #f8f9fa 0%, #eef2f5 100%); | |
| border-left: 5px solid var(--primary); | |
| border-radius: 16px; | |
| padding: 22px 28px; | |
| margin-bottom: 28px; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .ia-reflective-message:hover { | |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); | |
| transform: translateY(-2px); | |
| } | |
| .ia-message-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 16px; | |
| } | |
| .ia-avatar { | |
| background: var(--primary); | |
| width: 44px; | |
| height: 44px; | |
| border-radius: 44px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 1.3rem; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
| } | |
| .ia-title { | |
| font-weight: 700; | |
| font-size: 1rem; | |
| color: var(--primary-dark); | |
| letter-spacing: -0.2px; | |
| } | |
| .ia-badge { | |
| background: rgba(30,30,30,0.08); | |
| padding: 4px 12px; | |
| border-radius: 40px; | |
| font-size: 0.7rem; | |
| font-weight: 500; | |
| color: var(--gray-600); | |
| } | |
| .ia-message-content { | |
| font-size: 0.95rem; | |
| line-height: 1.6; | |
| color: var(--gray-800); | |
| margin-bottom: 16px; | |
| } | |
| .ia-message-content strong { | |
| color: var(--primary); | |
| font-weight: 700; | |
| } | |
| .ia-stat-highlight { | |
| display: inline-block; | |
| background: white; | |
| padding: 2px 8px; | |
| border-radius: 20px; | |
| font-weight: 700; | |
| color: var(--primary); | |
| margin: 0 2px; | |
| box-shadow: 0 1px 2px rgba(0,0,0,0.05); | |
| } | |
| .ia-footer { | |
| display: flex; | |
| justify-content: flex-end; | |
| align-items: center; | |
| gap: 16px; | |
| margin-top: 12px; | |
| padding-top: 12px; | |
| border-top: 1px solid rgba(0,0,0,0.05); | |
| font-size: 0.7rem; | |
| color: var(--gray-500); | |
| } | |
| .ia-footer i { | |
| font-size: 0.75rem; | |
| } | |
| @media (max-width: 640px) { | |
| .ia-reflective-message { padding: 16px 20px; } | |
| .ia-message-content { font-size: 0.85rem; } | |
| } | |
| /* Styles élégants et professionnels pour les lecteurs audio (réduction auteurs) */ | |
| .audio-modern-card { | |
| background: #ffffff; | |
| border-radius: 20px; | |
| padding: 12px 16px; | |
| margin-top: 20px; | |
| border: 1px solid #eaedf2; | |
| transition: all 0.2s ease; | |
| box-shadow: 0 1px 2px rgba(0,0,0,0.02); | |
| } | |
| .audio-modern-card:hover { | |
| border-color: #d0d5dd; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.03); | |
| } | |
| .audio-modern-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 12px; | |
| } | |
| .audio-modern-header i { | |
| font-size: 0.9rem; | |
| color: #3a3a3a; | |
| background: #f5f7fa; | |
| width: 30px; | |
| height: 30px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 30px; | |
| } | |
| .audio-modern-header span { | |
| font-weight: 500; | |
| font-size: 0.75rem; | |
| color: #2c3e50; | |
| letter-spacing: -0.1px; | |
| } | |
| .audio-modern-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| } | |
| .audio-play-btn-mini { | |
| background: #1e1e1e; | |
| border: none; | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 36px; | |
| color: white; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.8rem; | |
| } | |
| .audio-play-btn-mini:hover { | |
| background: #000000; | |
| transform: scale(0.98); | |
| } | |
| .audio-progress-modern { | |
| flex: 1; | |
| min-width: 140px; | |
| } | |
| .audio-progress-bar-modern { | |
| width: 100%; | |
| height: 4px; | |
| background: #e2e8f0; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .audio-progress-fill-modern { | |
| width: 0%; | |
| height: 100%; | |
| background: #1e1e1e; | |
| border-radius: 10px; | |
| transition: width 0.1s linear; | |
| } | |
| .audio-time-modern { | |
| font-size: 0.65rem; | |
| color: #5b6e8c; | |
| font-family: monospace; | |
| min-width: 70px; | |
| } | |
| .audio-volume-mini { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .audio-volume-mini i { | |
| font-size: 0.7rem; | |
| color: #5b6e8c; | |
| cursor: pointer; | |
| } | |
| .volume-slider-mini { | |
| width: 60px; | |
| height: 3px; | |
| -webkit-appearance: none; | |
| background: #e2e8f0; | |
| border-radius: 3px; | |
| } | |
| .volume-slider-mini::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: #1e1e1e; | |
| cursor: pointer; | |
| } | |
| .audio-credit-micro { | |
| text-align: right; | |
| font-size: 0.55rem; | |
| color: #94a3b8; | |
| margin-top: 6px; | |
| letter-spacing: 0.2px; | |
| border-top: none; | |
| padding-top: 2px; | |
| opacity: 0.6; | |
| } | |
| .audio-credit-micro i { | |
| font-size: 0.5rem; | |
| margin-right: 2px; | |
| } | |
| @media (max-width: 640px) { | |
| .audio-modern-controls { flex-direction: column; align-items: stretch; } | |
| .audio-progress-modern { width: 100%; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header class="header"> | |
| <h1>SmartEffort-SRL</h1> | |
| <p>Compagnon SRL – Apprendre à manager l'effort et maintenir la persistance</p> | |
| <div class="badge">SmartEffort-SRL: AI · Aid · Effort Management · Perseverance</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" onclick="showTab('notifications')">Notifications IA</button> | |
| </nav> | |
| <!-- PROFIL --> | |
| <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> | |
| <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"><span>Questionnaires complétés: <span id="completedCount">2</span>/5</span><span>Profil personnalisé: <span id="profileLevel">Intermédiaire</span></span></div></div> | |
| <div class="card" style="margin-bottom:20px;padding:20px;"><h4 style="margin-bottom:16px;">Profil de Personnalité </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;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> | |
| <div class="card" style="margin-bottom:20px;padding:20px;"><h4 style="margin-bottom:16px;">Profil Motivationnel</h4><p style="font-size:0.8rem;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;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> | |
| <!-- Nouvelle section : Importance des raisons d'étudier (multi-choix) --> | |
| <div class="card" style="margin-bottom:20px;padding:20px;"> | |
| <h4 style="margin-bottom:16px;">Importance des raisons dans votre décision d’étudier</h4> | |
| <p style="font-size:0.8rem;color:var(--gray-600);margin-bottom:20px;">(1 = Pas du tout important ; 5 = Très important)</p> | |
| <div class="form-group"><label class="form-label">Obtenir une éducation</label><div class="big5-rating" data-trait="reason_education"><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">Acquérir davantage de diplômes</label><div class="big5-rating" data-trait="reason_degrees"><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">Gagner plus d’argent</label><div class="big5-rating" data-trait="reason_money"><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">Prouver que quelqu’un a tort</label><div class="big5-rating" data-trait="reason_prove_wrong"><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">Se prouver à soi-même que l’on a tort</label><div class="big5-rating" data-trait="reason_self_prove"><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">Devenir indépendant</label><div class="big5-rating" data-trait="reason_independent"><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;background:var(--gray-50);padding:12px;border-radius:8px;">Section complétée - Ces raisons influencent votre engagement et votre persévérance.</div> | |
| </div> | |
| <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> | |
| <div class="profile-recommendations" style="background: transparent; border-left: none;"><h4>Recommandations Personnalisées</h4><div id="recommendationsContainer"><p>Qualité du sommeil: Maintenez 7-8 heures de sommeil de qualité.</p><p>Planification: Renforcez votre organisation avec des rappels.</p></div></div> | |
| <button class="btn btn-primary btn-large" onclick="finalizeProfile()" style="width:100%;"><i class="fas fa-check-circle"></i> Finaliser et Générer le Profil Personnalisé</button> | |
| </div> | |
| </section> | |
| <!-- OBJECTIF --> | |
| <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 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 --> | |
| <section id="planner" class="tab-content"><div class="card"><div class="card-header"><h3><i class="fas fa-calendar-alt"></i> Planner Personnalisé</h3><button class="export-btn" onclick="exportPlanning()"><i class="fas fa-download"></i> Exporter</button></div><div class="planning-stats" id="planningStats"><div class="planning-stat-item"><div class="planning-stat-number" id="statSessions">6</div><div class="planning-stat-label">Sessions Planifiées</div></div><div class="planning-stat-item"><div class="planning-stat-number" id="statTotalDays">270</div><div class="planning-stat-label">Jours Totaux</div></div><div class="planning-stat-item"><div class="planning-stat-number" id="statQuality">3/4</div><div class="planning-stat-label">Niveau de Qualité</div></div><div class="planning-stat-item"><div class="planning-stat-number" id="statDuration">20min</div><div class="planning-stat-label">Durée/Session</div></div></div><div style="overflow-x:auto;"><table class="planning-sessions-table" id="sessionsTable"><thead><tr><th>Date</th><th>Session</th><th>Compétence</th><th>Durée</th><th>Intervalle</th><th>Type</th><th>Stratégie</th><th>Productivité</th><th>Heure Optimale</th></tr></thead><tbody id="sessionsTableBody"></tbody></table></div><div class="spaced-repetition-container"><h4><i class="fas fa-chart-line"></i> Courbe de Répétition Espacée</h4><div class="curve-legend"><div class="legend-item"><div class="legend-color" style="background:#1e1e1e;"></div><span>Seuil de rétention</span></div><div class="legend-item"><div class="legend-color square" style="background:#424242;"></div><span>Sessions</span></div></div><canvas id="spacedRepetitionCurve" width="100%" height="200" style="max-height:200px; width:100%;"></canvas><div id="intervalDatesCurve" style="font-size:0.7rem; text-align:center; margin-top:8px;"></div></div></div></section> | |
| <!-- DASHBOARD (version élégante avec audio credit réduit) --> | |
| <section id="dashboard" class="tab-content"> | |
| <div class="card"> | |
| <div class="card-header"><h3><i class="fas fa-chart-simple"></i> Analyse de la persistance et du management de l'effort (persévérance)</h3><div class="dashboard-view-toggle"><button class="view-btn active" data-view="combined" onclick="setDashboardView('combined')"> Vue d'ensemble</button></div></div> | |
| <div class="ia-reflective-message"> | |
| <div class="ia-message-header"> | |
| <div class="ia-avatar"><i class="fas fa-brain"></i></div> | |
| <div><div class="ia-title">Message Réflexif </div></div> | |
| </div> | |
| <div class="ia-message-content"> | |
| Ton engagement est très positif : tu démarres <strong class="ia-stat-highlight">85%</strong> des activités, interagis fortement avec les ressources (<strong class="ia-stat-highlight">80%</strong>) et termines <strong class="ia-stat-highlight">74%</strong> des tâches. Ta régularité de travail (<strong class="ia-stat-highlight">90%</strong>) et ta gestion des échéances (<strong class="ia-stat-highlight">84%</strong>) montrent une excellente persévérance. | |
| </div> | |
| </div> | |
| <div class="dashboard-two-columns"> | |
| <div class="heatmap-wrapper"> | |
| <div class="heatmap-container"> | |
| <div class="heatmap-title"><h4><i class="fas fa-fire" style="color:#f97316;"></i> Heatmap d'activité – 4 semaines</h4><span class="heatmap-sub">Intensité d'engagement quotidien</span></div> | |
| <div class="heatmap-grid-wrapper"><div class="heatmap-grid" id="heatmapGrid"></div></div> | |
| <div class="legend-heatmap" id="heatmapLegend"></div> | |
| </div> | |
| <!-- Lecteur audio Heatmap élégant et discret (crédit réduit) --> | |
| <div class="audio-modern-card" id="heatmapAudioCard"> | |
| <div class="audio-modern-header"> | |
| <i class="fas fa-chart-line"></i> | |
| <span>Analyse audio · Heatmap d'activité</span> | |
| </div> | |
| <div class="audio-modern-controls"> | |
| <button class="audio-play-btn-mini" onclick="toggleAudio('heatmapAudio')"><i class="fas fa-play" id="heatmapPlayIcon"></i></button> | |
| <div class="audio-progress-modern"> | |
| <div class="audio-progress-bar-modern" id="heatmapProgressBar" onclick="seekAudio('heatmapAudio', event)"> | |
| <div class="audio-progress-fill-modern" id="heatmapProgressFill"></div> | |
| </div> | |
| </div> | |
| <div class="audio-time-modern"><span id="heatmapCurrentTime">0:00</span> / <span id="heatmapDuration">0:00</span></div> | |
| <div class="audio-volume-mini"> | |
| <i class="fas fa-volume-up" onclick="toggleMute('heatmapAudio')"></i> | |
| <input type="range" class="volume-slider-mini" id="heatmapVolume" min="0" max="1" step="0.01" value="0.7" onchange="setVolume('heatmapAudio', this.value)"> | |
| </div> | |
| </div> | |
| <div class="audio-credit-micro"><i class="fas fa-microphone-alt"></i> Synthèse IA</div> | |
| </div> | |
| </div> | |
| <div class="radar-wrapper"> | |
| <div class="radar-title"><i class="fas fa-chart-pie"></i> Analyse de l'engagement : Indicateurs de comportement d'apprentissage</div> | |
| <div class="radar-container"><canvas id="engagementRadarChart" width="400" height="400" style="max-width:100%; height:auto;"></canvas></div> | |
| <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; font-size: 0.7rem; color: var(--gray-600);"></div> | |
| <!-- Lecteur audio Radar élégant --> | |
| <div class="audio-modern-card" id="radarAudioCard"> | |
| <div class="audio-modern-header"> | |
| <i class="fas fa-chart-pie"></i> | |
| <span>Analyse audio · Radar d'engagement</span> | |
| </div> | |
| <div class="audio-modern-controls"> | |
| <button class="audio-play-btn-mini" onclick="toggleAudio('radarAudio')"><i class="fas fa-play" id="radarPlayIcon"></i></button> | |
| <div class="audio-progress-modern"> | |
| <div class="audio-progress-bar-modern" id="radarProgressBar" onclick="seekAudio('radarAudio', event)"> | |
| <div class="audio-progress-fill-modern" id="radarProgressFill"></div> | |
| </div> | |
| </div> | |
| <div class="audio-time-modern"><span id="radarCurrentTime">0:00</span> / <span id="radarDuration">0:00</span></div> | |
| <div class="audio-volume-mini"> | |
| <i class="fas fa-volume-up" onclick="toggleMute('radarAudio')"></i> | |
| <input type="range" class="volume-slider-mini" id="radarVolume" min="0" max="1" step="0.01" value="0.7" onchange="setVolume('radarAudio', this.value)"> | |
| </div> | |
| </div> | |
| <div class="audio-credit-micro"><i class="fas fa-microphone-alt"></i> Synthèse IA</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="symmetry-curve-card"><div class="curve-header"><h4><i class="fas fa-chart-line"></i> La moyenne d'intensité par jour</h4><div class="curve-legend-mini"><span style="color:#1e1e1e;">● Intensité moyenne</span><span style="color:#616161;">● Miroir symétrique</span></div></div><canvas id="symmetryHeatmapCurve" width="100%" height="180" style="max-height:180px; width:100%;" class="symmetry-canvas"></canvas><p style="font-size:0.7rem; color:var(--gray-500); margin-top:12px; text-align:center;"><i class="fas fa-chart-simple"></i> Courbe de la moyenne d'intensité par jour (symétrie gauche/droite). Visualisation des pics d'activité.</p></div> | |
| <div class="indicator-grid"> | |
| <div class="indicator-card"><div class="indicator-header"><div class="indicator-icon"><i class="fas fa-clock"></i></div><div class="indicator-title">Régularité du travail</div></div><div class="circular-progress" id="regularityCircle"><svg viewBox="0 0 120 120"><circle class="bg-circle" cx="60" cy="60" r="54"></circle><circle class="progress-circle" cx="60" cy="60" r="54" id="regularityCircleProgress"></circle></svg><div class="progress-percent" id="regularityPercent">90%</div><div class="progress-label"></div></div><div class="indicator-sub">La constance de l'activité de l'apprenant dans le temps.</div></div> | |
| <div class="indicator-card"><div class="indicator-header"><div class="indicator-icon"><i class="fas fa-calendar-check"></i></div><div class="indicator-title">Gestion des échéances</div></div><div class="circular-progress" id="deadlineCircle"><svg viewBox="0 0 120 120"><circle class="bg-circle" cx="60" cy="60" r="54"></circle><circle class="progress-circle" cx="60" cy="60" r="54" id="deadlineCircleProgress"></circle></svg><div class="progress-percent" id="deadlinePercent">88%</div><div class="progress-label"></div></div><div class="indicator-sub">La capacité de l'apprenant à respecter les délais.</div></div> | |
| <div class="indicator-card"><div class="indicator-header"><div class="indicator-icon"><i class="fas fa-bolt"></i></div><div class="indicator-title">Schéma d'effort</div></div><div><span class="effort-badge-modern" id="effortPattern">Effort concentré (Pic d'activité jeudi/vendredi)</span></div><div class="indicator-sub">La dynamique temporelle de l'effort.</div></div> | |
| <div class="indicator-card"><div class="indicator-header"><div class="indicator-icon"><i class="fas fa-chart-line"></i></div><div class="indicator-title">Persistance & gestion des efforts</div></div><div><span class="persistence-tag" id="persistenceScore">Très élevée</span></div><div class="indicator-sub">Indice de persévérance globale</div></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- MON JOURNAL --> | |
| <section id="journal" class="tab-content"> | |
| <div class="card"> | |
| <div class="card-header"><h3><i class="far fa-edit"></i> Mon Journal d'apprentissage</h3></div> | |
| <div class="date-selector"><label><i class="far fa-calendar-alt"></i> Date de l'entrée :</label><input type="date" id="journalDate" class="form-control" style="width: auto;" value=""></div> | |
| <div class="journal-section"><h4><i class="fas fa-tasks"></i> Planifié (To-Do)</h4><textarea id="plannedText" rows="2" placeholder="Ce que vous prévoyez d'apprendre..."></textarea></div> | |
| <div class="journal-section"><h4><i class="fas fa-sync-alt"></i> En Cours (Doing)</h4><textarea id="doingText" rows="2" placeholder="Ce que vous faites actuellement..."></textarea></div> | |
| <div class="journal-section"><h4><i class="fas fa-check-circle"></i> Accompli (Done)</h4><textarea id="doneText" rows="2" placeholder="Ce que vous avez accompli..."></textarea><div class="self-rating-group"><span><i class="fas fa-star"></i> Auto-évaluation (1-5) :</span><div class="rating-stars" id="selfRatingGroup"><button type="button" class="star-btn" data-rating="1">1</button><button type="button" class="star-btn" data-rating="2">2</button><button type="button" class="star-btn" data-rating="3">3</button><button type="button" class="star-btn" data-rating="4">4</button><button type="button" class="star-btn" data-rating="5">5</button></div></div></div> | |
| <div class="journal-actions"><button class="btn btn-secondary" onclick="clearJournalForm()"><i class="fas fa-eraser"></i> Effacer le formulaire</button><button class="btn btn-primary" onclick="saveJournalEntry()"><i class="fas fa-save"></i> Sauvegarder l'entrée</button></div> | |
| <div class="journal-entries-list" id="journalEntriesList"></div> | |
| </div> | |
| </section> | |
| <!-- NOTIFICATIONS --> | |
| <section id="notifications" class="tab-content"><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> | |
| // Variables globales pour les lecteurs audio | |
| let heatmapAudio = null; | |
| let radarAudio = null; | |
| 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": "Mots" }, | |
| { "id": "M-COMP", "label": "Construction des phrases", "category": "Mots" }, | |
| { "id": "M-DEV", "label": "Développement du vocabulaire", "category": "Mots" }, | |
| { "id": "M-ORTHO", "label": "Orthographe lexicale", "category": "Mots" }, | |
| { "id": "P-ART", "label": "Articulation des termes", "category": "Phrase" }, | |
| { "id": "P-CONS", "label": "Reprises et continuité référentielle", "category": "Phrase" }, | |
| { "id": "P-GRAM", "label": "Orthographe grammaticale", "category": "Phrase" }, | |
| { "id": "P-MOD", "label": "Modalités et types de phrases", "category": "Phrase" }, | |
| { "id": "T-ENCH", "label": "Enchaînement des phrases", "category": "Texte" }, | |
| { "id": "T-ORG", "label": "Organisation textuelle", "category": "Texte" }, | |
| { "id": "T-REP", "label": "Effets de style", "category": "Texte" } | |
| ]; | |
| let eventsList = [], currentSessions = [], spacedChart = null, symmetryChart = null, radarChart = null; | |
| let profileData = { extraversion: 3, openness: 3, conscientiousness: 4, agreeableness: 3, neuroticism: 3, intrinsic: 3, introjected: 4, reason_education: 3, reason_degrees: 3, reason_money: 3, reason_prove_wrong: 2, reason_self_prove: 2, reason_independent: 3 }; | |
| const eventTemplates = [{ type: "Rappel d'étude", title: "Session de révision", message: "Votre session est prévue aujourd'hui.", priority: "high" },{ type: "Conseil IA", title: "Optimisation", message: "Révisez les conjugaisons.", priority: "medium" },{ type: "Encouragement", title: "Progression", message: "80% des objectifs atteints.", priority: "low" }]; | |
| let journalEntries = []; | |
| const radarIndicators = ["Démarrage des activités", "Achèvement des activités","Taux d'erreur", "Tentatives de réponses","Éléments des connaissances validées", "Interactions avec les ressources","Score", "Niveau moyen des compétences"]; | |
| const radarValues = [85, 74, 78, 78, 72, 80, 70, 80]; | |
| function initRadarChart() { | |
| const ctx = document.getElementById('engagementRadarChart')?.getContext('2d'); | |
| if(!ctx) return; | |
| if(radarChart) radarChart.destroy(); | |
| radarChart = new Chart(ctx, { | |
| type: 'radar', | |
| data: { labels: radarIndicators, datasets: [{ label: 'Taux (%)', data: radarValues, backgroundColor: 'rgba(30, 30, 30, 0.2)', borderColor: '#1e1e1e', borderWidth: 2, pointBackgroundColor: '#1e1e1e', pointBorderColor: '#ffffff', pointRadius: 5, fill: true }] }, | |
| options: { responsive: true, maintainAspectRatio: true, scales: { r: { beginAtZero: true, max: 100, ticks: { stepSize: 20 }, grid: { color: '#e0e0e0' }, pointLabels: { font: { size: 10 } } } }, plugins: { tooltip: { callbacks: { label: (ctx) => `${ctx.label}: ${ctx.raw}%` } }, legend: { display: false } } } | |
| }); | |
| } | |
| function initAudioPlayers() { | |
| heatmapAudio = new Audio('heatmap.mp3'); | |
| radarAudio = new Audio('radar.mp3'); | |
| heatmapAudio.addEventListener('timeupdate', () => updateProgress('heatmap')); | |
| heatmapAudio.addEventListener('loadedmetadata', () => document.getElementById('heatmapDuration').innerText = formatTime(heatmapAudio.duration)); | |
| heatmapAudio.addEventListener('ended', () => { const icon = document.getElementById('heatmapPlayIcon'); if(icon) icon.className = 'fas fa-play'; }); | |
| radarAudio.addEventListener('timeupdate', () => updateProgress('radar')); | |
| radarAudio.addEventListener('loadedmetadata', () => document.getElementById('radarDuration').innerText = formatTime(radarAudio.duration)); | |
| radarAudio.addEventListener('ended', () => { const icon = document.getElementById('radarPlayIcon'); if(icon) icon.className = 'fas fa-play'; }); | |
| const heatVol = document.getElementById('heatmapVolume'); | |
| const radVol = document.getElementById('radarVolume'); | |
| if(heatVol) heatmapAudio.volume = parseFloat(heatVol.value); | |
| if(radVol) radarAudio.volume = parseFloat(radVol.value); | |
| } | |
| function toggleAudio(audioId) { | |
| let audio = audioId === 'heatmapAudio' ? heatmapAudio : radarAudio; | |
| let playIcon = document.getElementById(audioId === 'heatmapAudio' ? 'heatmapPlayIcon' : 'radarPlayIcon'); | |
| if(audio.paused) { | |
| if(audioId === 'heatmapAudio' && radarAudio && !radarAudio.paused) { radarAudio.pause(); const rIcon = document.getElementById('radarPlayIcon'); if(rIcon) rIcon.className = 'fas fa-play'; } | |
| else if(audioId === 'radarAudio' && heatmapAudio && !heatmapAudio.paused) { heatmapAudio.pause(); const hIcon = document.getElementById('heatmapPlayIcon'); if(hIcon) hIcon.className = 'fas fa-play'; } | |
| audio.play(); | |
| if(playIcon) playIcon.className = 'fas fa-pause'; | |
| } else { audio.pause(); if(playIcon) playIcon.className = 'fas fa-play'; } | |
| } | |
| function updateProgress(audioType) { | |
| let audio = audioType === 'heatmap' ? heatmapAudio : radarAudio; | |
| let fill = document.getElementById(audioType === 'heatmap' ? 'heatmapProgressFill' : 'radarProgressFill'); | |
| let timeSpan = document.getElementById(audioType === 'heatmap' ? 'heatmapCurrentTime' : 'radarCurrentTime'); | |
| if(audio && !isNaN(audio.duration) && audio.duration > 0) { | |
| let percent = (audio.currentTime / audio.duration) * 100; | |
| if(fill) fill.style.width = percent + '%'; | |
| if(timeSpan) timeSpan.innerText = formatTime(audio.currentTime); | |
| } | |
| } | |
| function seekAudio(audioId, event) { | |
| let audio = audioId === 'heatmapAudio' ? heatmapAudio : radarAudio; | |
| let rect = event.currentTarget.getBoundingClientRect(); | |
| let x = event.clientX - rect.left; | |
| let percent = x / rect.width; | |
| if(audio && !isNaN(audio.duration) && audio.duration > 0) audio.currentTime = percent * audio.duration; | |
| } | |
| function setVolume(audioId, value) { | |
| let audio = audioId === 'heatmapAudio' ? heatmapAudio : radarAudio; | |
| if(audio) audio.volume = parseFloat(value); | |
| } | |
| function toggleMute(audioId) { | |
| let audio = audioId === 'heatmapAudio' ? heatmapAudio : radarAudio; | |
| let slider = document.getElementById(audioId === 'heatmapAudio' ? 'heatmapVolume' : 'radarVolume'); | |
| if(audio) { | |
| if(audio.volume > 0) { audio.dataset.prevVolume = audio.volume; audio.volume = 0; if(slider) slider.value = 0; } | |
| else { audio.volume = parseFloat(audio.dataset.prevVolume || 0.7); if(slider) slider.value = audio.volume; } | |
| } | |
| } | |
| function formatTime(seconds) { if(isNaN(seconds)) return "0:00"; let mins = Math.floor(seconds / 60); let secs = Math.floor(seconds % 60); return mins + ":" + (secs < 10 ? "0" + secs : secs); } | |
| function generateHeatmapData() { const days = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']; const weeks = 4; let matrix = []; for(let w = 0; w < weeks; w++) { let week = []; for(let d = 0; d < 7; d++) { let base = (w * 7 + d) % 10; let level = 0; if(base < 3) level = 1; else if(base < 6) level = 2; else if(base < 8) level = 3; else level = 4; if(d === 3 || d === 4) level = Math.min(4, level+1); week.push(level); } matrix.push(week); } return { days, weeks: matrix }; } | |
| function renderHeatmap() { const container = document.getElementById('heatmapGrid'); if(!container) return; const { days, weeks } = generateHeatmapData(); container.innerHTML = ''; for(let i = 0; i < days.length; i++) { let dayDiv = document.createElement('div'); dayDiv.className = 'heatmap-day-label'; dayDiv.innerText = days[i]; container.appendChild(dayDiv); } for(let w = 0; w < weeks.length; w++) { for(let d = 0; d < weeks[w].length; d++) { let cell = document.createElement('div'); cell.className = `heatmap-cell level-${weeks[w][d]}`; cell.title = `${days[d]} Semaine ${w+1} : Niveau ${weeks[w][d]}`; container.appendChild(cell); } } const legendContainer = document.getElementById('heatmapLegend'); if(legendContainer) legendContainer.innerHTML = `<div class="legend-heatmap-item"><div class="legend-color-box level-0"></div><span>Aucune activité</span></div><div class="legend-heatmap-item"><div class="legend-color-box level-1"></div><span>Faible</span></div><div class="legend-heatmap-item"><div class="legend-color-box level-2"></div><span>Moyenne</span></div><div class="legend-heatmap-item"><div class="legend-color-box level-3"></div><span>Élevée</span></div><div class="legend-heatmap-item"><div class="legend-color-box level-4"></div><span>Intense</span></div>`; } | |
| function drawSymmetryCurve() { const canvas = document.getElementById('symmetryHeatmapCurve'); if(!canvas) return; const ctx = canvas.getContext('2d'); const width = canvas.parentElement.clientWidth - 40; const height = 160; canvas.width = width; canvas.height = height; ctx.clearRect(0,0,width,height); const { days, weeks } = generateHeatmapData(); let avgIntensity = new Array(7).fill(0); for(let w = 0; w < weeks.length; w++) for(let d = 0; d < 7; d++) avgIntensity[d] += weeks[w][d]; avgIntensity = avgIntensity.map(v => v / weeks.length); let reversed = [...avgIntensity].reverse(); let combined = avgIntensity.map((v,i)=> (v + reversed[i])/2); const points = combined.map((val, idx) => ({ x: (idx / 6) * width, y: height - (val / 4) * height })); ctx.beginPath(); ctx.strokeStyle = '#1e1e1e'; ctx.lineWidth = 2.5; points.forEach((p,i)=> i===0 ? ctx.moveTo(p.x,p.y) : ctx.lineTo(p.x,p.y)); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = '#616161'; ctx.setLineDash([6,8]); let mirrorPoints = points.map(p => ({ x: width - p.x, y: p.y })); mirrorPoints.forEach((p,i)=> i===0 ? ctx.moveTo(p.x,p.y) : ctx.lineTo(p.x,p.y)); ctx.stroke(); points.forEach(p => { ctx.beginPath(); ctx.fillStyle = '#1e1e1e'; ctx.arc(p.x, p.y, 4, 0, 2*Math.PI); ctx.fill(); ctx.fillStyle = 'white'; ctx.beginPath(); ctx.arc(p.x, p.y, 2, 0, 2*Math.PI); ctx.fill(); }); } | |
| function updateCircularProgress(elementId, percent) { const circle = document.getElementById(elementId); if(!circle) return; const r = 54; const circ = 2 * Math.PI * r; const offset = circ - (percent / 100) * circ; circle.style.strokeDasharray = `${circ}`; circle.style.strokeDashoffset = offset; } | |
| function updateIndicators() { document.getElementById('regularityPercent').innerText = '90%'; document.getElementById('deadlinePercent').innerText = '88%'; updateCircularProgress('regularityCircleProgress', 90); updateCircularProgress('deadlineCircleProgress', 88); document.getElementById('effortPattern').innerHTML = "Effort concentré (Pic d'activité jeudi/vendredi)"; document.getElementById('persistenceScore').innerHTML = "Très élevée"; } | |
| function setDashboardView(view) { if(view === 'combined') { renderHeatmap(); drawSymmetryCurve(); updateIndicators(); initRadarChart(); } } | |
| function initCompetencesSelect() { const select = document.getElementById('competence'); if(select) select.innerHTML = competencesData.map(c => `<option value="${c.id}">${c.label}</option>`).join(''); } | |
| 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"]; sessions.push({ id:i+1, date:new Date(currentDate), dateStr:currentDate.toLocaleDateString('fr-FR'), competence:competenceLabel, duration:sessionDur+" minutes", interval:intervals[i]+" jours", type:sessionTypes[i], strategy:"Révision active", productivity:method==='pomodoro'?'Pomodoro':'Deep Work', optimalTime:timeSlot }); } currentSessions = sessions; renderPlanningTable(sessions); updatePlanningStats(sessions, retention, sessionDur); drawSpacedRepetitionCurve(sessions); showToast("Planning généré"); 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); sessions.push({ id:i+1, date:new Date(currentDate), dateStr:currentDate.toLocaleDateString('fr-FR'), competence:"Comprendre les mots", duration:"20 minutes", interval:intervals[i]+" jours", type:i===0?"Apprentissage":"Consolidation", strategy:"Révision active", 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) tbody.innerHTML = sessions.map(s => `<tr><td><strong>${s.dateStr}</strong></td><td>R${s.id}</td><td>${s.competence}</td><td>${s.duration}</td><td>${s.interval}</td><td><span class="session-type-badge">${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) { const totalDays = Math.ceil((sessions[sessions.length-1].date - sessions[0].date) / 86400000); 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 drawSpacedRepetitionCurve(sessions) { if(!sessions.length) return; const canvas = document.getElementById('spacedRepetitionCurve'); if(!canvas) return; const ctx = canvas.getContext('2d'); const width = canvas.parentElement.clientWidth - 40; const height = 180; canvas.width = width; canvas.height = height; ctx.clearRect(0,0,width,height); const start = sessions[0].date.getTime(); const end = sessions[sessions.length-1].date.getTime(); const totalDays = (end - start) / 86400000; ctx.beginPath(); ctx.strokeStyle = '#1e1e1e'; ctx.lineWidth = 2.5; let first = true; for(let x = 0; x <= width; x++) { const dayProg = (x/width)*totalDays; const ret = Math.exp(-dayProg / (0.4*30)) * 100; const y = height - (ret/100)*height; if(first) { ctx.moveTo(x,y); first=false; } else ctx.lineTo(x,y); } ctx.stroke(); sessions.forEach(s => { const x = ((s.date.getTime() - start) / (end - start)) * width; const dayProg = (s.date.getTime() - start)/86400000; const retAt = Math.exp(-dayProg / (0.4*30)) * 100; const y = height - (retAt/100)*height; ctx.beginPath(); ctx.fillStyle = '#424242'; ctx.arc(x, y, 5, 0, 2*Math.PI); ctx.fill(); ctx.fillStyle = 'white'; ctx.beginPath(); ctx.arc(x, y, 2, 0, 2*Math.PI); ctx.fill(); }); } | |
| 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("Exporté 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 idx = eventsList.findIndex(e => e.id == eventId); if(idx === -1) return; eventsList[idx].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(e => `<tr><td>${e.date}</td><td>${e.type}</td><td><strong>${e.title}</strong></td><td>${e.message}</td><td><span class="priority-${e.priority}">${e.priority}</span></td><td><span class="status-badge ${e.status === 'accepted' ? 'status-accepted' : 'status-pending'}">${e.status === 'accepted' ? 'Accepté' : 'En attente'}</span></td><td class="action-cell"><button class="action-icon-btn action-accept" onclick="executeAction(${e.id}, 'ACCEPT', 'Accepté')">✓ Accepter</button><button class="action-icon-btn action-reject" onclick="executeAction(${e.id}, 'REJECT', 'Rejeté')">✗ Rejeter</button><button class="action-icon-btn action-hold" onclick="executeAction(${e.id}, 'HOLD', 'En attente')">⏸ Attente</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: ['#2e7d32','#c62828','#b76e0e'] }] }, options: { responsive: true } }); } | |
| function saveEvents() { localStorage.setItem('eventsList', JSON.stringify(eventsList)); } | |
| function loadSavedData() { const saved = localStorage.getItem('eventsList'); if(saved) eventsList = JSON.parse(saved); } | |
| function showTab(tabId) { document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active')); document.getElementById(tabId).classList.add('active'); document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active')); if(window.event?.target) window.event.target.classList.add('active'); if(tabId === 'dashboard') { renderHeatmap(); drawSymmetryCurve(); updateIndicators(); initRadarChart(); } if(tabId === 'planner') { if(currentSessions.length === 0) generateDefaultPlanning(); else drawSpacedRepetitionCurve(currentSessions); } if(tabId === 'notifications') { renderEventsTable(); updateEventStats(); } if(tabId === 'profile') { loadProfileFromStorage(); updateProfileUI(); } if(tabId === 'journal') { loadJournalEntries(); } } | |
| function showToast(msg) { let div = document.createElement('div'); div.style.cssText = `position:fixed; bottom:20px; right:20px; background:#1e293b; color:white; padding:12px 20px; border-radius:8px; z-index:1000;`; div.innerHTML = msg; document.body.appendChild(div); setTimeout(()=>div.remove(), 2500); } | |
| function setupRatingListeners() { document.querySelectorAll('.big5-rating .rating-btn, .motivation-rating .rating-btn').forEach(btn => btn.addEventListener('click', function() { const container = this.closest('.big5-rating, .motivation-rating'); const trait = container.dataset.trait || container.dataset.motivation; const value = parseInt(this.dataset.value); profileData[trait] = 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() { 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; let completed = Object.values(profileData).filter(v => v).length; const percent = Math.round((completed / 12) * 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; document.getElementById('recommendationsContainer').innerHTML = ["◼ Qualité du sommeil: Maintenez 7-8 heures.", "◼ Planification: Renforcez votre organisation."].map(r => `<p>${r}</p>`).join(''); } | |
| function autoFillProfile() { profileData = { extraversion: 4, openness: 4, conscientiousness: 5, agreeableness: 4, neuroticism: 2, intrinsic: 5, introjected: 3, reason_education: 5, reason_degrees: 4, reason_money: 4, reason_prove_wrong: 2, reason_self_prove: 3, reason_independent: 5 }; document.querySelectorAll('.big5-rating, .motivation-rating').forEach(container => { const key = container.dataset.trait || container.dataset.motivation; if(profileData[key]) updateRatingUI(container, profileData[key]); }); updateProfileUI(); saveProfileToStorage(); showToast("Profil auto-rempli"); } | |
| function saveProfileData() { saveProfileToStorage(); showToast("Profil sauvegardé"); } | |
| function finalizeProfile() { saveProfileToStorage(); showToast("Profil finalisé"); } | |
| function saveProfileToStorage() { localStorage.setItem('perseverAI_profile', JSON.stringify(profileData)); } | |
| function loadProfileFromStorage() { const saved = localStorage.getItem('perseverAI_profile'); if(saved) Object.assign(profileData, JSON.parse(saved)); updateProfileUI(); } | |
| function loadJournalEntries() { const saved = localStorage.getItem('perseverAI_journal'); if(saved) journalEntries = JSON.parse(saved); renderJournalEntries(); } | |
| function saveJournalEntry() { const selectedDate = document.getElementById('journalDate')?.value || new Date().toISOString().split('T')[0]; const planned = document.getElementById('plannedText')?.value.trim() || ""; const doing = document.getElementById('doingText')?.value.trim() || ""; const done = document.getElementById('doneText')?.value.trim() || ""; const activeRating = document.querySelector('#selfRatingGroup .star-btn.active'); let selfRating = activeRating ? parseInt(activeRating.dataset.rating) : null; if(!planned && !doing && !done) { showToast("Renseignez au moins un champ"); return; } const newEntry = { id: Date.now(), date: selectedDate, dateFormatted: new Date(selectedDate).toLocaleDateString('fr-FR'), planned, doing, done, selfRating }; journalEntries.unshift(newEntry); localStorage.setItem('perseverAI_journal', JSON.stringify(journalEntries)); document.getElementById('plannedText').value = ""; document.getElementById('doingText').value = ""; document.getElementById('doneText').value = ""; document.querySelectorAll('#selfRatingGroup .star-btn').forEach(btn => btn.classList.remove('active')); renderJournalEntries(); showToast("Journal sauvegardé"); } | |
| function clearJournalForm() { document.getElementById('plannedText').value = ""; document.getElementById('doingText').value = ""; document.getElementById('doneText').value = ""; document.querySelectorAll('#selfRatingGroup .star-btn').forEach(btn => btn.classList.remove('active')); document.getElementById('journalDate').value = new Date().toISOString().split('T')[0]; showToast("Formulaire effacé"); } | |
| function renderJournalEntries() { const container = document.getElementById('journalEntriesList'); if(!container) return; if(journalEntries.length === 0) { container.innerHTML = '<div style="text-align:center; color:var(--gray-500); padding:20px;"><i class="fas fa-book-open"></i> Aucune entrée</div>'; return; } container.innerHTML = journalEntries.map(entry => `<div class="journal-entry-item"><div class="journal-entry-date"><i class="far fa-calendar-alt"></i> ${entry.dateFormatted || entry.date}</div>${entry.planned ? `<div><span class="journal-badge"><i class="fas fa-tasks"></i> Planifié</span> ${escapeHtml(entry.planned)}</div>` : ''}${entry.doing ? `<div><span class="journal-badge"><i class="fas fa-sync-alt"></i> En cours</span> ${escapeHtml(entry.doing)}</div>` : ''}${entry.done ? `<div><span class="journal-badge"><i class="fas fa-check-circle"></i> Accompli</span> ${escapeHtml(entry.done)}</div>` : ''}${entry.selfRating ? `<div><span class="journal-badge"><i class="fas fa-star"></i> Auto-évaluation</span> ${entry.selfRating}/5</div>` : ''}</div>`).join(''); } | |
| function escapeHtml(str) { return str.replace(/[&<>]/g, function(m){ if(m==='&') return '&'; if(m==='<') return '<'; if(m==='>') return '>'; return m;}); } | |
| function setupRatingStars() { document.querySelectorAll('#selfRatingGroup .star-btn').forEach(btn => { btn.addEventListener('click', function() { document.querySelectorAll('#selfRatingGroup .star-btn').forEach(b => b.classList.remove('active')); this.classList.add('active'); }); }); } | |
| 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(); | |
| loadProfileFromStorage(); | |
| setupRatingListeners(); | |
| updateProfileUI(); | |
| setDashboardView('combined'); | |
| setupRatingStars(); | |
| loadJournalEntries(); | |
| updateCircularProgress('regularityCircleProgress', 90); | |
| updateCircularProgress('deadlineCircleProgress', 88); | |
| const todayDate = new Date().toISOString().split('T')[0]; | |
| if(document.getElementById('journalDate')) document.getElementById('journalDate').value = todayDate; | |
| initRadarChart(); | |
| initAudioPlayers(); | |
| }); | |
| function initProfileModule() { loadProfileFromStorage(); setupRatingListeners(); updateProfileUI(); } | |
| window.addEventListener('resize', () => { if(document.getElementById('dashboard').classList.contains('active')) { drawSymmetryCurve(); if(radarChart) radarChart.resize(); } if(document.getElementById('planner').classList.contains('active') && currentSessions.length > 0) drawSpacedRepetitionCurve(currentSessions); }); | |
| </script> | |
| </body> | |
| </html> |