Hugging Face's logo

Spaces:
enzostvs
/
deepsite
Running

App Files Community
375

Upload 4 files

#370
by ashrafElbialy - opened
base: refs/heads/main
←
from: refs/pr/370
Discussion Files changed
+595
-0
Files changed (4) hide show
  1. index.html +160 -0
  2. parent.html +164 -0
  3. style.css +28 -0
  4. teacher.html +243 -0
index.html ADDED
@@ -0,0 +1,160 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>EduPlan - Lesson Planner</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ .gradient-bg {
14
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
15
+ }
16
+ .card-hover:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+ .transition-all {
21
+ transition: all 0.3s ease;
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="bg-gray-50">
26
+ <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-20"></div>
27
+
28
+ <nav class="bg-white shadow-sm">
29
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
30
+ <div class="flex justify-between h-16">
31
+ <div class="flex items-center">
32
+ <i data-feather="book-open" class="text-indigo-600 mr-2"></i>
33
+ <span class="text-xl font-bold text-indigo-600">EduPlan</span>
34
+ </div>
35
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
36
+ <a href="index.html" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
37
+ <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>
38
+ <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>
39
+ </div>
40
+ <div class="-mr-2 flex items-center sm:hidden">
41
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
42
+ <i data-feather="menu"></i>
43
+ </button>
44
+ </div>
45
+ </div>
46
+ </div>
47
+
48
+ <div class="sm:hidden" id="mobile-menu">
49
+ <div class="pt-2 pb-3 space-y-1">
50
+ <a href="index.html" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
51
+ <a href="teacher.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Teacher Portal</a>
52
+ <a href="parent.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Parent Portal</a>
53
+ </div>
54
+ </div>
55
+ </nav>
56
+
57
+ <main>
58
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
59
+ <div class="text-center">
60
+ <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl md:text-6xl" data-aos="fade-down">
61
+ <span class="block">Streamline Your</span>
62
+ <span class="block text-indigo-600">Lesson Planning</span>
63
+ </h1>
64
+ <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl" data-aos="fade-up" data-aos-delay="100">
65
+ A comprehensive solution for teachers to plan lessons and for parents to stay informed.
66
+ </p>
67
+ <div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8" data-aos="fade-up" data-aos-delay="200">
68
+ <div class="rounded-md shadow">
69
+ <a href="teacher.html" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10">
70
+ Teacher Portal
71
+ </a>
72
+ </div>
73
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
74
+ <a href="parent.html" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
75
+ Parent Portal
76
+ </a>
77
+ </div>
78
+ </div>
79
+ </div>
80
+
81
+ <div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
82
+ <div class="bg-white overflow-hidden shadow rounded-lg transition-all card-hover" data-aos="fade-up" data-aos-delay="100">
83
+ <div class="px-4 py-5 sm:p-6">
84
+ <div class="flex items-center">
85
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
86
+ <i data-feather="calendar" class="text-white"></i>
87
+ </div>
88
+ <div class="ml-5 w-0 flex-1">
89
+ <h3 class="text-lg font-medium text-gray-900">Weekly Planning</h3>
90
+ <p class="mt-1 text-sm text-gray-500">Organize lessons by week for better curriculum management.</p>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+
96
+ <div class="bg-white overflow-hidden shadow rounded-lg transition-all card-hover" data-aos="fade-up" data-aos-delay="200">
97
+ <div class="px-4 py-5 sm:p-6">
98
+ <div class="flex items-center">
99
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
100
+ <i data-feather="book" class="text-white"></i>
101
+ </div>
102
+ <div class="ml-5 w-0 flex-1">
103
+ <h3 class="text-lg font-medium text-gray-900">Subject Tracking</h3>
104
+ <p class="mt-1 text-sm text-gray-500">Manage multiple subjects with detailed lesson plans.</p>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <div class="bg-white overflow-hidden shadow rounded-lg transition-all card-hover" data-aos="fade-up" data-aos-delay="300">
111
+ <div class="px-4 py-5 sm:p-6">
112
+ <div class="flex items-center">
113
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
114
+ <i data-feather="users" class="text-white"></i>
115
+ </div>
116
+ <div class="ml-5 w-0 flex-1">
117
+ <h3 class="text-lg font-medium text-gray-900">Parent Access</h3>
118
+ <p class="mt-1 text-sm text-gray-500">Parents can view weekly plans for their children.</p>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </main>
126
+
127
+ <footer class="bg-white">
128
+ <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
129
+ <p class="mt-8 text-center text-base text-gray-400">
130
+ &copy; 2023 EduPlan. All rights reserved.
131
+ </p>
132
+ </div>
133
+ </footer>
134
+
135
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
136
+ <script>
137
+ VANTA.GLOBE({
138
+ el: "#vanta-bg",
139
+ mouseControls: true,
140
+ touchControls: true,
141
+ gyroControls: false,
142
+ minHeight: 200.00,
143
+ minWidth: 200.00,
144
+ scale: 1.00,
145
+ scaleMobile: 1.00,
146
+ color: 0x5b6ee1,
147
+ backgroundColor: 0xf8fafc,
148
+ size: 0.80
149
+ });
150
+ </script>
151
+ <script>AOS.init();</script>
152
+ <script>feather.replace();</script>
153
+ <script>
154
+ document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() {
155
+ const menu = document.getElementById('mobile-menu');
156
+ menu.classList.toggle('hidden');
157
+ });
158
+ </script>
159
+ </body>
160
+ </html>
parent.html ADDED
@@ -0,0 +1,164 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Parent Portal - EduPlan</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ .gradient-bg {
14
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
15
+ }
16
+ .card-hover:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+ .transition-all {
21
+ transition: all 0.3s ease;
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="bg-gray-50">
26
+ <nav class="bg-white shadow-sm">
27
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
28
+ <div class="flex justify-between h-16">
29
+ <div class="flex items-center">
30
+ <i data-feather="book-open" class="text-indigo-600 mr-2"></i>
31
+ <span class="text-xl font-bold text-indigo-600">EduPlan</span>
32
+ </div>
33
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
34
+ <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>
35
+ <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>
36
+ <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>
37
+ </div>
38
+ </div>
39
+ </div>
40
+ </nav>
41
+
42
+ <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
43
+ <div class="px-4 py-6 sm:px-0">
44
+ <div class="border-4 border-dashed border-gray-200 rounded-lg p-6">
45
+ <h2 class="text-2xl font-bold text-gray-900 mb-6">View Weekly Lesson Plans</h2>
46
+
47
+ <form id="viewForm" class="space-y-6">
48
+ <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
49
+ <div>
50
+ <label for="viewWeekNumber" class="block text-sm font-medium text-gray-700">Week Number</label>
51
+ <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">
52
+ <option value="">Select Week</option>
53
+ <option value="1">Week 1</option>
54
+ <option value="2">Week 2</option>
55
+ <option value="3">Week 3</option>
56
+ <option value="4">Week 4</option>
57
+ <option value="5">Week 5</option>
58
+ <option value="6">Week 6</option>
59
+ <option value="7">Week 7</option>
60
+ <option value="8">Week 8</option>
61
+ <option value="9">Week 9</option>
62
+ <option value="10">Week 10</option>
63
+ </select>
64
+ </div>
65
+
66
+ <div>
67
+ <label for="viewClassName" class="block text-sm font-medium text-gray-700">Class Name</label>
68
+ <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">
69
+ </div>
70
+ </div>
71
+
72
+ <div class="flex justify-end">
73
+ <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">
74
+ View Plans
75
+ </button>
76
+ </div>
77
+ </form>
78
+ </div>
79
+
80
+ <div class="mt-8" id="plansContainer">
81
+ <h2 class="text-2xl font-bold text-gray-900 mb-6">Weekly Lesson Plans</h2>
82
+ <div class="bg-white shadow overflow-hidden sm:rounded-lg">
83
+ <div id="plansList" class="divide-y divide-gray-200">
84
+ <!-- Lesson plans will be dynamically inserted here -->
85
+ <div class="p-6 text-center text-gray-500">
86
+ Select a week and class to view lesson plans
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </main>
93
+
94
+ <script>
95
+ document.addEventListener('DOMContentLoaded', function() {
96
+ AOS.init();
97
+ feather.replace();
98
+
99
+ // Form submission handler
100
+ document.getElementById('viewForm').addEventListener('submit', function(e) {
101
+ e.preventDefault();
102
+
103
+ const weekNumber = document.getElementById('viewWeekNumber').value;
104
+ const className = document.getElementById('viewClassName').value;
105
+
106
+ if (!weekNumber || !className) {
107
+ alert('Please select both week number and class name');
108
+ return;
109
+ }
110
+
111
+ displayLessonPlans(weekNumber, className);
112
+ });
113
+
114
+ function displayLessonPlans(weekNumber, className) {
115
+ const lessonPlans = JSON.parse(localStorage.getItem('lessonPlans')) || [];
116
+ const filteredPlans = lessonPlans.filter(plan =>
117
+ plan.weekNumber === weekNumber && plan.className.toLowerCase() === className.toLowerCase()
118
+ );
119
+
120
+ const plansList = document.getElementById('plansList');
121
+
122
+ if (filteredPlans.length === 0) {
123
+ plansList.innerHTML = `
124
+ <div class="p-6 text-center text-gray-500">
125
+ No lesson plans found for Week ${weekNumber} and Class ${className}
126
+ </div>
127
+ `;
128
+ return;
129
+ }
130
+
131
+ plansList.innerHTML = '';
132
+
133
+ filteredPlans.forEach(plan => {
134
+ const planElement = document.createElement('div');
135
+ planElement.className = 'p-6';
136
+ planElement.innerHTML = `
137
+ <div class="flex items-center justify-between">
138
+ <div>
139
+ <h3 class="text-lg font-medium text-gray-900">${plan.subjectName} - Lesson ${plan.lessonNumber}</h3>
140
+ <p class="mt-1 text-sm text-gray-500">Week ${plan.weekNumber} | Class ${plan.className}</p>
141
+ </div>
142
+ </div>
143
+ <div class="mt-4">
144
+ <h4 class="text-sm font-medium text-gray-700">Materials:</h4>
145
+ <p class="mt-1 text-sm text-gray-600">${plan.materials}</p>
146
+ </div>
147
+ <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
148
+ <div>
149
+ <h4 class="text-sm font-medium text-gray-700">Textbook Pages:</h4>
150
+ <p class="mt-1 text-sm text-gray-600">${plan.textbookPages || 'N/A'}</p>
151
+ </div>
152
+ <div>
153
+ <h4 class="text-sm font-medium text-gray-700">Quiz:</h4>
154
+ <p class="mt-1 text-sm text-gray-600">${plan.quiz || 'N/A'}</p>
155
+ </div>
156
+ </div>
157
+ `;
158
+ plansList.appendChild(planElement);
159
+ });
160
+ }
161
+ });
162
+ </script>
163
+ </body>
164
+ </html>
style.css ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ padding: 2rem;
3
+ font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
+ }
5
+
6
+ h1 {
7
+ font-size: 16px;
8
+ margin-top: 0;
9
+ }
10
+
11
+ p {
12
+ color: rgb(107, 114, 128);
13
+ font-size: 15px;
14
+ margin-bottom: 10px;
15
+ margin-top: 5px;
16
+ }
17
+
18
+ .card {
19
+ max-width: 620px;
20
+ margin: 0 auto;
21
+ padding: 16px;
22
+ border: 1px solid lightgray;
23
+ border-radius: 16px;
24
+ }
25
+
26
+ .card p:last-child {
27
+ margin-bottom: 0;
28
+ }
teacher.html ADDED
@@ -0,0 +1,243 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Teacher Portal - EduPlan</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ .gradient-bg {
14
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
15
+ }
16
+ .card-hover:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+ .transition-all {
21
+ transition: all 0.3s ease;
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="bg-gray-50">
26
+ <nav class="bg-white shadow-sm">
27
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
28
+ <div class="flex justify-between h-16">
29
+ <div class="flex items-center">
30
+ <i data-feather="book-open" class="text-indigo-600 mr-2"></i>
31
+ <span class="text-xl font-bold text-indigo-600">EduPlan</span>
32
+ </div>
33
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
34
+ <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>
35
+ <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>
36
+ <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>
37
+ </div>
38
+ </div>
39
+ </div>
40
+ </nav>
41
+
42
+ <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
43
+ <div class="px-4 py-6 sm:px-0">
44
+ <div class="border-4 border-dashed border-gray-200 rounded-lg p-6">
45
+ <h2 class="text-2xl font-bold text-gray-900 mb-6">Create New Lesson Plan</h2>
46
+
47
+ <form id="lessonForm" class="space-y-6">
48
+ <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
49
+ <div>
50
+ <label for="weekNumber" class="block text-sm font-medium text-gray-700">Week Number</label>
51
+ <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">
52
+ <option value="">Select Week</option>
53
+ <option value="1">Week 1</option>
54
+ <option value="2">Week 2</option>
55
+ <option value="3">Week 3</option>
56
+ <option value="4">Week 4</option>
57
+ <option value="5">Week 5</option>
58
+ <option value="6">Week 6</option>
59
+ <option value="7">Week 7</option>
60
+ <option value="8">Week 8</option>
61
+ <option value="9">Week 9</option>
62
+ <option value="10">Week 10</option>
63
+ </select>
64
+ </div>
65
+
66
+ <div>
67
+ <label for="lessonDay" class="block text-sm font-medium text-gray-700">Day</label>
68
+ <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">
69
+ <option value="">Select Day</option>
70
+ <option value="Sunday">Sunday</option>
71
+ <option value="Monday">Monday</option>
72
+ <option value="Tuesday">Tuesday</option>
73
+ <option value="Wednesday">Wednesday</option>
74
+ <option value="Thursday">Thursday</option>
75
+ </select>
76
+ </div>
77
+
78
+ <div>
79
+ <label for="lessonNumber" class="block text-sm font-medium text-gray-700">Lesson Number</label>
80
+ <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">
81
+ </div>
82
+ </div>
83
+
84
+ <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
85
+ <div>
86
+ <label for="subjectName" class="block text-sm font-medium text-gray-700">Subject Name</label>
87
+ <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">
88
+ </div>
89
+
90
+ <div>
91
+ <label for="className" class="block text-sm font-medium text-gray-700">Class Name</label>
92
+ <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">
93
+ </div>
94
+ </div>
95
+
96
+ <div>
97
+ <label for="materials" class="block text-sm font-medium text-gray-700">Materials to be Studied</label>
98
+ <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>
99
+ </div>
100
+
101
+ <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
102
+ <div>
103
+ <label for="textbookPages" class="block text-sm font-medium text-gray-700">Textbook Page Numbers</label>
104
+ <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">
105
+ </div>
106
+
107
+ <div>
108
+ <label for="quiz" class="block text-sm font-medium text-gray-700">Quiz (if applicable)</label>
109
+ <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">
110
+ </div>
111
+ </div>
112
+
113
+ <div class="flex justify-end">
114
+ <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">
115
+ Save Lesson Plan
116
+ </button>
117
+ </div>
118
+ </form>
119
+ </div>
120
+
121
+ <div class="mt-8">
122
+ <h2 class="text-2xl font-bold text-gray-900 mb-6">Saved Lesson Plans</h2>
123
+ <div class="bg-white shadow overflow-hidden sm:rounded-lg">
124
+ <table class="min-w-full divide-y divide-gray-200">
125
+ <thead class="bg-gray-50">
126
+ <tr>
127
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Week</th>
128
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Day</th>
129
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Lesson</th>
130
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subject</th>
131
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Class</th>
132
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
133
+ </tr>
134
+ </thead>
135
+ <tbody id="lessonPlansTable" class="bg-white divide-y divide-gray-200">
136
+ <!-- Lesson plans will be dynamically inserted here -->
137
+ </tbody>
138
+ </table>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </main>
143
+
144
+ <script>
145
+ document.addEventListener('DOMContentLoaded', function() {
146
+ AOS.init();
147
+ feather.replace();
148
+
149
+ // Load saved lesson plans from localStorage
150
+ loadLessonPlans();
151
+
152
+ // Form submission handler
153
+ document.getElementById('lessonForm').addEventListener('submit', function(e) {
154
+ e.preventDefault();
155
+
156
+ const lessonPlan = {
157
+ weekNumber: document.getElementById('weekNumber').value,
158
+ lessonDay: document.getElementById('lessonDay').value,
159
+ lessonNumber: document.getElementById('lessonNumber').value,
160
+ subjectName: document.getElementById('subjectName').value,
161
+ className: document.getElementById('className').value,
162
+ materials: document.getElementById('materials').value,
163
+ textbookPages: document.getElementById('textbookPages').value,
164
+ quiz: document.getElementById('quiz').value,
165
+ id: Date.now() // Unique ID for each lesson plan
166
+ };
167
+
168
+ saveLessonPlan(lessonPlan);
169
+ this.reset();
170
+ loadLessonPlans();
171
+ });
172
+
173
+ function saveLessonPlan(lessonPlan) {
174
+ let lessonPlans = JSON.parse(localStorage.getItem('lessonPlans')) || [];
175
+ lessonPlans.push(lessonPlan);
176
+ localStorage.setItem('lessonPlans', JSON.stringify(lessonPlans));
177
+ }
178
+
179
+ function loadLessonPlans() {
180
+ const lessonPlans = JSON.parse(localStorage.getItem('lessonPlans')) || [];
181
+ const tableBody = document.getElementById('lessonPlansTable');
182
+ tableBody.innerHTML = '';
183
+
184
+ lessonPlans.forEach(plan => {
185
+ const row = document.createElement('tr');
186
+ row.innerHTML = `
187
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${plan.weekNumber}</td>
188
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${plan.lessonDay}</td>
189
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${plan.lessonNumber}</td>
190
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${plan.subjectName}</td>
191
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${plan.className}</td>
192
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
193
+ <button onclick="viewLessonPlan(${plan.id})" class="text-indigo-600 hover:text-indigo-900 mr-3">View</button>
194
+ <button onclick="editLessonPlan(${plan.id})" class="text-yellow-600 hover:text-yellow-900 mr-3">Edit</button>
195
+ <button onclick="deleteLessonPlan(${plan.id})" class="text-red-600 hover:text-red-900">Delete</button>
196
+ </td>
197
+ `;
198
+ tableBody.appendChild(row);
199
+ });
200
+ }
201
+
202
+ window.viewLessonPlan = function(id) {
203
+ const lessonPlans = JSON.parse(localStorage.getItem('lessonPlans')) || [];
204
+ const plan = lessonPlans.find(p => p.id === id);
205
+
206
+ if (plan) {
207
+ 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'}`);
208
+ }
209
+ };
210
+
211
+ window.deleteLessonPlan = function(id) {
212
+ let lessonPlans = JSON.parse(localStorage.getItem('lessonPlans')) || [];
213
+ lessonPlans = lessonPlans.filter(p => p.id !== id);
214
+ localStorage.setItem('lessonPlans', JSON.stringify(lessonPlans));
215
+ loadLessonPlans();
216
+ };
217
+
218
+ window.editLessonPlan = function(id) {
219
+ const lessonPlans = JSON.parse(localStorage.getItem('lessonPlans')) || [];
220
+ const plan = lessonPlans.find(p => p.id === id);
221
+
222
+ if (plan) {
223
+ document.getElementById('weekNumber').value = plan.weekNumber;
224
+ document.getElementById('lessonDay').value = plan.lessonDay;
225
+ document.getElementById('lessonNumber').value = plan.lessonNumber;
226
+ document.getElementById('subjectName').value = plan.subjectName;
227
+ document.getElementById('className').value = plan.className;
228
+ document.getElementById('materials').value = plan.materials;
229
+ document.getElementById('textbookPages').value = plan.textbookPages;
230
+ document.getElementById('quiz').value = plan.quiz;
231
+
232
+ // Remove the old plan
233
+ let updatedPlans = lessonPlans.filter(p => p.id !== id);
234
+ localStorage.setItem('lessonPlans', JSON.stringify(updatedPlans));
235
+
236
+ // Scroll to form
237
+ document.getElementById('lessonForm').scrollIntoView({ behavior: 'smooth' });
238
+ }
239
+ };
240
+ });
241
+ </script>
242
+ </body>
243
+ </html>