|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Tools - 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-sa-teal dark:text-sa-teal font-medium 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 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">Teaching Tools</h1> |
|
|
<p class="text-gray-600 dark:text-gray-400">Interactive tools to enhance your computational thinking lessons</p> |
|
|
</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 p-6 hover:shadow-md transition-all duration-200"> |
|
|
<div class="flex items-center justify-between 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="clock" class="w-6 h-6 text-sa-orange"></i> |
|
|
</div> |
|
|
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs font-medium">Ready</span> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Activity Timer</h3> |
|
|
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Set countdown timers for activities and transitions</p> |
|
|
<div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-4"> |
|
|
<div class="text-center"> |
|
|
<div class="text-3xl font-bold text-sa-teal mb-2" id="timerDisplay">05:00</div> |
|
|
<div class="flex gap-2 justify-center"> |
|
|
<button onclick="startTimer()" class="px-3 py-1 bg-sa-green text-white rounded text-sm">Start</button> |
|
|
<button onclick="pauseTimer()" class="px-3 py-1 bg-sa-yellow text-white rounded text-sm">Pause</button> |
|
|
<button onclick="resetTimer()" class="px-3 py-1 bg-sa-red text-white rounded text-sm">Reset</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full text-sa-teal hover:text-sa-teal/80 font-medium text-sm">Open Tool →</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 hover:shadow-md transition-all duration-200"> |
|
|
<div class="flex items-center justify-between 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="users" class="w-6 h-6 text-sa-purple"></i> |
|
|
</div> |
|
|
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs font-medium">Ready</span> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Random Name Picker</h3> |
|
|
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Fairly select students for activities and participation</p> |
|
|
<div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-4"> |
|
|
<div class="text-center"> |
|
|
<div class="text-xl font-bold text-sa-purple mb-2" id="nameDisplay">Click to pick</div> |
|
|
<button onclick="pickRandomName()" class="px-4 py-2 bg-sa-purple text-white rounded text-sm">Pick Student</button> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full text-sa-teal hover:text-sa-teal/80 font-medium text-sm">Open Tool →</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 hover:shadow-md transition-all duration-200"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<div class="w-12 h-12 bg-sa-yellow/10 dark:bg-sa-yellow/20 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="award" class="w-6 h-6 text-sa-yellow"></i> |
|
|
</div> |
|
|
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs font-medium">Ready</span> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Team Scoreboard</h3> |
|
|
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Track team points during competitive activities</p> |
|
|
<div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-4"> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm">Team A</span> |
|
|
<span class="font-bold text-sa-yellow">0</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm">Team B</span> |
|
|
<span class="font-bold text-sa-yellow">0</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full text-sa-teal hover:text-sa-teal/80 font-medium text-sm">Open Tool →</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 hover:shadow-md transition-all duration-200"> |
|
|
<div class="flex items-center justify-between 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="grid" class="w-6 h-6 text-sa-teal"></i> |
|
|
</div> |
|
|
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs font-medium">Ready</span> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Pattern Generator</h3> |
|
|
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Create visual patterns for pattern recognition activities</p> |
|
|
<div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-4"> |
|
|
<div class="grid grid-cols-4 gap-1"> |
|
|
${Array.from({length: 16}, (_, i) => |
|
|
`<div class="w-8 h-8 bg-${i % 3 === 0 ? 'sa-teal' : i % 3 === 1 ? 'sa-orange' : 'sa-purple'}/20 rounded"></div>` |
|
|
).join('')} |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full text-sa-teal hover:text-sa-teal/80 font-medium text-sm">Open Tool →</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 hover:shadow-md transition-all duration-200"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<div class="w-12 h-12 bg-sa-red/10 dark:bg-sa-red/20 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="volume-2" class="w-6 h-6 text-sa-red"></i> |
|
|
</div> |
|
|
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs font-medium">Ready</span> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Sound Effects</h3> |
|
|
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Play sounds for transitions, correct answers, and celebrations</p> |
|
|
<div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-4"> |
|
|
<div class="grid grid-cols-2 gap-2"> |
|
|
<button class="px-2 py-1 bg-sa-green text-white rounded text-xs">Correct</button> |
|
|
<button class="px-2 py-1 bg-sa-red text-white rounded text-xs">Wrong</button> |
|
|
<button class="px-2 py-1 bg-sa-yellow text-white rounded text-xs">Time Up</button> |
|
|
<button class="px-2 py-1 bg-sa-purple text-white rounded text-xs">Celebrate</button> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full text-sa-teal hover:text-sa-teal/80 font-medium text-sm">Open Tool →</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 hover:shadow-md transition-all duration-200"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<div class="w-12 h-12 bg-sa-blue/10 dark:bg-sa-blue/20 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="grid" class="w-6 h-6 text-sa-blue"></i> |
|
|
</div> |
|
|
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs font-medium">Ready</span> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">QR Code Generator</h3> |
|
|
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Create QR codes for quick access to activities and resources</p> |
|
|
<div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-4"> |
|
|
<div class="w-24 h-24 bg-gray-300 dark:bg-gray-600 mx-auto rounded"></div> |
|
|
</div> |
|
|
<button class="w-full text-sa-teal hover:text-sa-teal/80 font-medium text-sm">Open Tool →</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-12"> |
|
|
<h2 class="text-2xl font-bold mb-6">Tool Categories</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center gap-3 mb-3"> |
|
|
<div class="w-10 h-10 bg-sa-orange/10 dark:bg-sa-orange/20 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="zap" class="w-5 h-5 text-sa-orange"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold">Classroom Management</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Tools for managing classroom activities and student engagement</p> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center gap-2 text-sm"> |
|
|
<i data-feather="check" class="w-4 h-4 text-green-500"></i> |
|
|
<span>Timer & Alarms</span> |
|
|
</div> |
|
|
<div class="flex items-center gap-2 text-sm"> |
|
|
<i data-feather="check" class="w-4 h-4 text-green-500"></i> |
|
|
<span>Random Name Picker</span> |
|
|
</div> |
|
|
<div class="flex items-center gap-2 text-sm"> |
|
|
<i data-feather="check" class="w-4 h-4 text-green-500"></i> |
|
|
<span>Seating Chart</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center gap-3 mb-3"> |
|
|
<div class="w-10 h-10 bg-sa-teal/10 dark:bg-sa-teal/20 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="code" class="w-5 h-5 text-sa-teal"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold">Learning Activities</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Interactive tools for computational thinking exercises</p> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center gap-2 text-sm"> |
|
|
<i data-feather="check" class="w-4 h-4 text-green-500"></i> |
|
|
<span>Pattern Generator</span> |
|
|
</div> |
|
|
<div class="flex items-center gap-2 text-sm"> |
|
|
<i data-feather="check" class="w-4 h-4 text-green-500"></i> |
|
|
<span>Algorithm Builder</span> |
|
|
</div> |
|
|
<div class="flex items-center gap-2 text-sm"> |
|
|
<i data-feather="check" class="w-4 h-4 text-green-500"></i> |
|
|
<span>Debug Simulator</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center gap-3 mb-3"> |
|
|
<div class="w-10 h-10 bg-sa-purple/10 dark:bg-sa-purple/20 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="bar-chart" class="w-5 h-5 text-sa-purple"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold">Assessment Tools</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Tools for tracking progress and providing feedback</p> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center gap-2 text-sm"> |
|
|
<i data-feather="check" class="w-4 h-4 text-green-500"></i> |
|
|
<span>Quick Polls</span> |
|
|
</div> |
|
|
<div class="flex items-center gap-2 text-sm"> |
|
|
<i data-feather="check" class="w-4 h-4 text-green-500"></i> |
|
|
<span>Score Tracker</span> |
|
|
</div> |
|
|
<div class="flex items-center gap-2 text-sm"> |
|
|
<i data-feather="check" class="w-4 h-4 text-green-500"></i> |
|
|
<span>Progress Charts</span> |
|
|
</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'); |
|
|
} |
|
|
|
|
|
|
|
|
let timerInterval; |
|
|
let timerSeconds = 300; |
|
|
|
|
|
function startTimer() { |
|
|
clearInterval(timerInterval); |
|
|
timerInterval = setInterval(() => { |
|
|
if (timerSeconds > 0) { |
|
|
timerSeconds--; |
|
|
updateTimerDisplay(); |
|
|
} else { |
|
|
clearInterval(timerInterval); |
|
|
alert('Time\'s up!'); |
|
|
} |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
function pauseTimer() { |
|
|
clearInterval(timerInterval); |
|
|
} |
|
|
|
|
|
function resetTimer() { |
|
|
clearInterval(timerInterval); |
|
|
timerSeconds = 300; |
|
|
updateTimerDisplay(); |
|
|
} |
|
|
|
|
|
function updateTimerDisplay() { |
|
|
const minutes = Math.floor(timerSeconds / 60); |
|
|
const seconds = timerSeconds % 60; |
|
|
document.getElementById('timerDisplay').textContent = |
|
|
`${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; |
|
|
} |
|
|
|
|
|
|
|
|
const studentNames = ['Amina', 'Bongani', 'Catherine', 'David', 'Elena', 'Fikile', 'Grace', 'Harish', 'Isabella', 'Jabulani']; |
|
|
|
|
|
function pickRandomName() { |
|
|
const randomName = studentNames[Math.floor(Math.random() * studentNames.length)]; |
|
|
document.getElementById('nameDisplay').textContent = randomName; |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
