|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>SAML LMS - Learning Management System</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.tailwindcss.com/3.4.0"></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' |
|
|
}, |
|
|
animation: { |
|
|
'fade-in': 'fadeIn 0.5s ease-in-out', |
|
|
'slide-up': 'slideUp 0.3s ease-out', |
|
|
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } |
|
|
@keyframes slideUp { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } |
|
|
.skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; } |
|
|
@keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } |
|
|
.offline-badge { background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.1) 10px, rgba(255,255,255,.1) 20px); } |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200"> |
|
|
|
|
|
<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-sa-teal dark:text-sa-teal font-medium 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-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="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"> |
|
|
<div class="relative"> |
|
|
<span class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full animate-pulse-slow"></span> |
|
|
<button class="offline-badge 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> |
|
|
</div> |
|
|
<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> |
|
|
<button class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors relative"> |
|
|
<i data-feather="bell" class="w-5 h-5"></i> |
|
|
<span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span> |
|
|
</button> |
|
|
<div class="flex items-center space-x-3 pl-4 border-l border-gray-200 dark:border-gray-700"> |
|
|
<img src="http://static.photos/people/40x40/123" alt="Profile" class="w-10 h-10 rounded-full"> |
|
|
<div> |
|
|
<p class="text-sm font-medium">Ms. Nkosi</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">Grade 2</p> |
|
|
</div> |
|
|
</div> |
|
|
</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 animate-fade-in"> |
|
|
<h1 class="text-3xl font-bold mb-2">Welcome back, Ms. Nkosi! 👋</h1> |
|
|
<p class="text-gray-600 dark:text-gray-400">Ready to inspire young minds with computational thinking?</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8"> |
|
|
<button onclick="showNewLessonModal()" class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 border border-gray-200 dark:border-gray-700 hover:border-sa-orange dark:hover:border-sa-orange group"> |
|
|
<div class="flex items-center justify-between mb-3"> |
|
|
<div class="w-12 h-12 bg-sa-orange/10 dark:bg-sa-orange/20 rounded-lg flex items-center justify-center group-hover:bg-sa-orange/20 dark:group-hover:bg-sa-orange/30 transition-colors"> |
|
|
<i data-feather="plus-circle" class="w-6 h-6 text-sa-orange"></i> |
|
|
</div> |
|
|
<i data-feather="arrow-right" class="w-4 h-4 text-gray-400 group-hover:text-sa-orange transition-colors"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold text-left mb-1">New Lesson</h3> |
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 text-left">Create fresh activity plan</p> |
|
|
</button> |
|
|
|
|
|
<button onclick="showProgressModal()" class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 border border-gray-200 dark:border-gray-700 hover:border-sa-teal dark:hover:border-sa-teal group"> |
|
|
<div class="flex items-center justify-between mb-3"> |
|
|
<div class="w-12 h-12 bg-sa-teal/10 dark:bg-sa-teal/20 rounded-lg flex items-center justify-center group-hover:bg-sa-teal/20 dark:group-hover:bg-sa-teal/30 transition-colors"> |
|
|
<i data-feather="check-square" class="w-6 h-6 text-sa-teal"></i> |
|
|
</div> |
|
|
<i data-feather="arrow-right" class="w-4 h-4 text-gray-400 group-hover:text-sa-teal transition-colors"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold text-left mb-1">Record Progress</h3> |
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 text-left">Track student mastery</p> |
|
|
</button> |
|
|
|
|
|
<button class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 border border-gray-200 dark:border-gray-700 hover:border-sa-yellow dark:hover:border-sa-yellow group"> |
|
|
<div class="flex items-center justify-between mb-3"> |
|
|
<div class="w-12 h-12 bg-sa-yellow/10 dark:bg-sa-yellow/20 rounded-lg flex items-center justify-center group-hover:bg-sa-yellow/20 dark:group-hover:bg-sa-yellow/30 transition-colors"> |
|
|
<i data-feather="download" class="w-6 h-6 text-sa-yellow"></i> |
|
|
</div> |
|
|
<i data-feather="arrow-right" class="w-4 h-4 text-gray-400 group-hover:text-sa-yellow transition-colors"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold text-left mb-1">Materials</h3> |
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 text-left">Download activity packs</p> |
|
|
</button> |
|
|
|
|
|
<button class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 border border-gray-200 dark:border-gray-700 hover:border-sa-purple dark:hover:border-sa-purple group"> |
|
|
<div class="flex items-center justify-between mb-3"> |
|
|
<div class="w-12 h-12 bg-sa-purple/10 dark:bg-sa-purple/20 rounded-lg flex items-center justify-center group-hover:bg-sa-purple/20 dark:group-hover:bg-sa-purple/30 transition-colors"> |
|
|
<i data-feather="refresh-cw" class="w-6 h-6 text-sa-purple"></i> |
|
|
</div> |
|
|
<i data-feather="arrow-right" class="w-4 h-4 text-gray-400 group-hover:text-sa-purple transition-colors"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold text-left mb-1">Sync Queue</h3> |
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 text-left">3 items pending</p> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8"> |
|
|
<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="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> |
|
|
</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">15</span> |
|
|
</div> |
|
|
<p class="text-sm opacity-90">Activities This Week</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">92%</span> |
|
|
</div> |
|
|
<p class="text-sm opacity-90">Completion Rate</p> |
|
|
</div> |
|
|
<div class="bg-gradient-to-br from-sa-yellow to-sa-yellow/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">4.5h</span> |
|
|
</div> |
|
|
<p class="text-sm opacity-90">Learning Time</p> |
|
|
</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"> |
|
|
<h2 class="text-xl font-bold">Recent Activities</h2> |
|
|
<a href="#" class="text-sa-teal hover:text-sa-teal/80 font-medium text-sm flex items-center gap-1"> |
|
|
View All <i data-feather="chevron-right" class="w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-all duration-200 cursor-pointer group"> |
|
|
<div class="flex items-start justify-between mb-3"> |
|
|
<img src="http://static.photos/education/80x80/42" alt="Activity" class="w-16 h-16 rounded-lg object-cover"> |
|
|
<span class="bg-sa-green/10 text-sa-green px-2 py-1 rounded text-xs font-medium">Offline</span> |
|
|
</div> |
|
|
<h3 class="font-semibold mb-1 group-hover:text-sa-teal transition-colors">Pattern Dance Party</h3> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Grade 2 • 45 min • Patterns</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img src="http://static.photos/people/32x32/101" class="w-8 h-8 rounded-full border-2 border-white dark:border-gray-800"> |
|
|
<img src="http://static.photos/people/32x32/102" class="w-8 h-8 rounded-full border-2 border-white dark:border-gray-800"> |
|
|
<img src="http://static.photos/people/32x32/103" class="w-8 h-8 rounded-full border-2 border-white dark:border-gray-800"> |
|
|
<div class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 border-2 border-white dark:border-gray-800 flex items-center justify-center text-xs font-medium">+5</div> |
|
|
</div> |
|
|
<div class="flex items-center gap-1"> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-500 fill-current"></i> |
|
|
<span class="text-sm font-medium">4.8</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-all duration-200 cursor-pointer group"> |
|
|
<div class="flex items-start justify-between mb-3"> |
|
|
<img src="http://static.photos/education/80x80/43" alt="Activity" class="w-16 h-16 rounded-lg object-cover"> |
|
|
<span class="bg-sa-green/10 text-sa-green px-2 py-1 rounded text-xs font-medium">Offline</span> |
|
|
</div> |
|
|
<h3 class="font-semibold mb-1 group-hover:text-sa-teal transition-colors">Robot Instructions</h3> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Grade 2 • 30 min • Algorithms</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img src="http://static.photos/people/32x32/104" class="w-8 h-8 rounded-full border-2 border-white dark:border-gray-800"> |
|
|
<img src="http://static.photos/people/32x32/105" class="w-8 h-8 rounded-full border-2 border-white dark:border-gray-800"> |
|
|
<div class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 border-2 border-white dark:border-gray-800 flex items-center justify-center text-xs font-medium">+3</div> |
|
|
</div> |
|
|
<div class="flex items-center gap-1"> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-500 fill-current"></i> |
|
|
<span class="text-sm font-medium">4.6</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-all duration-200 cursor-pointer group"> |
|
|
<div class="flex items-start justify-between mb-3"> |
|
|
<img src="http://static.photos/education/80x80/44" alt="Activity" class="w-16 h-16 rounded-lg object-cover"> |
|
|
<span class="bg-sa-orange/10 text-sa-orange px-2 py-1 rounded text-xs font-medium">New</span> |
|
|
</div> |
|
|
<h3 class="font-semibold mb-1 group-hover:text-sa-teal transition-colors">Bug Detective</h3> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Grade 2 • 40 min • Debugging</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">Not started</span> |
|
|
<button class="text-sa-teal hover:text-sa-teal/80 font-medium text-sm">Start →</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6"> |
|
|
<h3 class="font-bold text-lg mb-4">Concept Mastery</h3> |
|
|
<canvas id="masteryChart"></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 Progress</h3> |
|
|
<canvas id="progressChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div id="modalOverlay" class="fixed inset-0 bg-black/50 hidden z-50 flex items-center justify-center p-4"> |
|
|
<div id="modalContent" class="bg-white dark:bg-gray-800 rounded-xl max-w-md w-full p-6 animate-slide-up"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
// Initialize Feather Icons |
|
|
feather.replace(); |
|
|
|
|
|
// Theme Toggle |
|
|
function toggleTheme() { |
|
|
document.documentElement.classList.toggle('dark'); |
|
|
localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); |
|
|
} |
|
|
|
|
|
// Load saved theme |
|
|
if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
|
|
document.documentElement.classList.add('dark'); |
|
|
} |
|
|
|
|
|
// Modal Functions |
|
|
function showModal(content) { |
|
|
document.getElementById('modalContent').innerHTML = content; |
|
|
document.getElementById('modalOverlay').classList.remove('hidden'); |
|
|
feather.replace(); |
|
|
} |
|
|
|
|
|
function closeModal() { |
|
|
document.getElementById('modalOverlay').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function showNewLessonModal() { |
|
|
const content = ` |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h2 class="text-xl font-bold">Create New Lesson</h2> |
|
|
<button onclick="closeModal()" class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> |
|
|
<i data-feather="x" class="w-5 h-5"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Lesson Title</label> |
|
|
<input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-sa-teal" placeholder="e.g., Introduction to Patterns"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Grade Level</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 focus:outline-none focus:ring-2 focus:ring-sa-teal"> |
|
|
<option>Grade R</option> |
|
|
<option selected>Grade 1</option> |
|
|
<option>Grade 2</option> |
|
|
<option>Grade 3</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Duration (minutes)</label> |
|
|
<input type="number" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-sa-teal" placeholder="30"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Concept Focus</label> |
|
|
<div class="grid grid-cols-2 gap-2"> |
|
|
<label class="flex items-center space-x-2 cursor-pointer"> |
|
|
<input type="checkbox" class="rounded text-sa-teal focus:ring-sa-teal"> |
|
|
<span class="text-sm">Sequencing</span> |
|
|
</label> |
|
|
<label class="flex items-center space-x-2 cursor-pointer"> |
|
|
<input type="checkbox" class="rounded text-sa-teal focus:ring-sa-teal"> |
|
|
<span class="text-sm">Patterns</span> |
|
|
</label> |
|
|
<label class="flex items-center space-x-2 cursor-pointer"> |
|
|
<input type="checkbox" class="rounded text-sa-teal focus:ring-sa-teal"> |
|
|
<span class="text-sm">Algorithms</span> |
|
|
</label> |
|
|
<label class="flex items-center space-x-2 cursor-pointer"> |
|
|
<input type="checkbox" class="rounded text-sa-teal focus:ring-sa-teal"> |
|
|
<span class="text-sm">Debugging</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex gap-3 pt-4"> |
|
|
<button onclick="closeModal()" class="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">Cancel</button> |
|
|
<button onclick="createLesson()" class="flex-1 px-4 py-2 bg-sa-teal text-white rounded-lg hover:bg-sa-teal/90 transition-colors">Create Lesson</button> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
showModal(content); |
|
|
} |
|
|
|
|
|
function showProgressModal() { |
|
|
const content = ` |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h2 class="text-xl font-bold">Record Progress</h2> |
|
|
<button onclick="closeModal()" class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> |
|
|
<i data-feather="x" class="w-5 h-5"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Select Activity</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 focus:outline-none focus:ring-2 focus:ring-sa-teal"> |
|
|
<option>Pattern Dance Party</option> |
|
|
<option>Robot Instructions</option> |
|
|
<option>Bug Detective</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Students</label> |
|
|
<div class="max-h-48 overflow-y-auto space-y-2 border border-gray-300 dark:border-gray-600 rounded-lg p-3"> |
|
|
${Array.from({length: 5}, (_, i) => ` |
|
|
<label class="flex items-center space-x-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 p-2 rounded"> |
|
|
<input type="checkbox" class="rounded text-sa-teal focus:ring-sa-teal"> |
|
|
<img src="http://static.photos/people/32x32/${100 + i}" class="w-8 h-8 rounded-full"> |
|
|
<div class="flex-1"> |
|
|
<p class="text-sm font-medium">Student ${i + 1}</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">Grade 2</p> |
|
|
</div> |
|
|
<select class="px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700"> |
|
|
<option>Emerging</option> |
|
|
<option>Developing</option> |
|
|
<option>Proficient</option> |
|
|
<option>Advanced</option> |
|
|
</select> |
|
|
</label> |
|
|
`).join('')} |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Notes (Optional)</label> |
|
|
<textarea class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-sa-teal" rows="3" placeholder="Add observations..."></textarea> |
|
|
</div> |
|
|
<div class="flex gap-3 pt-4"> |
|
|
<button onclick="closeModal()" class="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">Cancel</button> |
|
|
<button onclick="saveProgress()" class="flex-1 px-4 py-2 bg-sa-teal text-white rounded-lg hover:bg-sa-teal/90 transition-colors">Save Progress</button> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
showModal(content); |
|
|
} |
|
|
|
|
|
function createLesson() { |
|
|
closeModal(); |
|
|
showNotification('Lesson created successfully!', 'success'); |
|
|
} |
|
|
|
|
|
function saveProgress() { |
|
|
closeModal(); |
|
|
showNotification('Progress saved and queued for sync', 'success'); |
|
|
} |
|
|
|
|
|
function showNotification(message, type = 'info') { |
|
|
const notification = document.createElement('div'); |
|
|
notification.className = `fixed top-20 right-4 px-6 py-3 rounded-lg shadow-lg z-50 animate-slide-up ${ |
|
|
type === 'success' ? 'bg-green-500 text-white' : |
|
|
type === 'error' ? 'bg-red-500 text-white' : |
|
|
'bg-sa-teal text-white' |
|
|
}`; |
|
|
notification.innerHTML = ` |
|
|
<div class="flex items-center gap-3"> |
|
|
<i data-feather="${type === 'success' ? 'check-circle' : 'info'}" class="w-5 h-5"></i> |
|
|
<span>${message}</span> |
|
|
</div> |
|
|
`; |
|
|
document.body.appendChild(notification); |
|
|
feather.replace(); |
|
|
setTimeout(() => notification.remove(), 3000); |
|
|
} |
|
|
|
|
|
// Initialize Charts |
|
|
const masteryCtx = document.getElementById('masteryChart').getContext('2d'); |
|
|
new Chart(masteryCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['Sequencing', 'Patterns', 'Algorithms', 'Debugging', 'Decomposition'], |
|
|
datasets: [{ |
|
|
label: 'Class Average', |
|
|
data: [85, 92, 78, 70, 88], |
|
|
backgroundColor: 'rgba(0, 128, 128, 0.2)', |
|
|
borderColor: 'rgba(0, 128, 128, 1)', |
|
|
borderWidth: 2 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
max: 100 |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
const progressCtx = document.getElementById('progressChart').getContext('2d'); |
|
|
new Chart(progressCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], |
|
|
datasets: [{ |
|
|
label: 'Activities Completed', |
|
|
data: [2, 3, 1, 4, 3], |
|
|
borderColor: 'rgba(255, 107, 53, 1)', |
|
|
backgroundColor: 'rgba(255, 107, 53, 0.1)', |
|
|
tension: 0.4 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
// Close modal on overlay click |
|
|
document.getElementById('modalOverlay').addEventListener('click', function(e) { |
|
|
if (e.target === this) { |
|
|
closeModal(); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
