|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Resources - 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-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-sa-teal dark:text-sa-teal font-medium 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">Learning Resources</h1> |
|
|
<p class="text-gray-600 dark:text-gray-400">Teaching materials, guides, and computational thinking resources</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8"> |
|
|
<a href="#" class="bg-gradient-to-br from-sa-orange to-sa-orange/80 p-6 rounded-xl text-white hover:shadow-lg transition-all duration-200"> |
|
|
<i data-feather="book" class="w-8 h-8 mb-3"></i> |
|
|
<h3 class="font-bold mb-1">Curriculum Guide</h3> |
|
|
<p class="text-sm opacity-90">Complete teaching framework</p> |
|
|
</a> |
|
|
<a href="#" class="bg-gradient-to-br from-sa-teal to-sa-teal/80 p-6 rounded-xl text-white hover:shadow-lg transition-all duration-200"> |
|
|
<i data-feather="download" class="w-8 h-8 mb-3"></i> |
|
|
<h3 class="font-bold mb-1">Activity Packs</h3> |
|
|
<p class="text-sm opacity-90">Downloadable materials</p> |
|
|
</a> |
|
|
<a href="#" class="bg-gradient-to-br from-sa-purple to-sa-purple/80 p-6 rounded-xl text-white hover:shadow-lg transition-all duration-200"> |
|
|
<i data-feather="video" class="w-8 h-8 mb-3"></i> |
|
|
<h3 class="font-bold mb-1">Video Tutorials</h3> |
|
|
<p class="text-sm opacity-90">Professional development</p> |
|
|
</a> |
|
|
<a href="#" class="bg-gradient-to-br from-sa-yellow to-sa-yellow/80 p-6 rounded-xl text-white hover:shadow-lg transition-all duration-200"> |
|
|
<i data-feather="help-circle" class="w-8 h-8 mb-3"></i> |
|
|
<h3 class="font-bold mb-1">Help Center</h3> |
|
|
<p class="text-sm opacity-90">FAQs and support</p> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center gap-3 mb-4"> |
|
|
<div class="w-12 h-12 bg-sa-orange/10 dark:bg-sa-orange/20 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="book-open" class="w-6 h-6 text-sa-orange"></i> |
|
|
</div> |
|
|
<h2 class="font-bold text-lg">Teaching Guides</h2> |
|
|
</div> |
|
|
<div class="space-y-3"> |
|
|
<a href="#" class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> |
|
|
<div class="flex items-start justify-between"> |
|
|
<div> |
|
|
<h4 class="font-medium text-sm mb-1">Introduction to Computational Thinking</h4> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">PDF • 2.4 MB • Updated 2 days ago</p> |
|
|
</div> |
|
|
<i data-feather="download" class="w-4 h-4 text-gray-400"></i> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> |
|
|
<div class="flex items-start justify-between"> |
|
|
<div> |
|
|
<h4 class="font-medium text-sm mb-1">Assessment Strategies</h4> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">PDF • 1.8 MB • Updated 1 week ago</p> |
|
|
</div> |
|
|
<i data-feather="download" class="w-4 h-4 text-gray-400"></i> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> |
|
|
<div class="flex items-start justify-between"> |
|
|
<div> |
|
|
<h4 class="font-medium text-sm mb-1">Differentiated Instruction</h4> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">PDF • 3.1 MB • Updated 3 days ago</p> |
|
|
</div> |
|
|
<i data-feather="download" class="w-4 h-4 text-gray-400"></i> |
|
|
</div> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center gap-3 mb-4"> |
|
|
<div class="w-12 h-12 bg-sa-teal/10 dark:bg-sa-teal/20 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="layout" class="w-6 h-6 text-sa-teal"></i> |
|
|
</div> |
|
|
<h2 class="font-bold text-lg">Activity Templates</h2> |
|
|
</div> |
|
|
<div class="space-y-3"> |
|
|
<a href="#" class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> |
|
|
<div class="flex items-start justify-between"> |
|
|
<div> |
|
|
<h4 class="font-medium text-sm mb-1">Lesson Plan Template</h4> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">DOCX • 456 KB • Updated yesterday</p> |
|
|
</div> |
|
|
<i data-feather="download" class="w-4 h-4 text-gray-400"></i> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> |
|
|
<div class="flex items-start justify-between"> |
|
|
<div> |
|
|
<h4 class="font-medium text-sm mb-1">Student Worksheet Generator</h4> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">XLSX • 1.2 MB • Updated 4 days ago</p> |
|
|
</div> |
|
|
<i data-feather="download" class="w-4 h-4 text-gray-400"></i> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> |
|
|
<div class="flex items-start justify-between"> |
|
|
<div> |
|
|
<h4 class="font-medium text-sm mb-1">Progress Tracker Template</h4> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">XLSX • 890 KB • Updated 1 week ago</p> |
|
|
</div> |
|
|
<i data-feather="download" class="w-4 h-4 text-gray-400"></i> |
|
|
</div> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center gap-3 mb-4"> |
|
|
<div class="w-12 h-12 bg-sa-purple/10 dark:bg-sa-purple/20 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="award" class="w-6 h-6 text-sa-purple"></i> |
|
|
</div> |
|
|
<h2 class="font-bold text-lg">Professional Development</h2> |
|
|
</div> |
|
|
<div class="space-y-3"> |
|
|
<a href="#" class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> |
|
|
<div class="flex items-start justify-between"> |
|
|
<div> |
|
|
<h4 class="font-medium text-sm mb-1">CT Fundamentals Course</h4> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">Video • 45 min • Self-paced</p> |
|
|
</div> |
|
|
<i data-feather="play-circle" class="w-4 h-4 text-gray-400"></i> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> |
|
|
<div class="flex items-start justify-between"> |
|
|
<div> |
|
|
<h4 class="font-medium text-sm mb-1">Classroom Management Tips</h4> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">Video • 30 min • Self-paced</p> |
|
|
</div> |
|
|
<i data-feather="play-circle" class="w-4 h-4 text-gray-400"></i> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> |
|
|
<div class="flex items-start justify-between"> |
|
|
<div> |
|
|
<h4 class="font-medium text-sm mb-1">Assessment Best Practices</h4> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">Video • 60 min • Self-paced</p> |
|
|
</div> |
|
|
<i data-feather="play-circle" class="w-4 h-4 text-gray-400"></i> |
|
|
</div> |
|
|
</a> |
|
|
</div> |
|
|
</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="font-bold text-lg">Featured Resources</h2> |
|
|
<a href="#" class="text-sa-teal hover:text-sa-teal/80 font-medium text-sm">View All</a> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> |
|
|
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-all duration-200"> |
|
|
<img src="http://static.photos/education/200x120/51" alt="Resource" class="w-full h-32 object-cover rounded-lg mb-3"> |
|
|
<h4 class="font-medium text-sm mb-1">Computational Thinking Handbook</h4> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-3">Comprehensive guide for teachers</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="bg-sa-orange/10 text-sa-orange px-2 py-1 rounded text-xs">Popular</span> |
|
|
<button class="text-sa-teal hover:text-sa-teal/80 text-sm">Download</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-all duration-200"> |
|
|
<img src="http://static.photos/education/200x120/52" alt="Resource" class="w-full h-32 object-cover rounded-lg mb-3"> |
|
|
<h4 class="font-medium text-sm mb-1">Activity Card Set</h4> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-3">Printable activity cards</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="bg-sa-green/10 text-sa-green px-2 py-1 rounded text-xs">New</span> |
|
|
<button class="text-sa-teal hover:text-sa-teal/80 text-sm">Download</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-all duration-200"> |
|
|
<img src="http://static.photos/education/200x120/53" alt="Resource" class="w-full h-32 object-cover rounded-lg mb-3"> |
|
|
<h4 class="font-medium text-sm mb-1">Assessment Rubrics</h4> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-3">Evaluation criteria templates</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="bg-sa-purple/10 text-sa-purple px-2 py-1 rounded text-xs">Premium</span> |
|
|
<button class="text-sa-teal hover:text-sa-teal/80 text-sm">Download</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-all duration-200"> |
|
|
<img src="http://static.photos/education/200x120/54" alt="Resource" class="w-full h-32 object-cover rounded-lg mb-3"> |
|
|
<h4 class="font-medium text-sm mb-1">Parent Guide</h4> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-3">Share with parents</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="bg-sa-yellow/10 text-sa-yellow px-2 py-1 rounded text-xs">Free</span> |
|
|
<button class="text-sa-teal hover:text-sa-teal/80 text-sm">Download</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">Community Contributions</h3> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-start gap-3"> |
|
|
<img src="http://static.photos/people/40x40/201" class="w-10 h-10 rounded-full"> |
|
|
<div class="flex-1"> |
|
|
<div class="flex items-center gap-2 mb-1"> |
|
|
<p class="font-medium text-sm">Mrs. Johnson</p> |
|
|
<span class="bg-sa-green/10 text-sa-green px-2 py-0.5 rounded text-xs">Verified</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Shared "Pattern Recognition Games" activity pack</p> |
|
|
<div class="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400"> |
|
|
<span>2 days ago</span> |
|
|
<span>⭐ 4.9 (23 reviews)</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start gap-3"> |
|
|
<img src="http://static.photos/people/40x40/202" class="w-10 h-10 rounded-full"> |
|
|
<div class="flex-1"> |
|
|
<div class="flex items-center gap-2 mb-1"> |
|
|
<p class="font-medium text-sm">Mr. Patel</p> |
|
|
<span class="bg-sa-green/10 text-sa-green px-2 py-0.5 rounded text-xs">Verified</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Created "Algorithm Building Blocks" worksheet</p> |
|
|
<div class="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400"> |
|
|
<span>1 week ago</span> |
|
|
<span>⭐ 4.7 (18 reviews)</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full mt-4 text-sa-teal hover:text-sa-teal/80 font-medium text-sm">View Community Library →</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6"> |
|
|
<h3 class="font-bold text-lg mb-4">Upcoming Webinars</h3> |
|
|
<div class="space-y-3"> |
|
|
<div class="border-l-4 border-sa-teal pl-4"> |
|
|
<h4 class="font-medium text-sm mb-1">Introduction to AI in Education</h4> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-2">March 15, 2024 • 3:00 PM</p> |
|
|
<button class="text-sa-teal hover:text-sa-teal/80 text-sm font-medium">Register →</button> |
|
|
</div> |
|
|
<div class="border-l-4 border-sa-purple pl-4"> |
|
|
<h4 class="font-medium text-sm mb-1">Assessment Strategies for CT</h4> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-2">March 22, 2024 • 2:00 PM</p> |
|
|
<button class="text-sa-teal hover:text-sa-teal/80 text-sm font-medium">Register →</button> |
|
|
</div> |
|
|
<div class="border-l-4 border-sa-orange pl-4"> |
|
|
<h4 class="font-medium text-sm mb-1">Engaging Young Coders</h4> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-2">March 29, 2024 • 4:00 PM</p> |
|
|
<button class="text-sa-teal hover:text-sa-teal/80 text-sm font-medium">Register →</button> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full mt-4 text-sa-teal hover:text-sa-teal/80 font-medium text-sm">View All Webinars →</button> |
|
|
</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'); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
