|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Activities - SAML LMS</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></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-sa-teal dark:text-sa-teal font-medium 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"> |
|
|
<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 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"></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="flex flex-col md:flex-row md:items-center md:justify-between mb-8"> |
|
|
<div> |
|
|
<h1 class="text-3xl font-bold mb-2">Activity Library</h1> |
|
|
<p class="text-gray-600 dark:text-gray-400">Browse and filter computational thinking activities</p> |
|
|
</div> |
|
|
<button class="mt-4 md:mt-0 bg-sa-teal text-white px-6 py-2 rounded-lg hover:bg-sa-teal/90 transition-colors flex items-center gap-2"> |
|
|
<i data-feather="plus" class="w-4 h-4"></i> Create Activity |
|
|
</button> |
|
|
</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-2 lg:grid-cols-4 gap-4 mb-4"> |
|
|
<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"> |
|
|
<option>All Grades</option> |
|
|
<option>Grade R</option> |
|
|
<option>Grade 1</option> |
|
|
<option>Grade 2</option> |
|
|
<option>Grade 3</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Concept</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> |
|
|
<option>Decomposition</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Duration</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>Any Duration</option> |
|
|
<option>Under 30 min</option> |
|
|
<option>30-45 min</option> |
|
|
<option>45-60 min</option> |
|
|
<option>Over 60 min</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Difficulty</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 Levels</option> |
|
|
<option>Beginner</option> |
|
|
<option>Intermediate</option> |
|
|
<option>Advanced</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex flex-col md:flex-row gap-4"> |
|
|
<div class="flex-1 relative"> |
|
|
<i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"></i> |
|
|
<input type="text" placeholder="Search activities..." class="w-full pl-10 pr-4 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"> |
|
|
</div> |
|
|
<div class="flex gap-2"> |
|
|
<button class="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 flex items-center gap-2"> |
|
|
<i data-feather="filter" class="w-4 h-4"></i> More Filters |
|
|
</button> |
|
|
<button class="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 flex items-center gap-2"> |
|
|
<i data-feather="download" class="w-4 h-4"></i> Download Selected |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 overflow-hidden group"> |
|
|
<div class="relative"> |
|
|
<img src="http://static.photos/education/400x200/45" alt="Activity" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-3 left-3 flex gap-2"> |
|
|
<span class="bg-sa-green/10 text-sa-green px-2 py-1 rounded text-xs font-medium">Offline</span> |
|
|
<span class="bg-sa-orange/10 text-sa-orange px-2 py-1 rounded text-xs font-medium">Grade 2</span> |
|
|
</div> |
|
|
<div class="absolute top-3 right-3"> |
|
|
<button class="p-2 bg-white/90 dark:bg-gray-800/90 rounded-lg hover:bg-white dark:hover:bg-gray-800 transition-colors"> |
|
|
<i data-feather="bookmark" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-lg mb-2 group-hover:text-sa-teal transition-colors">Pattern Dance Party</h3> |
|
|
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Students create and follow dance patterns to understand sequencing and repetition in computational thinking.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-xs">Sequencing</span> |
|
|
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-xs">Patterns</span> |
|
|
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-xs">45 min</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center gap-1"> |
|
|
<i data-feather="clock" class="w-4 h-4 text-gray-400"></i> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">45 minutes</span> |
|
|
</div> |
|
|
<button class="text-sa-teal hover:text-sa-teal/80 font-medium text-sm">View Details →</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 overflow-hidden group"> |
|
|
<div class="relative"> |
|
|
<img src="http://static.photos/education/400x200/46" alt="Activity" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-3 left-3 flex gap-2"> |
|
|
<span class="bg-sa-green/10 text-sa-green px-2 py-1 rounded text-xs font-medium">Offline</span> |
|
|
<span class="bg-sa-purple/10 text-sa-purple px-2 py-1 rounded text-xs font-medium">Grade 3</span> |
|
|
</div> |
|
|
<div class="absolute top-3 right-3"> |
|
|
<button class="p-2 bg-white/90 dark:bg-gray-800/90 rounded-lg hover:bg-white dark:hover:bg-gray-800 transition-colors"> |
|
|
<i data-feather="bookmark" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-lg mb-2 group-hover:text-sa-teal transition-colors">Robot Instructions</h3> |
|
|
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Guide a "robot" (classmate) through an obstacle course using precise step-by-step instructions.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-xs">Algorithms</span> |
|
|
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-xs">Debugging</span> |
|
|
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-xs">30 min</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center gap-1"> |
|
|
<i data-feather="clock" class="w-4 h-4 text-gray-400"></i> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">30 minutes</span> |
|
|
</div> |
|
|
<button class="text-sa-teal hover:text-sa-teal/80 font-medium text-sm">View Details →</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 overflow-hidden group"> |
|
|
<div class="relative"> |
|
|
<img src="http://static.photos/education/400x200/47" alt="Activity" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-3 left-3 flex gap-2"> |
|
|
<span class="bg-sa-green/10 text-sa-green px-2 py-1 rounded text-xs font-medium">Offline</span> |
|
|
<span class="bg-sa-yellow/10 text-sa-yellow px-2 py-1 rounded text-xs font-medium">Grade 1</span> |
|
|
</div> |
|
|
<div class="absolute top-3 right-3"> |
|
|
<button class="p-2 bg-white/90 dark:bg-gray-800/90 rounded-lg hover:bg-white dark:hover:bg-gray-800 transition-colors"> |
|
|
<i data-feather="bookmark" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-lg mb-2 group-hover:text-sa-teal transition-colors">Bug Detective</h3> |
|
|
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Find and fix mistakes in simple sequences to develop debugging skills and attention to detail.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-xs">Debugging</span> |
|
|
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-xs">Problem Solving</span> |
|
|
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-xs">40 min</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center gap-1"> |
|
|
<i data-feather="clock" class="w-4 h-4 text-gray-400"></i> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">40 minutes</span> |
|
|
</div> |
|
|
<button class="text-sa-teal hover:text-sa-teal/80 font-medium text-sm">View Details →</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 overflow-hidden group"> |
|
|
<div class="relative"> |
|
|
<img src="http://static.photos/education/400x200/48" alt="Activity" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-3 left-3 flex gap-2"> |
|
|
<span class="bg-sa-green/10 text-sa-green px-2 py-1 rounded text-xs font-medium">Offline</span> |
|
|
<span class="bg-sa-blue/10 text-sa-blue px-2 py-1 rounded text-xs font-medium">Grade R</span> |
|
|
</div> |
|
|
<div class="absolute top-3 right-3"> |
|
|
<button class="p-2 bg-white/90 dark:bg-gray-800/90 rounded-lg hover:bg-white dark:hover:bg-gray-800 transition-colors"> |
|
|
<i data-feather="bookmark" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-lg mb-2 group-hover:text-sa-teal transition-colors">Story Sequence</h3> |
|
|
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Arrange picture cards to tell a story in the correct order, building sequencing skills.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-xs">Sequencing</span> |
|
|
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-xs">Storytelling</span> |
|
|
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-xs">25 min</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center gap-1"> |
|
|
<i data-feather="clock" class="w-4 h-4 text-gray-400"></i> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">25 minutes</span> |
|
|
</div> |
|
|
<button class="text-sa-teal hover:text-sa-teal/80 font-medium text-sm">View Details →</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 overflow-hidden group"> |
|
|
<div class="relative"> |
|
|
<img src="http://static.photos/education/400x200/49" alt="Activity" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-3 left-3 flex gap-2"> |
|
|
<span class="bg-sa-green/10 text-sa-green px-2 py-1 rounded text-xs font-medium">Offline</span> |
|
|
<span class="bg-sa-red/10 text-sa-red px-2 py-1 rounded text-xs font-medium">Grade 3</span> |
|
|
</div> |
|
|
<div class="absolute top-3 right-3"> |
|
|
<button class="p-2 bg-white/90 dark:bg-gray-800/90 rounded-lg hover:bg-white dark:hover:bg-gray-800 transition-colors"> |
|
|
<i data-feather="bookmark" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-lg mb-2 group-hover:text-sa-teal transition-colors">Break It Down</h3> |
|
|
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Practice decomposition by breaking complex tasks into smaller, manageable steps.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-xs">Decomposition</span> |
|
|
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-xs">Planning</span> |
|
|
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-xs">35 min</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center gap-1"> |
|
|
<i data-feather="clock" class="w-4 h-4 text-gray-400"></i> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">35 minutes</span> |
|
|
</div> |
|
|
<button class="text-sa-teal hover:text-sa-teal/80 font-medium text-sm">View Details →</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 overflow-hidden group"> |
|
|
<div class="relative"> |
|
|
<img src="http://static.photos/education/400x200/50" alt="Activity" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-3 left-3 flex gap-2"> |
|
|
<span class="bg-sa-orange/10 text-sa-orange px-2 py-1 rounded text-xs font-medium">New</span> |
|
|
<span class="bg-sa-purple/10 text-sa-purple px-2 py-1 rounded text-xs font-medium">Grade 2</span> |
|
|
</div> |
|
|
<div class="absolute top-3 right-3"> |
|
|
<button class="p-2 bg-white/90 dark:bg-gray-800/90 rounded-lg hover:bg-white dark:hover:bg-gray-800 transition-colors"> |
|
|
<i data-feather="bookmark" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-lg mb-2 group-hover:text-sa-teal transition-colors">Binary Bracelets</h3> |
|
|
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Create bracelets using beads to represent binary patterns and understand how computers store information.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-xs">Binary</span> |
|
|
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-xs">Patterns</span> |
|
|
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-xs">50 min</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center gap-1"> |
|
|
<i data-feather="clock" class="w-4 h-4 text-gray-400"></i> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">50 minutes</span> |
|
|
</div> |
|
|
<button class="text-sa-teal hover:text-sa-teal/80 font-medium text-sm">View Details →</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center justify-between mt-8"> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">Showing 6 of 24 activities</p> |
|
|
<div class="flex gap-2"> |
|
|
<button class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> |
|
|
<i data-feather="chevron-left" class="w-4 h-4"></i> |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-sa-teal text-white rounded-lg">1</button> |
|
|
<button class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">2</button> |
|
|
<button class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">3</button> |
|
|
<button class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> |
|
|
<i data-feather="chevron-right" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
