| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Progress - SAML LMS</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| 'sa-orange': '#FF6B35', |
| 'sa-teal': '#008080', |
| 'sa-yellow': '#FFD23F', |
| 'sa-purple': '#6A4C93', |
| 'sa-red': '#C1121F', |
| 'sa-green': '#007200', |
| 'sa-blue': '#003049' |
| } |
| } |
| } |
| } |
| </script> |
| </head> |
| <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100"> |
| |
| <nav class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between items-center h-16"> |
| <div class="flex items-center space-x-8"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-8 h-8 bg-gradient-to-br from-sa-orange to-sa-purple rounded-lg flex items-center justify-center"> |
| <i data-feather="cpu" class="w-5 h-5 text-white"></i> |
| </div> |
| <span class="font-bold text-xl">SAML LMS</span> |
| </div> |
| <div class="hidden md:flex space-x-6"> |
| <a href="index.html" class="nav-link text-gray-600 dark:text-gray-300 hover:text-sa-teal dark:hover:text-sa-teal transition-colors flex items-center gap-2"> |
| <i data-feather="home" class="w-4 h-4"></i> Dashboard |
| </a> |
| <a href="activities.html" class="nav-link text-gray-600 dark:text-gray-300 hover:text-sa-teal dark:hover:text-sa-teal transition-colors flex items-center gap-2"> |
| <i data-feather="grid" class="w-4 h-4"></i> Activities |
| </a> |
| <a href="tools.html" class="nav-link text-gray-600 dark:text-gray-300 hover:text-sa-teal dark:hover:text-sa-teal transition-colors flex items-center gap-2"> |
| <i data-feather="tool" class="w-4 h-4"></i> Tools |
| </a> |
| <a href="progress.html" class="nav-link text-sa-teal dark:text-sa-teal font-medium flex items-center gap-2"> |
| <i data-feather="trending-up" class="w-4 h-4"></i> Progress |
| </a> |
| <a href="resources.html" class="nav-link text-gray-600 dark:text-gray-300 hover:text-sa-teal dark:hover:text-sa-teal transition-colors flex items-center gap-2"> |
| <i data-feather="book-open" class="w-4 h-4"></i> Resources |
| </a> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button class="bg-sa-green text-white px-3 py-1 rounded-full text-xs font-medium flex items-center gap-2"> |
| <i data-feather="wifi-off" class="w-3 h-3"></i> Offline |
| </button> |
| <button onclick="toggleTheme()" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> |
| <i data-feather="moon" class="w-5 h-5 hidden dark:block"></i> |
| <i data-feather="sun" class="w-5 h-5 block dark:hidden"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
| |
| <div class="mb-8"> |
| <h1 class="text-3xl font-bold mb-2">Progress Tracking</h1> |
| <p class="text-gray-600 dark:text-gray-400">Monitor student progress and learning outcomes</p> |
| </div> |
|
|
| |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 mb-6"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> |
| <div> |
| <label class="block text-sm font-medium mb-2">Class/Grade</label> |
| <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700"> |
| <option>Grade 2 - Class A</option> |
| <option>Grade 2 - Class B</option> |
| <option>Grade 1 - Class A</option> |
| <option>Grade 3 - Class A</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium mb-2">Time Period</label> |
| <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700"> |
| <option>This Week</option> |
| <option>This Month</option> |
| <option>This Term</option> |
| <option>This Year</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium mb-2">Concept Focus</label> |
| <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700"> |
| <option>All Concepts</option> |
| <option>Sequencing</option> |
| <option>Patterns</option> |
| <option>Algorithms</option> |
| <option>Debugging</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium mb-2">Student</label> |
| <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700"> |
| <option>All Students</option> |
| <option>Amina Patel</option> |
| <option>Bongani Ndlovu</option> |
| <option>Catherine Smith</option> |
| <option>David Chen</option> |
| </select> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8"> |
| <div class="bg-gradient-to-br from-sa-green to-sa-green/80 p-6 rounded-xl text-white"> |
| <div class="flex items-center justify-between mb-2"> |
| <i data-feather="users" class="w-8 h-8 opacity-80"></i> |
| <span class="text-2xl font-bold">28</span> |
| </div> |
| <p class="text-sm opacity-90">Active Students</p> |
| <p class="text-xs opacity-75 mt-1">+3 from last week</p> |
| </div> |
| <div class="bg-gradient-to-br from-sa-teal to-sa-teal/80 p-6 rounded-xl text-white"> |
| <div class="flex items-center justify-between mb-2"> |
| <i data-feather="activity" class="w-8 h-8 opacity-80"></i> |
| <span class="text-2xl font-bold">87%</span> |
| </div> |
| <p class="text-sm opacity-90">Average Progress</p> |
| <p class="text-xs opacity-75 mt-1">+5% improvement</p> |
| </div> |
| <div class="bg-gradient-to-br from-sa-purple to-sa-purple/80 p-6 rounded-xl text-white"> |
| <div class="flex items-center justify-between mb-2"> |
| <i data-feather="award" class="w-8 h-8 opacity-80"></i> |
| <span class="text-2xl font-bold">156</span> |
| </div> |
| <p class="text-sm opacity-90">Activities Completed</p> |
| <p class="text-xs opacity-75 mt-1">This month</p> |
| </div> |
| <div class="bg-gradient-to-br from-sa-orange to-sa-orange/80 p-6 rounded-xl text-white"> |
| <div class="flex items-center justify-between mb-2"> |
| <i data-feather="clock" class="w-8 h-8 opacity-80"></i> |
| <span class="text-2xl font-bold">42h</span> |
| </div> |
| <p class="text-sm opacity-90">Total Learning Time</p> |
| <p class="text-xs opacity-75 mt-1">This term</p> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6"> |
| <h3 class="font-bold text-lg mb-4">Concept Mastery Overview</h3> |
| <canvas id="masteryChart" height="200"></canvas> |
| </div> |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6"> |
| <h3 class="font-bold text-lg mb-4">Weekly Activity Completion</h3> |
| <canvas id="weeklyChart" height="200"></canvas> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 mb-8"> |
| <div class="flex items-center justify-between mb-6"> |
| <h3 class="font-bold text-lg">Individual Student Progress</h3> |
| <button class="text-sa-teal hover:text-sa-teal/80 font-medium text-sm flex items-center gap-1"> |
| Export Report <i data-feather="download" class="w-4 h-4"></i> |
| </button> |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="w-full"> |
| <thead> |
| <tr class="border-b border-gray-200 dark:border-gray-700"> |
| <th class="text-left py-3 px-4 font-medium text-sm">Student</th> |
| <th class="text-left py-3 px-4 font-medium text-sm">Grade</th> |
| <th class="text-left py-3 px-4 font-medium text-sm">Activities</th> |
| <th class="text-left py-3 px-4 font-medium text-sm">Avg Score</th> |
| <th class="text-left py-3 px-4 font-medium text-sm">Progress</th> |
| <th class="text-left py-3 px-4 font-medium text-sm">Status</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr class="border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50"> |
| <td class="py-3 px-4"> |
| <div class="flex items-center gap-3"> |
| <img src="http://static.photos/people/40x40/101" class="w-10 h-10 rounded-full"> |
| <div> |
| <p class="font-medium">Amina Patel</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400">ID: STU001</p> |
| </div> |
| </div> |
| </td> |
| <td class="py-3 px-4">Grade 2</td> |
| <td class="py-3 px-4">24</td> |
| <td class="py-3 px-4"> |
| <div class="flex items-center gap-1"> |
| <span class="font-medium">92%</span> |
| <i data-feather="trending-up" class="w-4 h-4 text-green-500"></i> |
| </div> |
| </td> |
| <td class="py-3 px-4"> |
| <div class="w-24 bg-gray-200 dark:bg-gray-700 rounded-full h-2"> |
| <div class="bg-sa-green h-2 rounded-full" style="width: 92%"></div> |
| </div> |
| </td> |
| <td class="py-3 px-4"> |
| <span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs font-medium">Advanced</span> |
| </td> |
| </tr> |
| <tr class="border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50"> |
| <td class="py-3 px-4"> |
| <div class="flex items-center gap-3"> |
| <img src="http://static.photos/people/40x40/102" class="w-10 h-10 rounded-full"> |
| <div> |
| <p class="font-medium">Bongani Ndlovu</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400">ID: STU002</p> |
| </div> |
| </div> |
| </td> |
| <td class="py-3 px-4">Grade 2</td> |
| <td class="py-3 px-4">22</td> |
| <td class="py-3 px-4"> |
| <div class="flex items-center gap-1"> |
| <span class="font-medium">85%</span> |
| <i data-feather="trending-up" class="w-4 h-4 text-green-500"></i> |
| </div> |
| </td> |
| <td class="py-3 px-4"> |
| <div class="w-24 bg-gray-200 dark:bg-gray-700 rounded-full h-2"> |
| <div class="bg-sa-teal h-2 rounded-full" style="width: 85%"></div> |
| </div> |
| </td> |
| <td class="py-3 px-4"> |
| <span class="bg-sa-teal/10 text-sa-teal px-2 py-1 rounded text-xs font-medium">Proficient</span> |
| </td> |
| </tr> |
| <tr class="border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50"> |
| <td class="py-3 px-4"> |
| <div class="flex items-center gap-3"> |
| <img src="http://static.photos/people/40x40/103" class="w-10 h-10 rounded-full"> |
| <div> |
| <p class="font-medium">Catherine Smith</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400">ID: STU003</p> |
| </div> |
| </div> |
| </td> |
| <td class="py-3 px-4">Grade 2</td> |
| <td class="py-3 px-4">20</td> |
| <td class="py-3 px-4"> |
| <div class="flex items-center gap-1"> |
| <span class="font-medium">78%</span> |
| <i data-feather="trending-up" class="w-4 h-4 text-green-500"></i> |
| </div> |
| </td> |
| <td class="py-3 px-4"> |
| <div class="w-24 bg-gray-200 dark:bg-gray-700 rounded-full h-2"> |
| <div class="bg-sa-yellow h-2 rounded-full" style="width: 78%"></div> |
| </div> |
| </td> |
| <td class="py-3 px-4"> |
| <span class="bg-sa-yellow/10 text-sa-yellow px-2 py-1 rounded text-xs font-medium">Developing</span> |
| </td> |
| </tr> |
| <tr class="border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50"> |
| <td class="py-3 px-4"> |
| <div class="flex items-center gap-3"> |
| <img src="http://static.photos/people/40x40/104" class="w-10 h-10 rounded-full"> |
| <div> |
| <p class="font-medium">David Chen</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400">ID: STU004</p> |
| </div> |
| </div> |
| </td> |
| <td class="py-3 px-4">Grade 2</td> |
| <td class="py-3 px-4">18</td> |
| <td class="py-3 px-4"> |
| <div class="flex items-center gap-1"> |
| <span class="font-medium">65%</span> |
| <i data-feather="trending-up" class="w-4 h-4 text-green-500"></i> |
| </div> |
| </td> |
| <td class="py-3 px-4"> |
| <div class="w-24 bg-gray-200 dark:bg-gray-700 rounded-full h-2"> |
| <div class="bg-sa-orange h-2 rounded-full" style="width: 65%"></div> |
| </div> |
| </td> |
| <td class="py-3 px-4"> |
| <span class="bg-sa-orange/10 text-sa-orange px-2 py-1 rounded text-xs font-medium">Emerging</span> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6"> |
| <h3 class="font-bold text-lg mb-4">Top Performing Concepts</h3> |
| <div class="space-y-3"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center gap-2"> |
| <div class="w-8 h-8 bg-sa-green/10 rounded-lg flex items-center justify-center"> |
| <i data-feather="check" class="w-4 h-4 text-sa-green"></i> |
| </div> |
| <span class="text-sm font-medium">Sequencing</span> |
| </div> |
| <span class="text-sm font-bold text-sa-green">94%</span> |
| </div> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center gap-2"> |
| <div class="w-8 h-8 bg-sa-teal/10 rounded-lg flex items-center justify-center"> |
| <i data-feather="check" class="w-4 h-4 text-sa-teal"></i> |
| </div> |
| <span class="text-sm font-medium">Patterns</span> |
| </div> |
| <span class="text-sm font-bold text-sa-teal">89%</span> |
| </div> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center gap-2"> |
| <div class="w-8 h-8 bg-sa-yellow/10 rounded-lg flex items-center justify-center"> |
| <i data-feather="check" class="w-4 h-4 text-sa-yellow"></i> |
| </div> |
| <span class="text-sm font-medium">Algorithms</span> |
| </div> |
| <span class="text-sm font-bold text-sa-yellow">82%</span> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6"> |
| <h3 class="font-bold text-lg mb-4">Areas Needing Support</h3> |
| <div class="space-y-3"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center gap-2"> |
| <div class="w-8 h-8 bg-sa-orange/10 rounded-lg flex items-center justify-center"> |
| <i data-feather="alert-triangle" class="w-4 h-4 text-sa-orange"></i> |
| </div> |
| <span class="text-sm font-medium">Debugging</span> |
| </div> |
| <span class="text-sm font-bold text-sa-orange">68%</span> |
| </div> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center gap-2"> |
| <div class="w-8 h-8 bg-sa-purple/10 rounded-lg flex items-center justify-center"> |
| <i data-feather="alert-triangle" class="w-4 h-4 text-sa-purple"></i> |
| </div> |
| <span class="text-sm font-medium">Decomposition</span> |
| </div> |
| <span class="text-sm font-bold text-sa-purple">72%</span> |
| </div> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center gap-2"> |
| <div class="w-8 h-8 bg-sa-red/10 rounded-lg flex items-center justify-center"> |
| <i data-feather="alert-triangle" class="w-4 h-4 text-sa-red"></i> |
| </div> |
| <span class="text-sm font-medium">Abstraction</span> |
| </div> |
| <span class="text-sm font-bold text-sa-red">65%</span> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6"> |
| <h3 class="font-bold text-lg mb-4">Recent Achievements</h3> |
| <div class="space-y-3"> |
| <div class="flex items-start gap-3"> |
| <div class="w-8 h-8 bg-yellow-100 rounded-lg flex items-center justify-center flex-shrink-0"> |
| <i data-feather="award" class="w-4 h-4 text-yellow-600"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Pattern Master</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400">5 students earned</p> |
| </div> |
| </div> |
| <div class="flex items-start gap-3"> |
| <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0"> |
| <i data-feather="zap" class="w-4 h-4 text-blue-600"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Speed Solver</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400">3 students earned</p> |
| </div> |
| </div> |
| <div class="flex items-start gap-3"> |
| <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0"> |
| <i data-feather="star" class="w-4 h-4 text-green-600"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Perfect Week</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400">8 students earned</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| function toggleTheme() { |
| document.documentElement.classList.toggle('dark'); |
| localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); |
| } |
| |
| |
| if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
| document.documentElement.classList.add('dark'); |
| } |
| |
| |
| const masteryCtx = document.getElementById('masteryChart').getContext('2d'); |
| new Chart(masteryCtx, { |
| type: 'radar', |
| data: { |
| labels: ['Sequencing', 'Patterns', 'Algorithms', 'Debugging', 'Decomposition', 'Abstraction'], |
| datasets: [{ |
| label: 'Class Average', |
| data: [94, 89, 82, 68, 72, 65], |
| backgroundColor: 'rgba(0, 128, 128, 0.2)', |
| borderColor: 'rgba(0, 128, 128, 1)', |
| borderWidth: 2 |
| }, { |
| label: 'Target', |
| data: [85, 85, 85, 85, 85, 85], |
| backgroundColor: 'rgba(255, 107, 53, 0.1)', |
| borderColor: 'rgba(255, 107, 53, 1)', |
| borderWidth: 2, |
| borderDash: [5, 5] |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| r: { |
| beginAtZero: true, |
| max: 100 |
| } |
| } |
| } |
| }); |
| |
| const weeklyCtx = document.getElementById('weeklyChart').getContext('2d'); |
| new Chart(weeklyCtx, { |
| type: 'bar', |
| data: { |
| labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], |
| datasets: [{ |
| label: 'Activities Completed', |
| data: [12, 19, 15, 25, 22], |
| backgroundColor: 'rgba(106, 76, 147, 0.8)', |
| borderRadius: 6 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| y: { |
| beginAtZero: true |
| } |
| } |
| } |
| }); |
| </script> |
| </body> |
| </html> |
