|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>EduManage Pro | School Management System</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
:root { |
|
|
--primary: #4f46e5; |
|
|
--secondary: #10b981; |
|
|
--dark: #1e293b; |
|
|
--light: #f8fafc; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.sidebar-mini { |
|
|
width: 80px; |
|
|
} |
|
|
|
|
|
.sidebar-mini .nav-text { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.sidebar-mini .logo-text { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.sidebar-mini .user-info { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.sidebar-mini:hover { |
|
|
width: 250px; |
|
|
} |
|
|
|
|
|
.sidebar-mini:hover .nav-text { |
|
|
display: inline; |
|
|
} |
|
|
|
|
|
.sidebar-mini:hover .logo-text { |
|
|
display: inline; |
|
|
} |
|
|
|
|
|
.sidebar-mini:hover .user-info { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.active-nav { |
|
|
background-color: rgba(79, 70, 229, 0.1); |
|
|
border-left: 4px solid var(--primary); |
|
|
color: var(--primary) !important; |
|
|
} |
|
|
|
|
|
.active-nav i { |
|
|
color: var(--primary) !important; |
|
|
} |
|
|
|
|
|
.chart-container { |
|
|
position: relative; |
|
|
height: 300px; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.sidebar { |
|
|
position: fixed; |
|
|
z-index: 1000; |
|
|
transform: translateX(-100%); |
|
|
} |
|
|
|
|
|
.sidebar.active { |
|
|
transform: translateX(0); |
|
|
} |
|
|
|
|
|
.main-content { |
|
|
margin-left: 0 !important; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #c7d2fe; |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #a5b4fc; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes slideIn { |
|
|
from { |
|
|
transform: translateX(100%); |
|
|
opacity: 0; |
|
|
} |
|
|
to { |
|
|
transform: translateX(0); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.notification { |
|
|
animation: slideIn 0.3s ease-out; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<div class="fixed top-4 right-4 z-50 space-y-2" id="notification-area"></div> |
|
|
|
|
|
|
|
|
<button class="md:hidden fixed top-4 left-4 z-40 bg-white p-2 rounded-md shadow-md text-indigo-600" id="sidebar-toggle"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
|
|
|
|
|
|
<div class="sidebar bg-white text-gray-700 fixed top-0 left-0 h-screen w-64 shadow-md overflow-y-auto" id="sidebar"> |
|
|
|
|
|
<div class="flex items-center justify-between p-4 border-b"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-graduation-cap text-indigo-600 text-2xl"></i> |
|
|
<span class="logo-text text-xl font-bold text-indigo-600">EduManage Pro</span> |
|
|
</div> |
|
|
<button class="text-gray-500 hover:text-gray-700 hidden md:block" id="sidebar-collapse"> |
|
|
<i class="fas fa-chevron-left"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-4 border-b user-info"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-10 h-10 rounded-full object-cover"> |
|
|
<div> |
|
|
<p class="font-medium">Sarah Johnson</p> |
|
|
<p class="text-xs text-gray-500">Administrator</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="p-2"> |
|
|
<div class="mb-2 px-2 text-xs font-semibold text-gray-500 uppercase tracking-wider">Dashboard</div> |
|
|
<a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100 active-nav"> |
|
|
<i class="fas fa-tachometer-alt text-gray-500"></i> |
|
|
<span class="nav-text">Overview</span> |
|
|
</a> |
|
|
|
|
|
<div class="mb-2 px-2 mt-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Management</div> |
|
|
<a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100"> |
|
|
<i class="fas fa-users text-gray-500"></i> |
|
|
<span class="nav-text">User Management</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100"> |
|
|
<i class="fas fa-user-graduate text-gray-500"></i> |
|
|
<span class="nav-text">Student Management</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100"> |
|
|
<i class="fas fa-chalkboard-teacher text-gray-500"></i> |
|
|
<span class="nav-text">Teacher Management</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100"> |
|
|
<i class="fas fa-book text-gray-500"></i> |
|
|
<span class="nav-text">Course Management</span> |
|
|
</a> |
|
|
|
|
|
<div class="mb-2 px-2 mt-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Academic</div> |
|
|
<a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100"> |
|
|
<i class="fas fa-calendar-alt text-gray-500"></i> |
|
|
<span class="nav-text">Attendance</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100"> |
|
|
<i class="fas fa-clipboard-check text-gray-500"></i> |
|
|
<span class="nav-text">Grading</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100"> |
|
|
<i class="fas fa-file-alt text-gray-500"></i> |
|
|
<span class="nav-text">Examinations</span> |
|
|
</a> |
|
|
|
|
|
<div class="mb-2 px-2 mt-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Financial</div> |
|
|
<a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100"> |
|
|
<i class="fas fa-money-bill-wave text-gray-500"></i> |
|
|
<span class="nav-text">Fee Management</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100"> |
|
|
<i class="fas fa-chart-line text-gray-500"></i> |
|
|
<span class="nav-text">Financial Reports</span> |
|
|
</a> |
|
|
|
|
|
<div class="mb-2 px-2 mt-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Library</div> |
|
|
<a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100"> |
|
|
<i class="fas fa-book-open text-gray-500"></i> |
|
|
<span class="nav-text">Library Management</span> |
|
|
</a> |
|
|
|
|
|
<div class="mb-2 px-2 mt-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Communication</div> |
|
|
<a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100"> |
|
|
<i class="fas fa-comments text-gray-500"></i> |
|
|
<span class="nav-text">Messages</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100"> |
|
|
<i class="fas fa-bullhorn text-gray-500"></i> |
|
|
<span class="nav-text">Announcements</span> |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="main-content md:ml-64 transition-all duration-300"> |
|
|
|
|
|
<header class="bg-white shadow-sm"> |
|
|
<div class="flex justify-between items-center p-4"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<h1 class="text-xl font-semibold text-gray-800">Dashboard Overview</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<button class="p-2 rounded-full hover:bg-gray-100 text-gray-600"> |
|
|
<i class="fas fa-bell text-xl"></i> |
|
|
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<button class="p-2 rounded-full hover:bg-gray-100 text-gray-600"> |
|
|
<i class="fas fa-envelope text-xl"></i> |
|
|
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-blue-500"></span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<button class="flex items-center space-x-2" id="user-menu-button"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-8 h-8 rounded-full object-cover"> |
|
|
<span class="hidden md:inline text-sm font-medium">Sarah Johnson</span> |
|
|
<i class="fas fa-chevron-down text-xs hidden md:inline"></i> |
|
|
</button> |
|
|
|
|
|
<div class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10" id="user-menu"> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="p-4 md:p-6"> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-sm border-l-4 border-indigo-500"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Total Students</p> |
|
|
<p class="text-2xl font-semibold text-gray-800">1,248</p> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-indigo-100 text-indigo-600"> |
|
|
<i class="fas fa-user-graduate text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-xs text-green-600 mt-2"><i class="fas fa-arrow-up mr-1"></i>12% from last month</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm border-l-4 border-green-500"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Total Teachers</p> |
|
|
<p class="text-2xl font-semibold text-gray-800">64</p> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-600"> |
|
|
<i class="fas fa-chalkboard-teacher text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-xs text-green-600 mt-2"><i class="fas fa-arrow-up mr-1"></i>5% from last month</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm border-l-4 border-blue-500"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Courses Offered</p> |
|
|
<p class="text-2xl font-semibold text-gray-800">28</p> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-book text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-600 mt-2">No change from last month</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm border-l-4 border-purple-500"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Attendance Today</p> |
|
|
<p class="text-2xl font-semibold text-gray-800">94%</p> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-purple-100 text-purple-600"> |
|
|
<i class="fas fa-calendar-check text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-xs text-red-600 mt-2"><i class="fas fa-arrow-down mr-1"></i>2% from yesterday</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Student Enrollment</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 text-xs bg-indigo-100 text-indigo-600 rounded-md">Monthly</button> |
|
|
<button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-md">Yearly</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="chart-container"> |
|
|
<canvas id="enrollmentChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Attendance Rate</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 text-xs bg-indigo-100 text-indigo-600 rounded-md">Weekly</button> |
|
|
<button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-md">Monthly</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="chart-container"> |
|
|
<canvas id="attendanceChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Class Performance</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 text-xs bg-indigo-100 text-indigo-600 rounded-md">Term 1</button> |
|
|
<button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-md">Term 2</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="chart-container"> |
|
|
<canvas id="performanceChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden"> |
|
|
<div class="p-6 border-b"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Recent Students</h2> |
|
|
<a href="#" class="text-sm text-indigo-600 hover:text-indigo-800">View All</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<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">Name</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">Admission Date</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10"> |
|
|
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Michael Johnson</div> |
|
|
<div class="text-sm text-gray-500">[email protected]</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Grade 10 - A</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">15 Jan 2023</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10"> |
|
|
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/28.jpg" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Sarah Williams</div> |
|
|
<div class="text-sm text-gray-500">[email protected]</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Grade 11 - B</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">10 Jan 2023</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10"> |
|
|
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/42.jpg" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Robert Brown</div> |
|
|
<div class="text-sm text-gray-500">[email protected]</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Grade 9 - C</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">5 Jan 2023</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden"> |
|
|
<div class="p-6 border-b"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Upcoming Events</h2> |
|
|
<a href="#" class="text-sm text-indigo-600 hover:text-indigo-800">View All</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="divide-y divide-gray-200"> |
|
|
<div class="p-4 hover:bg-gray-50"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 p-2 bg-indigo-100 text-indigo-600 rounded-md"> |
|
|
<i class="fas fa-calendar-day text-lg"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-sm font-medium text-gray-900">Parent-Teacher Meeting</h3> |
|
|
<p class="text-sm text-gray-500">15 Jan 2023, 10:00 AM - 12:00 PM</p> |
|
|
<p class="mt-1 text-sm text-gray-600">All parents are requested to attend the meeting with their respective class teachers.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 hover:bg-gray-50"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 p-2 bg-green-100 text-green-600 rounded-md"> |
|
|
<i class="fas fa-running text-lg"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-sm font-medium text-gray-900">Annual Sports Day</h3> |
|
|
<p class="text-sm text-gray-500">20 Jan 2023, 8:00 AM - 4:00 PM</p> |
|
|
<p class="mt-1 text-sm text-gray-600">Annual sports competition between different houses.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 hover:bg-gray-50"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 p-2 bg-purple-100 text-purple-600 rounded-md"> |
|
|
<i class="fas fa-microscope text-lg"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-sm font-medium text-gray-900">Science Fair</h3> |
|
|
<p class="text-sm text-gray-500">25 Jan 2023, 9:00 AM - 2:00 PM</p> |
|
|
<p class="mt-1 text-sm text-gray-600">Students will showcase their science projects in the school auditorium.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm mb-6"> |
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4">Quick Actions</h2> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
|
|
<a href="#" class="p-4 border rounded-lg hover:bg-gray-50 text-center"> |
|
|
<div class="mx-auto p-3 bg-indigo-100 text-indigo-600 rounded-full w-12 h-12 flex items-center justify-center mb-2"> |
|
|
<i class="fas fa-user-plus text-xl"></i> |
|
|
</div> |
|
|
<p class="text-sm font-medium text-gray-700">Add New Student</p> |
|
|
</a> |
|
|
<a href="#" class="p-4 border rounded-lg hover:bg-gray-50 text-center"> |
|
|
<div class="mx-auto p-3 bg-green-100 text-green-600 rounded-full w-12 h-12 flex items-center justify-center mb-2"> |
|
|
<i class="fas fa-clipboard-check text-xl"></i> |
|
|
</div> |
|
|
<p class="text-sm font-medium text-gray-700">Take Attendance</p> |
|
|
</a> |
|
|
<a href="#" class="p-4 border rounded-lg hover:bg-gray-50 text-center"> |
|
|
<div class="mx-auto p-3 bg-blue-100 text-blue-600 rounded-full w-12 h-12 flex items-center justify-center mb-2"> |
|
|
<i class="fas fa-money-bill-wave text-xl"></i> |
|
|
</div> |
|
|
<p class="text-sm font-medium text-gray-700">Collect Fees</p> |
|
|
</a> |
|
|
<a href="#" class="p-4 border rounded-lg hover:bg-gray-50 text-center"> |
|
|
<div class="mx-auto p-3 bg-purple-100 text-purple-600 rounded-full w-12 h-12 flex items-center justify-center mb-2"> |
|
|
<i class="fas fa-bullhorn text-xl"></i> |
|
|
</div> |
|
|
<p class="text-sm font-medium text-gray-700">Send Announcement</p> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed inset-0 z-50 hidden overflow-y-auto" id="student-registration-modal"> |
|
|
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
|
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
|
|
<div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
|
|
</div> |
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
|
|
<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-2xl sm:w-full"> |
|
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
|
|
<div class="sm:flex sm:items-start"> |
|
|
<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"> |
|
|
<i class="fas fa-user-plus text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Register New Student</h3> |
|
|
<div class="mt-2"> |
|
|
<form class="space-y-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label for="first-name" class="block text-sm font-medium text-gray-700">First Name</label> |
|
|
<input type="text" id="first-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="last-name" class="block text-sm font-medium text-gray-700">Last Name</label> |
|
|
<input type="text" id="last-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700">Email</label> |
|
|
<input type="email" id="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label for="dob" class="block text-sm font-medium text-gray-700">Date of Birth</label> |
|
|
<input type="date" id="dob" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="gender" class="block text-sm font-medium text-gray-700">Gender</label> |
|
|
<select id="gender" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
<option value="male">Male</option> |
|
|
<option value="female">Female</option> |
|
|
<option value="other">Other</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label for="class" class="block text-sm font-medium text-gray-700">Class</label> |
|
|
<select id="class" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
<option value="">Select Class</option> |
|
|
<option value="grade9">Grade 9</option> |
|
|
<option value="grade10">Grade 10</option> |
|
|
<option value="grade11">Grade 11</option> |
|
|
<option value="grade12">Grade 12</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="section" class="block text-sm font-medium text-gray-700">Section</label> |
|
|
<select id="section" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
<option value="">Select Section</option> |
|
|
<option value="A">A</option> |
|
|
<option value="B">B</option> |
|
|
<option value="C">C</option> |
|
|
<option value="D">D</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="address" class="block text-sm font-medium text-gray-700">Address</label> |
|
|
<textarea id="address" rows="2" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label for="parent-name" class="block text-sm font-medium text-gray-700">Parent/Guardian Name</label> |
|
|
<input type="text" id="parent-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label for="parent-phone" class="block text-sm font-medium text-gray-700">Parent Phone</label> |
|
|
<input type="tel" id="parent-phone" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="parent-email" class="block text-sm font-medium text-gray-700">Parent Email</label> |
|
|
<input type="email" id="parent-email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
</div> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
|
|
<button type="button" 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"> |
|
|
Register Student |
|
|
</button> |
|
|
<button type="button" 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" id="cancel-registration"> |
|
|
Cancel |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<script> |
|
|
|
|
|
document.getElementById('sidebar-toggle').addEventListener('click', function() { |
|
|
document.getElementById('sidebar').classList.toggle('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('sidebar-collapse').addEventListener('click', function() { |
|
|
document.getElementById('sidebar').classList.toggle('sidebar-mini'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('user-menu-button').addEventListener('click', function() { |
|
|
document.getElementById('user-menu').classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', function(event) { |
|
|
const userMenu = document.getElementById('user-menu'); |
|
|
const userMenuButton = document.getElementById('user-menu-button'); |
|
|
if (!userMenu.contains(event.target) && !userMenuButton.contains(event.target)) { |
|
|
userMenu.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const registrationModal = document.getElementById('student-registration-modal'); |
|
|
const cancelRegistration = document.getElementById('cancel-registration'); |
|
|
|
|
|
document.querySelectorAll('[href="#"], [data-modal="student-registration"]').forEach(button => { |
|
|
button.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
registrationModal.classList.remove('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
cancelRegistration.addEventListener('click', function() { |
|
|
registrationModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
registrationModal.addEventListener('click', function(e) { |
|
|
if (e.target === registrationModal) { |
|
|
registrationModal.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function showNotification(type, message) { |
|
|
const notificationArea = document.getElementById('notification-area'); |
|
|
const notification = document.createElement('div'); |
|
|
notification.className = `notification bg-white p-4 rounded-md shadow-md flex items-start max-w-xs ${type === 'success' ? 'border-l-4 border-green-500' : 'border-l-4 border-red-500'}`; |
|
|
|
|
|
notification.innerHTML = ` |
|
|
<div class="flex-shrink-0 ${type === 'success' ? 'text-green-500' : 'text-red-500'}"> |
|
|
<i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium ${type === 'success' ? 'text-green-800' : 'text-red-800'}">${message}</p> |
|
|
</div> |
|
|
<button class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
`; |
|
|
|
|
|
notification.querySelector('button').addEventListener('click', () => { |
|
|
notification.remove(); |
|
|
}); |
|
|
|
|
|
notificationArea.appendChild(notification); |
|
|
|
|
|
setTimeout(() => { |
|
|
notification.remove(); |
|
|
}, 5000); |
|
|
} |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
showNotification('success', 'New student registration completed successfully!'); |
|
|
}, 1500); |
|
|
|
|
|
setTimeout(() => { |
|
|
showNotification('error', 'Failed to update attendance record. Please try again.'); |
|
|
}, 4000); |
|
|
|
|
|
|
|
|
const enrollmentCtx = document.getElementById('enrollmentChart').getContext('2d'); |
|
|
const enrollmentChart = new Chart(enrollmentCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], |
|
|
datasets: [{ |
|
|
label: 'New Students', |
|
|
data: [12, 19, 15, 8, 5, 3, 7, 14, 25, 18, 10, 6], |
|
|
backgroundColor: 'rgba(79, 70, 229, 0.1)', |
|
|
borderColor: 'rgba(79, 70, 229, 1)', |
|
|
borderWidth: 2, |
|
|
tension: 0.3, |
|
|
fill: true |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
const attendanceCtx = document.getElementById('attendanceChart').getContext('2d'); |
|
|
const attendanceChart = new Chart(attendanceCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], |
|
|
datasets: [{ |
|
|
label: 'Attendance Rate', |
|
|
data: [92, 94, 96, 95, 93, 90], |
|
|
backgroundColor: 'rgba(16, 185, 129, 0.6)', |
|
|
borderColor: 'rgba(16, 185, 129, 1)', |
|
|
borderWidth: 1 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: false, |
|
|
min: 85, |
|
|
max: 100 |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
const performanceCtx = document.getElementById('performanceChart').getContext('2d'); |
|
|
const performanceChart = new Chart(performanceCtx, { |
|
|
type: 'radar', |
|
|
data: { |
|
|
labels: ['Math', 'Science', 'English', 'History', 'Arts', 'PE'], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'Grade 10-A', |
|
|
data: [85, 78, 92, 88, 76, 95], |
|
|
backgroundColor: 'rgba(99, 102, 241, 0.2)', |
|
|
borderColor: 'rgba(99, 102, 241, 1)', |
|
|
borderWidth: 2, |
|
|
pointBackgroundColor: 'rgba(99, 102, 241, 1)' |
|
|
}, |
|
|
{ |
|
|
label: 'Grade 10-B', |
|
|
data: [78, 85, 88, 82, 80, 90], |
|
|
backgroundColor: 'rgba(236, 72, 153, 0.2)', |
|
|
borderColor: 'rgba(236, 72, 153, 1)', |
|
|
borderWidth: 2, |
|
|
pointBackgroundColor: 'rgba(236, 72, 153, 1)' |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
scales: { |
|
|
r: { |
|
|
angleLines: { |
|
|
display: true |
|
|
}, |
|
|
suggestedMin: 50, |
|
|
suggestedMax: 100 |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=LRMMM/mangmet" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
