Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Parent 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-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">Teacher Portal</a> | |
| <a href="parent.html" class="border-indigo-500 text-gray-900 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">View Weekly Lesson Plans</h2> | |
| <form id="viewForm" class="space-y-6"> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2"> | |
| <div> | |
| <label for="viewWeekNumber" class="block text-sm font-medium text-gray-700">Week Number</label> | |
| <select id="viewWeekNumber" name="viewWeekNumber" 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="viewClassName" class="block text-sm font-medium text-gray-700">Class Name</label> | |
| <input type="text" id="viewClassName" name="viewClassName" 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"> | |
| View Plans | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="mt-8" id="plansContainer"> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-6">Weekly Lesson Plans</h2> | |
| <div class="bg-white shadow overflow-hidden sm:rounded-lg"> | |
| <div id="plansList" class="divide-y divide-gray-200"> | |
| <!-- Lesson plans will be dynamically inserted here --> | |
| <div class="p-6 text-center text-gray-500"> | |
| Select a week and class to view lesson plans | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| AOS.init(); | |
| feather.replace(); | |
| // Form submission handler | |
| document.getElementById('viewForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const weekNumber = document.getElementById('viewWeekNumber').value; | |
| const className = document.getElementById('viewClassName').value; | |
| if (!weekNumber || !className) { | |
| alert('Please select both week number and class name'); | |
| return; | |
| } | |
| displayLessonPlans(weekNumber, className); | |
| }); | |
| function displayLessonPlans(weekNumber, className) { | |
| const lessonPlans = JSON.parse(localStorage.getItem('lessonPlans')) || []; | |
| const filteredPlans = lessonPlans.filter(plan => | |
| plan.weekNumber === weekNumber && plan.className.toLowerCase() === className.toLowerCase() | |
| ); | |
| const plansList = document.getElementById('plansList'); | |
| if (filteredPlans.length === 0) { | |
| plansList.innerHTML = ` | |
| <div class="p-6 text-center text-gray-500"> | |
| No lesson plans found for Week ${weekNumber} and Class ${className} | |
| </div> | |
| `; | |
| return; | |
| } | |
| plansList.innerHTML = ''; | |
| filteredPlans.forEach(plan => { | |
| const planElement = document.createElement('div'); | |
| planElement.className = 'p-6'; | |
| planElement.innerHTML = ` | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900">${plan.subjectName} - Lesson ${plan.lessonNumber}</h3> | |
| <p class="mt-1 text-sm text-gray-500">Week ${plan.weekNumber} | Class ${plan.className}</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <h4 class="text-sm font-medium text-gray-700">Materials:</h4> | |
| <p class="mt-1 text-sm text-gray-600">${plan.materials}</p> | |
| </div> | |
| <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2"> | |
| <div> | |
| <h4 class="text-sm font-medium text-gray-700">Textbook Pages:</h4> | |
| <p class="mt-1 text-sm text-gray-600">${plan.textbookPages || 'N/A'}</p> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-medium text-gray-700">Quiz:</h4> | |
| <p class="mt-1 text-sm text-gray-600">${plan.quiz || 'N/A'}</p> | |
| </div> | |
| </div> | |
| `; | |
| plansList.appendChild(planElement); | |
| }); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |