Monkeysapiens/schoolsync-wizardry
0
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>SchoolSync - Dashboard</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>12 <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js"></script>13 <style>14 .draggable {15 touch-action: none;16 user-select: none;17 cursor: move;18 }19 .calendar-cell {20 min-height: 80px;21 border: 1px dashed #e2e8f0;22 }23 .calendar-cell.highlight {24 background-color: #f0fdf4;25 }26 </style>27</head>28<body class="bg-gray-50">29 <div class="flex h-screen overflow-hidden">30 <!-- Sidebar -->31 <div class="hidden md:flex md:flex-shrink-0">32 <div class="flex flex-col w-64 bg-white border-r border-gray-200">33 <div class="flex items-center justify-center h-16 px-4 bg-indigo-600">34 <div class="flex items-center">35 <i data-feather="book-open" class="text-white mr-2"></i>36 <span class="text-white font-bold text-lg">SchoolSync</span>37 </div>38 </div>39 <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">40 <div class="space-y-1">41<a href="#" onclick="showSection('dashboard')" class="flex items-center w-full px-4 py-3 text-sm font-medium text-indigo-700 bg-indigo-100 rounded-lg hovered-element" id="dashboard-nav">42<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home mr-3"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>43 Dashboard44 </a>45<button onclick="showSection('teachers')" class="flex items-center w-full px-4 py-3 text-sm font-medium text-gray-600 rounded-lg hover:bg-gray-100" id="teachers-nav">46<i data-feather="users" class="mr-3"></i>47 Teachers48 </button>49<button onclick="showSection('students')" class="flex items-center w-full px-4 py-3 text-sm font-medium text-gray-600 rounded-lg hover:bg-gray-100" id="students-nav">50<i data-feather="user" class="mr-3"></i>51 Students52 </button>53<button onclick="showSection('classes')" class="flex items-center w-full px-4 py-3 text-sm font-medium text-gray-600 rounded-lg hover:bg-gray-100" id="classes-nav">54<i data-feather="book" class="mr-3"></i>55 Classes56 </button>57<button onclick="showSection('subjects')" class="flex items-center w-full px-4 py-3 text-sm font-medium text-gray-600 rounded-lg hover:bg-gray-100" id="subjects-nav">58<i data-feather="list" class="mr-3"></i>59 Subjects60 </button>61<button onclick="showSection('calendar')" class="flex items-center w-full px-4 py-3 text-sm font-medium text-gray-600 rounded-lg hover:bg-gray-100" id="calendar-nav">62<i data-feather="calendar" class="mr-3"></i>63 Schedule64 </button>65 </div>66 </div>67 </div>68 </div>69 70 <!-- Main content -->71 <div class="flex flex-col flex-1 overflow-hidden">72 <!-- Top navigation -->73 <div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200">74 <button class="md:hidden">75 <i data-feather="menu"></i>76 </button>77 <div class="flex items-center space-x-4">78 <div class="relative">79 <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">80 <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>81 </div>82 <button class="p-1 rounded-full bg-gray-100">83 <i data-feather="bell"></i>84 </button>85 <div class="flex items-center">86 <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center">87 <i data-feather="user" class="text-indigo-600"></i>88 </div>89 </div>90 </div>91 </div>92 93 <!-- Main sections -->94 <div class="flex-1 overflow-auto p-6">95 <!-- Dashboard Section -->96 <div id="dashboard-section" class="section-content">97 <div class="mb-6">98 <h1 class="text-2xl font-bold text-gray-800">School Dashboard</h1>99 <p class="text-gray-600">Manage your school's resources efficiently</p>100 </div>101 102 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">103 <div class="bg-white rounded-lg shadow p-6">104 <div class="flex items-center">105 <div class="p-3 rounded-full bg-indigo-100 text-indigo-600">106 <i data-feather="users"></i>107 </div>108 <div class="ml-4">109 <h3 class="text-gray-500 text-sm font-medium">Teachers</h3>110 <p class="text-2xl font-bold text-gray-800">2</p>111</div>112 </div>113 </div>114 <div class="bg-white rounded-lg shadow p-6">115 <div class="flex items-center">116 <div class="p-3 rounded-full bg-green-100 text-green-600">117 <i data-feather="user"></i>118 </div>119 <div class="ml-4">120 <h3 class="text-gray-500 text-sm font-medium">Students</h3>121 <p class="text-2xl font-bold text-gray-800">2</p>122</div>123 </div>124 </div>125 <div class="bg-white rounded-lg shadow p-6">126 <div class="flex items-center">127 <div class="p-3 rounded-full bg-blue-100 text-blue-600">128 <i data-feather="book"></i>129 </div>130 <div class="ml-4">131 <h3 class="text-gray-500 text-sm font-medium">Classes</h3>132 <p class="text-2xl font-bold text-gray-800">2</p>133</div>134 </div>135 </div>136 <div class="bg-white rounded-lg shadow p-6">137 <div class="flex items-center">138 <div class="p-3 rounded-full bg-purple-100 text-purple-600">139 <i data-feather="list"></i>140 </div>141 <div class="ml-4">142 <h3 class="text-gray-500 text-sm font-medium">Subjects</h3>143 <p class="text-2xl font-bold text-gray-800">2</p>144</div>145 </div>146 </div>147 </div>148 149 <div class="bg-white rounded-lg shadow p-6 mb-6">150 <h2 class="text-lg font-semibold text-gray-800 mb-4">Recent Activity</h2>151 <div class="space-y-4">152 <div class="flex items-start">153 <div class="flex-shrink-0">154 <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center">155 <i data-feather="user-plus" class="text-indigo-600"></i>156 </div>157 </div>158 <div class="ml-3">159 <p class="text-sm font-medium text-gray-900">New student enrolled</p>160 <p class="text-sm text-gray-500">John Doe joined class 10-A</p>161 <p class="text-xs text-gray-400">2 hours ago</p>162 </div>163 </div>164 <div class="flex items-start">165 <div class="flex-shrink-0">166 <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">167 <i data-feather="calendar" class="text-green-600"></i>168 </div>169 </div>170 <div class="ml-3">171 <p class="text-sm font-medium text-gray-900">Class schedule updated</p>172 <p class="text-sm text-gray-500">Math class moved to Room 203</p>173 <p class="text-xs text-gray-400">Yesterday</p>174 </div>175 </div>176 </div>177 </div>178 </div>179 180 <!-- Teachers Section -->181 <div id="teachers-section" class="section-content hidden">182 <div class="flex justify-between items-center mb-6">183 <div>184 <h1 class="text-2xl font-bold text-gray-800">Teachers</h1>185 <p class="text-gray-600">Manage your teaching staff</p>186 </div>187 <button onclick="openTeacherForm()" class="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">188 <i data-feather="plus" class="mr-2"></i>189 Add Teacher190 </button>191 </div>192 193 <div class="bg-white rounded-lg shadow overflow-hidden">194 <div class="overflow-x-auto">195 <table class="min-w-full divide-y divide-gray-200">196 <thead class="bg-gray-50">197 <tr>198 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>199 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>200 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subjects</th>201 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Classes</th>202 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>203 </tr>204 </thead>205 <tbody class="bg-white divide-y divide-gray-200">206 <tr>207 <td class="px-6 py-4 whitespace-nowrap">208 <div class="flex items-center">209 <div class="flex-shrink-0 h-10 w-10">210 <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/1" alt="">211 </div>212 <div class="ml-4">213 <div class="text-sm font-medium text-gray-900">Jane Smith</div>214 </div>215 </div>216 </td>217 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">jane.smith@school.edu</td>218 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Math, Physics</td>219 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10-A, 11-B</td>220 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">221 <a href="#" onclick="editStudent(this)" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a>222 <a href="#" onclick="confirmDeleteStudent(this)" class="text-red-600 hover:text-red-900">Delete</a>223</td>224 </tr>225 <tr>226 <td class="px-6 py-4 whitespace-nowrap">227 <div class="flex items-center">228 <div class="flex-shrink-0 h-10 w-10">229 <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/2" alt="">230 </div>231 <div class="ml-4">232 <div class="text-sm font-medium text-gray-900">Michael Johnson</div>233 </div>234 </div>235 </td>236 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">michael.j@school.edu</td>237 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">History, English</td>238 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">9-C, 12-A</td>239 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">240 <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a>241 <a href="#" class="text-red-600 hover:text-red-900">Delete</a>242 </td>243 </tr>244 </tbody>245 </table>246 </div>247 </div>248 </div>249 250 <!-- Students Section -->251 <div id="students-section" class="section-content hidden">252 <div class="flex justify-between items-center mb-6">253 <div>254 <h1 class="text-2xl font-bold text-gray-800">Students</h1>255 <p class="text-gray-600">Manage student records</p>256 </div>257 <button onclick="openStudentForm()" class="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">258 <i data-feather="plus" class="mr-2"></i>259 Add Student260 </button>261 </div>262 263 <div class="bg-white rounded-lg shadow overflow-hidden">264 <div class="overflow-x-auto">265 <table class="min-w-full divide-y divide-gray-200">266 <thead class="bg-gray-50">267 <tr>268 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>269 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Class</th>270 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Parent</th>271 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact</th>272 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>273 </tr>274 </thead>275 <tbody class="bg-white divide-y divide-gray-200">276 <tr>277 <td class="px-6 py-4 whitespace-nowrap">278 <div class="flex items-center">279 <div class="flex-shrink-0 h-10 w-10">280 <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/3" alt="">281 </div>282 <div class="ml-4">283 <div class="text-sm font-medium text-gray-900">Sarah Williams</div>284 </div>285 </div>286 </td>287 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10-A</td>288 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Robert Williams</td>289 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">555-1234</td>290 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">291 <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a>292 <a href="#" class="text-red-600 hover:text-red-900">Delete</a>293 </td>294 </tr>295 <tr>296 <td class="px-6 py-4 whitespace-nowrap">297 <div class="flex items-center">298 <div class="flex-shrink-0 h-10 w-10">299 <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/4" alt="">300 </div>301 <div class="ml-4">302 <div class="text-sm font-medium text-gray-900">David Brown</div>303 </div>304 </div>305 </td>306 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">11-B</td>307 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Lisa Brown</td>308 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">555-5678</td>309 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">310 <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a>311 <a href="#" class="text-red-600 hover:text-red-900">Delete</a>312 </td>313 </tr>314 </tbody>315 </table>316 </div>317 </div>318 </div>319 320 <!-- Classes Section -->321 <div id="classes-section" class="section-content hidden">322 <div class="flex justify-between items-center mb-6">323 <div>324 <h1 class="text-2xl font-bold text-gray-800">Classes</h1>325 <p class="text-gray-600">Manage school classes</p>326 </div>327 <button onclick="openClassForm()" class="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">328 <i data-feather="plus" class="mr-2"></i>329 Add Class330 </button>331 </div>332 333 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">334 <div class="bg-white rounded-lg shadow overflow-hidden">335 <div class="p-6">336 <div class="flex items-center justify-between">337 <h3 class="text-lg font-semibold text-gray-900">Class 10-A</h3>338 <span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full">1 student</span>339</div>340 <div class="mt-4">341 <div class="flex items-center text-sm text-gray-500 mb-2">342 <i data-feather="user" class="mr-2 w-4 h-4"></i>343 Teacher: Jane Smith344 </div>345 <div class="flex items-center text-sm text-gray-500">346 <i data-feather="clock" class="mr-2 w-4 h-4"></i>347 Schedule: Mon, Wed, Fri (9:00-11:00)348 </div>349 </div>350 <div class="mt-4 flex space-x-2">351 <button class="px-3 py-1 text-sm text-indigo-600 bg-indigo-50 rounded hover:bg-indigo-100">Edit</button>352 <button class="px-3 py-1 text-sm text-red-600 bg-red-50 rounded hover:bg-red-100">Delete</button>353 </div>354 </div>355 </div>356 <div class="bg-white rounded-lg shadow overflow-hidden">357 <div class="p-6">358 <div class="flex items-center justify-between">359 <h3 class="text-lg font-semibold text-gray-900">Class 11-B</h3>360 <span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full">1 student</span>361</div>362 <div class="mt-4">363 <div class="flex items-center text-sm text-gray-500 mb-2">364 <i data-feather="user" class="mr-2 w-4 h-4"></i>365 Teacher: Michael Johnson366 </div>367 <div class="flex items-center text-sm text-gray-500">368 <i data-feather="clock" class="mr-2 w-4 h-4"></i>369 Schedule: Tue, Thu (10:00-12:00)370 </div>371 </div>372 <div class="mt-4 flex space-x-2">373 <button class="px-3 py-1 text-sm text-indigo-600 bg-indigo-50 rounded hover:bg-indigo-100">Edit</button>374 <button class="px-3 py-1 text-sm text-red-600 bg-red-50 rounded hover:bg-red-100">Delete</button>375 </div>376 </div>377 </div>378 </div>379 </div>380 381 <!-- Subjects Section -->382 <div id="subjects-section" class="section-content hidden">383 <div class="flex justify-between items-center mb-6">384 <div>385 <h1 class="text-2xl font-bold text-gray-800">Subjects</h1>386 <p class="text-gray-600">Manage school subjects</p>387 </div>388 <button onclick="openSubjectForm()" class="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">389 <i data-feather="plus" class="mr-2"></i>390 Add Subject391 </button>392 </div>393 394 <div class="bg-white rounded-lg shadow overflow-hidden">395 <div class="overflow-x-auto">396 <table class="min-w-full divide-y divide-gray-200">397 <thead class="bg-gray-50">398 <tr>399 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subject</th>400 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Code</th>401 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>402 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>403 </tr>404 </thead>405 <tbody class="bg-white divide-y divide-gray-200">406 <tr>407 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Mathematics</td>408 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">MATH101</td>409 <td class="px-6 py-4 text-sm text-gray-500">Algebra, Geometry, Calculus</td>410 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">411 <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a>412 <a href="#" class="text-red-600 hover:text-red-900">Delete</a>413 </td>414 </tr>415 <tr>416 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">English Literature</td>417 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">ENG201</td>418 <td class="px-6 py-4 text-sm text-gray-500">Classic and contemporary literature</td>419 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">420 <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a>421 <a href="#" class="text-red-600 hover:text-red-900">Delete</a>422 </td>423 </tr>424 </tbody>425 </table>426 </div>427 </div>428 </div>429 430 <!-- Calendar Section -->431 <div id="calendar-section" class="section-content hidden">432 <div class="flex justify-between items-center mb-6">433 <div>434 <h1 class="text-2xl font-bold text-gray-800">Schedule</h1>435 <p class="text-gray-600">Drag and drop to assign classes</p>436 </div>437 <div class="flex space-x-2">438 <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">439 <i data-feather="plus" class="mr-2"></i>440 Add Event441 </button>442 </div>443 </div>444 445 <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">446 <!-- Resources panel -->447 <div class="lg:col-span-1 bg-white rounded-lg shadow p-4">448 <h2 class="text-lg font-semibold text-gray-800 mb-4">Resources</h2>449 450 <div class="mb-4">451 <h3 class="text-sm font-medium text-gray-500 mb-2">Teachers</h3>452 <div class="space-y-2">453 <div class="draggable p-2 bg-indigo-50 rounded-lg cursor-move flex items-center" draggable="true" data-type="teacher" data-id="1">454 <img src="http://static.photos/people/200x200/1" class="w-8 h-8 rounded-full mr-2" alt="">455 <span class="text-sm">Jane Smith</span>456 </div>457 <div class="draggable p-2 bg-indigo-50 rounded-lg cursor-move flex items-center" draggable="true" data-type="teacher" data-id="2">458 <img src="http://static.photos/people/200x200/2" class="w-8 h-8 rounded-full mr-2" alt="">459 <span class="text-sm">Michael Johnson</span>460 </div>461 </div>462 </div>463 464 <div class="mb-4">465 <h3 class="text-sm font-medium text-gray-500 mb-2">Classes</h3>466 <div class="space-y-2">467 <div class="draggable p-2 bg-green-50 rounded-lg cursor-move" draggable="true" data-type="class" data-id="1">468 <span class="text-sm">Class 10-A</span>469 </div>470 <div class="draggable p-2 bg-green-50 rounded-lg cursor-move" draggable="true" data-type="class" data-id="2">471 <span class="text-sm">Class 11-B</span>472 </div>473 </div>474 </div>475 476 <div>477 <h3 class="text-sm font-medium text-gray-500 mb-2">Subjects</h3>478 <div class="space-y-2">479 <div class="draggable p-2 bg-purple-50 rounded-lg cursor-move" draggable="true" data-type="subject" data-id="1">480 <span class="text-sm">Mathematics</span>481 </div>482 <div class="draggable p-2 bg-purple-50 rounded-lg cursor-move" draggable="true" data-type="subject" data-id="2">483 <span class="text-sm">English Literature</span>484 </div>485 </div>486 </div>487 </div>488 489 <!-- Calendar -->490 <div class="lg:col-span-3 bg-white rounded-lg shadow p-4">491 <div id="calendar"></div>492 </div>493 </div>494 </div>495 </div>496 </div>497 </div>498 499 <!-- Teacher Form Modal -->500 <div id="teacher-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">501 <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">502 <div class="fixed inset-0 transition-opacity" aria-hidden="true">503 <div class="absolute inset-0 bg-gray-500 opacity-75"></div>504 </div>505 <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>506 <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">507 <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">508 <div class="sm:flex sm:items-start">509 <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 sm:mx-0 sm:h-10 sm:w-10">510 <i data-feather="user-plus"></i>511 </div>512 <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">513 <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Add New Teacher</h3>514 <div class="mt-2">515 <form id="teacher-form">516 <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">517 <div class="sm:col-span-3">518 <label for="teacher-name" class="block text-sm font-medium text-gray-700">Full name</label>519 <input type="text" name="teacher-name" id="teacher-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">520 </div>521 <div class="sm:col-span-3">522 <label for="teacher-email" class="block text-sm font-medium text-gray-700">Email</label>523 <input type="email" name="teacher-email" id="teacher-email" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">524 </div>525 <div class="sm:col-span-6">526 <label for="teacher-subjects" class="block text-sm font-medium text-gray-700">Subjects</label>527 <select name="teacher-subjects" id="teacher-subjects" multiple 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">528 <option>Mathematics</option>529 <option>English Literature</option>530 <option>Physics</option>531 <option>Chemistry</option>532 <option>Biology</option>533 <option>History</option>534 <option>Geography</option>535 </select>536 </div>537 <div class="sm:col-span-6">538 <label for="teacher-classes" class="block text-sm font-medium text-gray-700">Assigned Classes</label>539 <select name="teacher-classes" id="teacher-classes" multiple 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">540 <option>10-A</option>541 <option>11-B</option>542 <option>9-C</option>543 <option>12-A</option>544 </select>545 </div>546 </div>547 </form>548 </div>549 </div>550 </div>551 </div>552 <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">553 <button type="button" onclick="saveTeacher()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">Save</button>554 <button type="button" onclick="closeModal('teacher-modal')" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Cancel</button>555 </div>556 </div>557 </div>558 </div>559 560 <!-- Student Form Modal -->561 <div id="student-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">562 <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">563 <div class="fixed inset-0 transition-opacity" aria-hidden="true">564 <div class="absolute inset-0 bg-gray-500 opacity-75"></div>565 </div>566 <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>567 <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">568 <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">569 <div class="sm:flex sm:items-start">570 <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10">571 <i data-feather="user"></i>572 </div>573 <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">574 <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Add New Student</h3>575 <div class="mt-2">576 <form id="student-form">577 <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">578 <div class="sm:col-span-3">579 <label for="student-name" class="block text-sm font-medium text-gray-700">Full name</label>580 <input type="text" name="student-name" id="student-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">581 </div>582 <div class="sm:col-span-3">583 <label for="student-dob" class="block text-sm font-medium text-gray-700">Date of Birth</label>584 <input type="date" name="student-dob" id="student-dob" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">585 </div>586 <div class="sm:col-span-3">587 <label for="student-class" class="block text-sm font-medium text-gray-700">Class</label>588 <select name="student-class" id="student-class" 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">589 <option>10-A</option>590 <option>11-B</option>591 <option>9-C</option>592 <option>12-A</option>593 </select>594 </div>595 <div class="sm:col-span-3">596 <label for="student-parent" class="block text-sm font-medium text-gray-700">Parent/Guardian</label>597 <input type="text" name="student-parent" id="student-parent" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">598 </div>599 <div class="sm:col-span-3">600 <label for="student-phone" class="block text-sm font-medium text-gray-700">Phone</label>601 <input type="tel" name="student-phone" id="student-phone" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">602 </div>603 <div class="sm:col-span-3">604 <label for="student-email" class="block text-sm font-medium text-gray-700">Email</label>605 <input type="email" name="student-email" id="student-email" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">606 </div>607 </div>608 </form>609 </div>610 </div>611 </div>612 </div>613 <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">614 <button type="button" onclick="saveStudent()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">Save</button>615 <button type="button" onclick="closeModal('student-modal')" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Cancel</button>616 </div>617 </div>618 </div>619 </div>620 621 <!-- Class Form Modal -->622 <div id="class-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">623 <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">624 <div class="fixed inset-0 transition-opacity" aria-hidden="true">625 <div class="absolute inset-0 bg-gray-500 opacity-75"></div>626 </div>627 <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>628 <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">629 <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">630 <div class="sm:flex sm:items-start">631 <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">632 <i data-feather="book"></i>633 </div>634 <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">635 <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Add New Class</h3>636 <div class="mt-2">637 <form id="class-form">638 <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">639 <div class="sm:col-span-3">640 <label for="class-name" class="block text-sm font-medium text-gray-700">Class Name</label>641 <input type="text" name="class-name" id="class-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">642 </div>643 <div class="sm:col-span-3">644 <label for="class-teacher" class="block text-sm font-medium text-gray-700">Teacher</label>645 <select name="class-teacher" id="class-teacher" 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">646 <option>Jane Smith</option>647 <option>Michael Johnson</option>648 </select>649 </div>650 <div class="sm:col-span-6">651 <label for="class-subject" class="block text-sm font-medium text-gray-700">Subject</label>652 <select name="class-subject" id="class-subject" 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">653 <option>Mathematics</option>654 <option>English Literature</option>655 <option>Physics</option>656 <option>Chemistry</option>657 <option>Biology</option>658 <option>History</option>659 <option>Geography</option>660 </select>661 </div>662 <div class="sm:col-span-6">663 <label for="class-schedule" class="block text-sm font-medium text-gray-700">Schedule</label>664 <div class="mt-1 space-y-2">665 <div class="flex items-center">666 <input type="checkbox" id="monday" name="monday" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">667 <label for="monday" class="ml-2 block text-sm text-gray-700">Monday</label>668 <input type="time" id="monday-time" name="monday-time" class="ml-2 block w-24 shadow-sm sm:text-sm border-gray-300 rounded-md">669 </div>670 <div class="flex items-center">671 <input type="checkbox" id="tuesday" name="tuesday" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">672 <label for="tuesday" class="ml-2 block text-sm text-gray-700">Tuesday</label>673 <input type="time" id="tuesday-time" name="tuesday-time" class="ml-2 block w-24 shadow-sm sm:text-sm border-gray-300 rounded-md">674 </div>675 <div class="flex items-center">676 <input type="checkbox" id="wednesday" name="wednesday" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">677 <label for="wednesday" class="ml-2 block text-sm text-gray-700">Wednesday</label>678 <input type="time" id="wednesday-time" name="wednesday-time" class="ml-2 block w-24 shadow-sm sm:text-sm border-gray-300 rounded-md">679 </div>680 <div class="flex items-center">681 <input type="checkbox" id="thursday" name="thursday" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">682 <label for="thursday" class="ml-2 block text-sm text-gray-700">Thursday</label>683 <input type="time" id="thursday-time" name="thursday-time" class="ml-2 block w-24 shadow-sm sm:text-sm border-gray-300 rounded-md">684 </div>685 <div class="flex items-center">686 <input type="checkbox" id="friday" name="friday" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">687 <label for="friday" class="ml-2 block text-sm text-gray-700">Friday</label>688 <input type="time" id="friday-time" name="friday-time" class="ml-2 block w-24 shadow-sm sm:text-sm border-gray-300 rounded-md">689 </div>690 </div>691 </div>692 </div>693 </form>694 </div>695 </div>696 </div>697 </div>698 <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">699 <button type="button" onclick="saveClass()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">Save</button>700 <button type="button" onclick="closeModal('class-modal')" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Cancel</button>701 </div>702 </div>703 </div>704 </div>705 706 <!-- Subject Form Modal -->707 <div id="subject-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">708 <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">709 <div class="fixed inset-0 transition-opacity" aria-hidden="true">710 <div class="absolute inset-0 bg-gray-500 opacity-75"></div>711 </div>712 <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>713 <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">714 <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">715 <div class="sm:flex sm:items-start">716 <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 sm:mx-0 sm:h-10 sm:w-10">717 <i data-feather="list"></i>718 </div>719 <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">720 <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Add New Subject</h3>721 <div class="mt-2">722 <form id="subject-form">723 <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">724 <div class="sm:col-span-3">725 <label for="subject-name" class="block text-sm font-medium text-gray-700">Subject Name</label>726 <input type="text" name="subject-name" id="subject-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">727 </div>728 <div class="sm:col-span-3">729 <label for="subject-code" class="block text-sm font-medium text-gray-700">Subject Code</label>730 <input type="text" name="subject-code" id="subject-code" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">731 </div>732 <div class="sm:col-span-6">733 <label for="subject-description" class="block text-sm font-medium text-gray-700">Description</label>734 <textarea name="subject-description" id="subject-description" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"></textarea>735 </div>736 </div>737 </form>738 </div>739 </div>740 </div>741 </div>742 <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">743 <button type="button" onclick="saveSubject()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">Save</button>744 <button type="button" onclick="closeModal('subject-modal')" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Cancel</button>745 </div>746 </div>747 </div>748 </div>749 750 <script>751 // Initialize Feather Icons752 document.addEventListener('DOMContentLoaded', function() {753 feather.replace();754 755 // Initialize FullCalendar756 var calendarEl = document.getElementById('calendar');757 var calendar = new FullCalendar.Calendar(calendarEl, {758 initialView: 'timeGridWeek',759 headerToolbar: {760 left: 'prev,next today',761 center: 'title',762 right: 'dayGridMonth,timeGridWeek,timeGridDay'763 },764 events: [765 {766 title: 'Math - Class 10-A',767 start: '2023-11-13T09:00:00',768 end: '2023-11-13T11:00:00',769 backgroundColor: '#6366f1',770 borderColor: '#6366f1'771 },772 {773 title: 'English - Class 11-B',774 start: '2023-11-14T10:00:00',775 end: '2023-11-14T12:00:00',776 backgroundColor: '#10b981',777 borderColor: '#10b981'778 }779 ]780 });781 calendar.render();782 783 // Set up drag and drop784 setupDragAndDrop();785 });786 787 // Show specific section788 function showSection(sectionId) {789 // Hide all sections790 document.querySelectorAll('.section-content').forEach(section => {791 section.classList.add('hidden');792 });793 794 // Show the selected section795 document.getElementById(sectionId + '-section').classList.remove('hidden');796 797 // Reset all nav items to default state798 document.querySelectorAll('#dashboard-nav, #teachers-nav, #students-nav, #classes-nav, #subjects-nav, #calendar-nav').forEach(nav => {799 nav.className = nav.className.replace('text-indigo-700 bg-indigo-100', 'text-gray-600 hover:bg-gray-100');800 if (nav.tagName === 'A') {801 nav.className += ' hover:bg-gray-100';802 }803 });804 805 // Highlight current nav item806 const currentNav = document.getElementById(sectionId + '-nav');807 currentNav.className = currentNav.className.replace('text-gray-600 hover:bg-gray-100', 'text-indigo-700 bg-indigo-100');808 currentNav.className = currentNav.className.replace('hover:bg-gray-100', '');809 }810 811 // Initialize with dashboard selected812 document.addEventListener('DOMContentLoaded', function() {813 showSection('dashboard');814 });815// Modal functions816 function openTeacherForm() {817 document.getElementById('teacher-modal').classList.remove('hidden');818 }819 820 function openStudentForm() {821 document.getElementById('student-modal').classList.remove('hidden');822 }823 824 function openClassForm() {825 document.getElementById('class-modal').classList.remove('hidden');826 }827 828 function openSubjectForm() {829 document.getElementById('subject-modal').classList.remove('hidden');830 }831 832 function closeModal(modalId) {833 document.getElementById(modalId).classList.add('hidden');834 }835 836 // Save functions (placeholder)837 function saveTeacher() {838 alert('Teacher saved!');839 closeModal('teacher-modal');840 }841 // Student functions842 function editStudent(button) {843 const row = button.closest('tr');844 const name = row.querySelector('.text-gray-900').textContent;845 const studentClass = row.children[1].textContent;846 const parent = row.children[2].textContent;847 const phone = row.children[3].textContent;848 849 // Fill the form with existing data850 document.getElementById('student-name').value = name;851 document.getElementById('student-class').value = studentClass;852 document.getElementById('student-parent').value = parent;853 document.getElementById('student-phone').value = phone;854 855 // Store the row being edited856 document.getElementById('student-form').dataset.editingRow = row.rowIndex;857 858 // Open the modal with "Edit Student" title859 document.querySelector('#student-modal h3').textContent = 'Edit Student';860 document.getElementById('student-modal').classList.remove('hidden');861 }862 863 function confirmDeleteStudent(button) {864 if (confirm('Are you sure you want to delete this student?')) {865 const row = button.closest('tr');866 row.remove();867 // In a real app, you would also send a delete request to your backend868 alert('Student deleted successfully!');869 }870 }871 872 function saveStudent() {873 const form = document.getElementById('student-form');874 const editingRow = form.dataset.editingRow;875 876 if (editingRow) {877 // Update existing row878 const row = document.querySelector(`#students-section tbody tr:nth-child(${editingRow})`);879 row.querySelector('.text-gray-900').textContent = form['student-name'].value;880 row.children[1].textContent = form['student-class'].value;881 row.children[2].textContent = form['student-parent'].value;882 row.children[3].textContent = form['student-phone'].value;883 884 // Clear editing state885 delete form.dataset.editingRow;886 alert('Student updated successfully!');887 } else {888 // Add new student (placeholder - in real app you'd add a new row)889 alert('New student saved!');890 }891 892 closeModal('student-modal');893 }894function saveClass() {895 alert('Class saved!');896 closeModal('class-modal');897 }898 899 function saveSubject() {900 alert('Subject saved!');901 closeModal('subject-modal');902 }903 904 // Drag and drop functionality905 function setupDragAndDrop() {906 interact('.draggable').draggable({907 inertia: true,908 modifiers: [909 interact.modifiers.restrictRect({910 restriction: 'parent',911 endOnly: true912 })913 ],914 autoScroll: true,915 listeners: {916 start(event) {917 event.target.classList.add('opacity-50');918 },919 move(event) {920 const target = event.target;921 const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;922 const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;923 924 target.style.transform = `translate(${x}px, ${y}px)`;925 target.setAttribute('data-x', x);926 target.setAttribute('data-y', y);927 },928 end(event) {929 event.target.classList.remove('opacity-50');930 931 // Check if dropped on a calendar cell932 const calendarCells = document.querySelectorAll('.fc-timegrid-slot, .fc-daygrid-day');933 let droppedOnCell = false;934 935 calendarCells.forEach(cell => {936 const rect = cell.getBoundingClientRect();937 if (938 event.clientX >= rect.left && 939 event.clientX <= rect.right && 940 event.clientY >= rect.top && 941 event.clientY <= rect.bottom942 ) {943 droppedOnCell = true;944 945 // Highlight the cell946 cell.classList.add('highlight');947 setTimeout(() => cell.classList.remove('highlight'), 1000);948 949 // Get the date/time info from the cell950 const dateStr = cell.getAttribute('data-date');951 const timeStr = cell.querySelector('.fc-timegrid-slot-lane')?.getAttribute('data-time');952 953 // Create a new event (simplified)954 const type = event.target.getAttribute('data-type');955 const id = event.target.getAttribute('data-id');956 const name = event.target.textContent.trim();957 958 // In a real app, you would add this to the calendar959 console.log(`Dropped ${type} ${name} on ${dateStr} at ${timeStr}`);960 alert(`Schedule ${name} for ${dateStr} at ${timeStr}`);961 }962 });963 964 // Reset position if not dropped on a calendar cell965 if (!droppedOnCell) {966 const target = event.target;967 target.style.transform = 'translate(0px, 0px)';968 target.setAttribute('data-x', 0);969 target.setAttribute('data-y', 0);970 }971 }972 }973 });974 }975 </script>976</body>977</html>978