Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Teacher Portal - EduPlan</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .transition-all { | |
| transition: all 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <i data-feather="book-open" class="text-indigo-600 mr-2"></i> | |
| <span class="text-xl font-bold text-indigo-600">EduPlan</span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> | |
| <a href="teacher.html" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Teacher Portal</a> | |
| <a href="parent.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Parent Portal</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8"> | |
| <div class="px-4 py-6 sm:px-0"> | |
| <div class="border-4 border-dashed border-gray-200 rounded-lg p-6"> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-6">Create New Lesson Plan</h2> | |
| <form id="lessonForm" class="space-y-6"> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-3"> | |
| <div> | |
| <label for="weekNumber" class="block text-sm font-medium text-gray-700">Week Number</label> | |
| <select id="weekNumber" name="weekNumber" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"> | |
| <option value="">Select Week</option> | |
| <option value="1">Week 1</option> | |
| <option value="2">Week 2</option> | |
| <option value="3">Week 3</option> | |
| <option value="4">Week 4</option> | |
| <option value="5">Week 5</option> | |
| <option value="6">Week 6</option> | |
| <option value="7">Week 7</option> | |
| <option value="8">Week 8</option> | |
| <option value="9">Week 9</option> | |
| <option value="10">Week 10</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="lessonDay" class="block text-sm font-medium text-gray-700">Day</label> | |
| <select id="lessonDay" name="lessonDay" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"> | |
| <option value="">Select Day</option> | |
| <option value="Sunday">Sunday</option> | |
| <option value="Monday">Monday</option> | |
| <option value="Tuesday">Tuesday</option> | |
| <option value="Wednesday">Wednesday</option> | |
| <option value="Thursday">Thursday</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="lessonNumber" class="block text-sm font-medium text-gray-700">Lesson Number</label> | |
| <input type="number" id="lessonNumber" name="lessonNumber" class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2"> | |
| <div> | |
| <label for="subjectName" class="block text-sm font-medium text-gray-700">Subject Name</label> | |
| <input type="text" id="subjectName" name="subjectName" class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"> | |
| </div> | |
| <div> | |
| <label for="className" class="block text-sm font-medium text-gray-700">Class Name</label> | |
| <input type="text" id="className" name="className" class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="materials" class="block text-sm font-medium text-gray-700">Materials to be Studied</label> | |
| <textarea id="materials" name="materials" rows="3" class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"></textarea> | |
| </div> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2"> | |
| <div> | |
| <label for="textbookPages" class="block text-sm font-medium text-gray-700">Textbook Page Numbers</label> | |
| <input type="text" id="textbookPages" name="textbookPages" class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"> | |
| </div> | |
| <div> | |
| <label for="quiz" class="block text-sm font-medium text-gray-700">Quiz (if applicable)</label> | |
| <input type="text" id="quiz" name="quiz" class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"> | |
| </div> | |
| </div> | |
| <div class="flex justify-end"> | |
| <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Save Lesson Plan | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="mt-8"> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-6">Saved Lesson Plans</h2> | |
| <div class="bg-white shadow overflow-hidden sm:rounded-lg"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Week</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Day</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Lesson</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subject</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Class</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody id="lessonPlansTable" class="bg-white divide-y divide-gray-200"> | |
| <!-- Lesson plans will be dynamically inserted here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| AOS.init(); | |
| feather.replace(); | |
| // Load saved lesson plans from localStorage | |
| loadLessonPlans(); | |
| // Form submission handler | |
| document.getElementById('lessonForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const lessonPlan = { | |
| weekNumber: document.getElementById('weekNumber').value, | |
| lessonDay: document.getElementById('lessonDay').value, | |
| lessonNumber: document.getElementById('lessonNumber').value, | |
| subjectName: document.getElementById('subjectName').value, | |
| className: document.getElementById('className').value, | |
| materials: document.getElementById('materials').value, | |
| textbookPages: document.getElementById('textbookPages').value, | |
| quiz: document.getElementById('quiz').value, | |
| id: Date.now() // Unique ID for each lesson plan | |
| }; | |
| saveLessonPlan(lessonPlan); | |
| this.reset(); | |
| loadLessonPlans(); | |
| }); | |
| function saveLessonPlan(lessonPlan) { | |
| let lessonPlans = JSON.parse(localStorage.getItem('lessonPlans')) || []; | |
| lessonPlans.push(lessonPlan); | |
| localStorage.setItem('lessonPlans', JSON.stringify(lessonPlans)); | |
| } | |
| function loadLessonPlans() { | |
| const lessonPlans = JSON.parse(localStorage.getItem('lessonPlans')) || []; | |
| const tableBody = document.getElementById('lessonPlansTable'); | |
| tableBody.innerHTML = ''; | |
| lessonPlans.forEach(plan => { | |
| const row = document.createElement('tr'); | |
| row.innerHTML = ` | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${plan.weekNumber}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${plan.lessonDay}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${plan.lessonNumber}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${plan.subjectName}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${plan.className}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button onclick="viewLessonPlan(${plan.id})" class="text-indigo-600 hover:text-indigo-900 mr-3">View</button> | |
| <button onclick="editLessonPlan(${plan.id})" class="text-yellow-600 hover:text-yellow-900 mr-3">Edit</button> | |
| <button onclick="deleteLessonPlan(${plan.id})" class="text-red-600 hover:text-red-900">Delete</button> | |
| </td> | |
| `; | |
| tableBody.appendChild(row); | |
| }); | |
| } | |
| window.viewLessonPlan = function(id) { | |
| const lessonPlans = JSON.parse(localStorage.getItem('lessonPlans')) || []; | |
| const plan = lessonPlans.find(p => p.id === id); | |
| if (plan) { | |
| alert(`Week ${plan.weekNumber}, Lesson ${plan.lessonNumber}\nSubject: ${plan.subjectName}\nClass: ${plan.className}\nMaterials: ${plan.materials}\nTextbook Pages: ${plan.textbookPages}\nQuiz: ${plan.quiz || 'N/A'}`); | |
| } | |
| }; | |
| window.deleteLessonPlan = function(id) { | |
| let lessonPlans = JSON.parse(localStorage.getItem('lessonPlans')) || []; | |
| lessonPlans = lessonPlans.filter(p => p.id !== id); | |
| localStorage.setItem('lessonPlans', JSON.stringify(lessonPlans)); | |
| loadLessonPlans(); | |
| }; | |
| window.editLessonPlan = function(id) { | |
| const lessonPlans = JSON.parse(localStorage.getItem('lessonPlans')) || []; | |
| const plan = lessonPlans.find(p => p.id === id); | |
| if (plan) { | |
| document.getElementById('weekNumber').value = plan.weekNumber; | |
| document.getElementById('lessonDay').value = plan.lessonDay; | |
| document.getElementById('lessonNumber').value = plan.lessonNumber; | |
| document.getElementById('subjectName').value = plan.subjectName; | |
| document.getElementById('className').value = plan.className; | |
| document.getElementById('materials').value = plan.materials; | |
| document.getElementById('textbookPages').value = plan.textbookPages; | |
| document.getElementById('quiz').value = plan.quiz; | |
| // Remove the old plan | |
| let updatedPlans = lessonPlans.filter(p => p.id !== id); | |
| localStorage.setItem('lessonPlans', JSON.stringify(updatedPlans)); | |
| // Scroll to form | |
| document.getElementById('lessonForm').scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| }; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |