|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Teacher Dashboard - Classroom Management</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> |
|
.sidebar { |
|
transition: all 0.3s ease; |
|
} |
|
.sidebar.collapsed { |
|
width: 70px; |
|
} |
|
.sidebar.collapsed .sidebar-text { |
|
display: none; |
|
} |
|
.sidebar.collapsed .logo-text { |
|
display: none; |
|
} |
|
.sidebar.collapsed .nav-item { |
|
justify-content: center; |
|
} |
|
.content { |
|
transition: all 0.3s ease; |
|
} |
|
.content.expanded { |
|
margin-left: 70px; |
|
} |
|
.subject-card:hover { |
|
transform: translateY(-5px); |
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
|
} |
|
.tab-content { |
|
display: none; |
|
} |
|
.tab-content.active { |
|
display: block; |
|
} |
|
.assignment-card:hover .assignment-actions { |
|
opacity: 1; |
|
} |
|
.assignment-actions { |
|
opacity: 0; |
|
transition: opacity 0.3s ease; |
|
} |
|
.calendar-day:hover { |
|
background-color: #f0f9ff; |
|
} |
|
.calendar-day.today { |
|
background-color: #e0f2fe; |
|
} |
|
.calendar-day.has-events::after { |
|
content: ''; |
|
position: absolute; |
|
bottom: 5px; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
width: 6px; |
|
height: 6px; |
|
border-radius: 50%; |
|
background-color: #3b82f6; |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-50 font-sans"> |
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
<div class="sidebar bg-blue-800 text-white w-64 flex flex-col"> |
|
|
|
<div class="p-4 flex items-center space-x-2 border-b border-blue-700"> |
|
<i class="fas fa-chalkboard-teacher text-2xl"></i> |
|
<span class="logo-text text-xl font-bold">EduManage</span> |
|
</div> |
|
|
|
|
|
<div class="p-4 flex items-center space-x-3 border-b border-blue-700"> |
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full"> |
|
<div class="sidebar-text"> |
|
<div class="font-medium">Sarah Johnson</div> |
|
<div class="text-xs text-blue-200">Math & Science Teacher</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<nav class="flex-1 overflow-y-auto"> |
|
<div class="p-2"> |
|
<div class="nav-item px-3 py-2 rounded-md flex items-center space-x-3 text-blue-100 hover:bg-blue-700 cursor-pointer mb-1"> |
|
<i class="fas fa-tachometer-alt"></i> |
|
<span class="sidebar-text">Dashboard</span> |
|
</div> |
|
|
|
<div class="nav-item px-3 py-2 rounded-md flex items-center space-x-3 text-blue-100 hover:bg-blue-700 cursor-pointer mb-1"> |
|
<i class="fas fa-book"></i> |
|
<span class="sidebar-text">Subjects</span> |
|
</div> |
|
|
|
<div class="nav-item px-3 py-2 rounded-md flex items-center space-x-3 text-blue-100 hover:bg-blue-700 cursor-pointer mb-1"> |
|
<i class="fas fa-users"></i> |
|
<span class="sidebar-text">Classes</span> |
|
</div> |
|
|
|
<div class="nav-item px-3 py-2 rounded-md flex items-center space-x-3 text-blue-100 hover:bg-blue-700 cursor-pointer mb-1"> |
|
<i class="fas fa-tasks"></i> |
|
<span class="sidebar-text">Assignments</span> |
|
</div> |
|
|
|
<div class="nav-item px-3 py-2 rounded-md flex items-center space-x-3 text-blue-100 hover:bg-blue-700 cursor-pointer mb-1"> |
|
<i class="fas fa-file-alt"></i> |
|
<span class="sidebar-text">Exams</span> |
|
</div> |
|
|
|
<div class="nav-item px-3 py-2 rounded-md flex items-center space-x-3 text-blue-100 hover:bg-blue-700 cursor-pointer mb-1"> |
|
<i class="fas fa-calendar-alt"></i> |
|
<span class="sidebar-text">Calendar</span> |
|
</div> |
|
|
|
<div class="nav-item px-3 py-2 rounded-md flex items-center space-x-3 text-blue-100 hover:bg-blue-700 cursor-pointer mb-1"> |
|
<i class="fas fa-chart-bar"></i> |
|
<span class="sidebar-text">Reports</span> |
|
</div> |
|
</div> |
|
</nav> |
|
|
|
|
|
<div class="p-4 border-t border-blue-700 flex justify-end"> |
|
<button id="toggleSidebar" class="text-blue-200 hover:text-white"> |
|
<i class="fas fa-chevron-left"></i> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="content flex-1 overflow-y-auto"> |
|
|
|
<header class="bg-white shadow-sm p-4 flex justify-between items-center"> |
|
<h1 class="text-2xl font-bold text-gray-800">Teacher Dashboard</h1> |
|
<div class="flex items-center space-x-4"> |
|
<div class="relative"> |
|
<input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
</div> |
|
<button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> |
|
<i class="fas fa-bell"></i> |
|
</button> |
|
</div> |
|
</header> |
|
|
|
|
|
<main class="p-6"> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> |
|
<div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-blue-500"> |
|
<div class="flex justify-between items-center"> |
|
<div> |
|
<p class="text-gray-500">Subjects</p> |
|
<h3 class="text-2xl font-bold">5</h3> |
|
</div> |
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
|
<i class="fas fa-book text-xl"></i> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-green-500"> |
|
<div class="flex justify-between items-center"> |
|
<div> |
|
<p class="text-gray-500">Classes</p> |
|
<h3 class="text-2xl font-bold">8</h3> |
|
</div> |
|
<div class="p-3 rounded-full bg-green-100 text-green-600"> |
|
<i class="fas fa-users text-xl"></i> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-yellow-500"> |
|
<div class="flex justify-between items-center"> |
|
<div> |
|
<p class="text-gray-500">Assignments</p> |
|
<h3 class="text-2xl font-bold">24</h3> |
|
</div> |
|
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> |
|
<i class="fas fa-tasks text-xl"></i> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-red-500"> |
|
<div class="flex justify-between items-center"> |
|
<div> |
|
<p class="text-gray-500">Exams</p> |
|
<h3 class="text-2xl font-bold">6</h3> |
|
</div> |
|
<div class="p-3 rounded-full bg-red-100 text-red-600"> |
|
<i class="fas fa-file-alt text-xl"></i> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm mb-6"> |
|
<div class="border-b border-gray-200"> |
|
<nav class="flex -mb-px"> |
|
<button class="tab-btn py-4 px-6 border-b-2 font-medium text-sm border-blue-500 text-blue-600" data-tab="subjects"> |
|
<i class="fas fa-book mr-2"></i> Subjects |
|
</button> |
|
<button class="tab-btn py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="classes"> |
|
<i class="fas fa-users mr-2"></i> Classes |
|
</button> |
|
<button class="tab-btn py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="assignments"> |
|
<i class="fas fa-tasks mr-2"></i> Assignments |
|
</button> |
|
<button class="tab-btn py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="exams"> |
|
<i class="fas fa-file-alt mr-2"></i> Exams |
|
</button> |
|
<button class="tab-btn py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="calendar"> |
|
<i class="fas fa-calendar-alt mr-2"></i> Calendar |
|
</button> |
|
</nav> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="tab-contents"> |
|
|
|
<div id="subjects" class="tab-content active"> |
|
<div class="flex justify-between items-center mb-6"> |
|
<h2 class="text-xl font-bold text-gray-800">Your Subjects</h2> |
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
<i class="fas fa-plus mr-2"></i> Add Subject |
|
</button> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
<div class="subject-card bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden transition duration-300"> |
|
<div class="bg-blue-600 p-4 text-white"> |
|
<div class="flex justify-between items-center"> |
|
<h3 class="font-bold text-lg">Mathematics</h3> |
|
<div class="flex space-x-2"> |
|
<button class="p-1 rounded-full hover:bg-blue-500"> |
|
<i class="fas fa-edit"></i> |
|
</button> |
|
<button class="p-1 rounded-full hover:bg-blue-500"> |
|
<i class="fas fa-trash"></i> |
|
</button> |
|
</div> |
|
</div> |
|
<p class="text-blue-100 text-sm mt-1">Grade 9-12</p> |
|
</div> |
|
<div class="p-4"> |
|
<div class="flex justify-between items-center mb-3"> |
|
<div> |
|
<p class="text-gray-500 text-sm">Classes</p> |
|
<p class="font-medium">3</p> |
|
</div> |
|
<div> |
|
<p class="text-gray-500 text-sm">Lessons</p> |
|
<p class="font-medium">15</p> |
|
</div> |
|
<div> |
|
<p class="text-gray-500 text-sm">Students</p> |
|
<p class="font-medium">87</p> |
|
</div> |
|
</div> |
|
<div class="pt-3 border-t border-gray-100"> |
|
<p class="text-gray-500 text-sm mb-1">Recent Activity</p> |
|
<p class="text-sm">New assignment added to Algebra II</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="subject-card bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden transition duration-300"> |
|
<div class="bg-green-600 p-4 text-white"> |
|
<div class="flex justify-between items-center"> |
|
<h3 class="font-bold text-lg">Science</h3> |
|
<div class="flex space-x-2"> |
|
<button class="p-1 rounded-full hover:bg-green-500"> |
|
<i class="fas fa-edit"></i> |
|
</button> |
|
<button class="p-1 rounded-full hover:bg-green-500"> |
|
<i class="fas fa-trash"></i> |
|
</button> |
|
</div> |
|
</div> |
|
<p class="text-green-100 text-sm mt-1">Grade 10-11</p> |
|
</div> |
|
<div class="p-4"> |
|
<div class="flex justify-between items-center mb-3"> |
|
<div> |
|
<p class="text-gray-500 text-sm">Classes</p> |
|
<p class="font-medium">2</p> |
|
</div> |
|
<div> |
|
<p class="text-gray-500 text-sm">Lessons</p> |
|
<p class="font-medium">12</p> |
|
</div> |
|
<div> |
|
<p class="text-gray-500 text-sm">Students</p> |
|
<p class="font-medium">62</p> |
|
</div> |
|
</div> |
|
<div class="pt-3 border-t border-gray-100"> |
|
<p class="text-gray-500 text-sm mb-1">Recent Activity</p> |
|
<p class="text-sm">Chemistry lab scheduled for tomorrow</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="subject-card bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden transition duration-300"> |
|
<div class="bg-purple-600 p-4 text-white"> |
|
<div class="flex justify-between items-center"> |
|
<h3 class="font-bold text-lg">Physics</h3> |
|
<div class="flex space-x-2"> |
|
<button class="p-1 rounded-full hover:bg-purple-500"> |
|
<i class="fas fa-edit"></i> |
|
</button> |
|
<button class="p-1 rounded-full hover:bg-purple-500"> |
|
<i class="fas fa-trash"></i> |
|
</button> |
|
</div> |
|
</div> |
|
<p class="text-purple-100 text-sm mt-1">Grade 11-12</p> |
|
</div> |
|
<div class="p-4"> |
|
<div class="flex justify-between items-center mb-3"> |
|
<div> |
|
<p class="text-gray-500 text-sm">Classes</p> |
|
<p class="font-medium">1</p> |
|
</div> |
|
<div> |
|
<p class="text-gray-500 text-sm">Lessons</p> |
|
<p class="font-medium">8</p> |
|
</div> |
|
<div> |
|
<p class="text-gray-500 text-sm">Students</p> |
|
<p class="font-medium">32</p> |
|
</div> |
|
</div> |
|
<div class="pt-3 border-t border-gray-100"> |
|
<p class="text-gray-500 text-sm mb-1">Recent Activity</p> |
|
<p class="text-sm">Chapter 3 test results uploaded</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="subject-card bg-white rounded-lg shadow-sm border-2 border-dashed border-gray-300 hover:border-blue-500 transition duration-300 flex flex-col items-center justify-center p-6 cursor-pointer"> |
|
<div class="text-blue-500 mb-2"> |
|
<i class="fas fa-plus-circle text-4xl"></i> |
|
</div> |
|
<h3 class="text-lg font-medium text-gray-700">Add New Subject</h3> |
|
<p class="text-gray-500 text-sm mt-1">Create a new subject to organize your classes</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="classes" class="tab-content"> |
|
<div class="flex justify-between items-center mb-6"> |
|
<h2 class="text-xl font-bold text-gray-800">Your Classes</h2> |
|
<div class="flex space-x-3"> |
|
<select class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
<option>Filter by Subject</option> |
|
<option>Mathematics</option> |
|
<option>Science</option> |
|
<option>Physics</option> |
|
</select> |
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
<i class="fas fa-plus mr-2"></i> Add Class |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden"> |
|
<div class="overflow-x-auto"> |
|
<table class="min-w-full divide-y divide-gray-200"> |
|
<thead class="bg-gray-50"> |
|
<tr> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Class Name</th> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subject</th> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Grade</th> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Students</th> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Schedule</th> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
|
</tr> |
|
</thead> |
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
<tr class="hover:bg-gray-50"> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="flex items-center"> |
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"> |
|
<i class="fas fa-calculator"></i> |
|
</div> |
|
<div class="ml-4"> |
|
<div class="text-sm font-medium text-gray-900">Algebra II</div> |
|
<div class="text-sm text-gray-500">Section A</div> |
|
</div> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="text-sm text-gray-900">Mathematics</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-blue-100 text-blue-800">Grade 10</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
28 |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
Mon, Wed, Fri - 9:00 AM |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button> |
|
<button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button> |
|
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> |
|
</td> |
|
</tr> |
|
|
|
<tr class="hover:bg-gray-50"> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="flex items-center"> |
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600"> |
|
<i class="fas fa-atom"></i> |
|
</div> |
|
<div class="ml-4"> |
|
<div class="text-sm font-medium text-gray-900">Chemistry</div> |
|
<div class="text-sm text-gray-500">Section B</div> |
|
</div> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="text-sm text-gray-900">Science</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">Grade 11</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
32 |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
Tue, Thu - 10:30 AM |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button> |
|
<button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button> |
|
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> |
|
</td> |
|
</tr> |
|
|
|
<tr class="hover:bg-gray-50"> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="flex items-center"> |
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600"> |
|
<i class="fas fa-rocket"></i> |
|
</div> |
|
<div class="ml-4"> |
|
<div class="text-sm font-medium text-gray-900">Physics</div> |
|
<div class="text-sm text-gray-500">Honors</div> |
|
</div> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="text-sm text-gray-900">Physics</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-purple-100 text-purple-800">Grade 12</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
24 |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
Mon, Wed, Fri - 1:00 PM |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button> |
|
<button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button> |
|
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> |
|
</td> |
|
</tr> |
|
|
|
<tr class="hover:bg-gray-50"> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="flex items-center"> |
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"> |
|
<i class="fas fa-shapes"></i> |
|
</div> |
|
<div class="ml-4"> |
|
<div class="text-sm font-medium text-gray-900">Geometry</div> |
|
<div class="text-sm text-gray-500">Section C</div> |
|
</div> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="text-sm text-gray-900">Mathematics</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-blue-100 text-blue-800">Grade 9</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
27 |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
Tue, Thu - 8:00 AM |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button> |
|
<button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button> |
|
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> |
|
</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="assignments" class="tab-content"> |
|
<div class="flex justify-between items-center mb-6"> |
|
<h2 class="text-xl font-bold text-gray-800">Assignments</h2> |
|
<div class="flex space-x-3"> |
|
<select class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
<option>All Classes</option> |
|
<option>Algebra II</option> |
|
<option>Chemistry</option> |
|
<option>Physics</option> |
|
<option>Geometry</option> |
|
</select> |
|
<select class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
<option>All Status</option> |
|
<option>Active</option> |
|
<option>Completed</option> |
|
<option>Graded</option> |
|
</select> |
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
<i class="fas fa-plus mr-2"></i> New Assignment |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
<div class="assignment-card bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden"> |
|
<div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
|
<div> |
|
<h3 class="font-bold text-lg">Quadratic Equations Practice</h3> |
|
<p class="text-sm text-gray-500">Algebra II - Section A</p> |
|
</div> |
|
<div class="assignment-actions flex space-x-2"> |
|
<button class="p-1 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200"> |
|
<i class="fas fa-edit text-sm"></i> |
|
</button> |
|
<button class="p-1 rounded-full bg-red-100 text-red-600 hover:bg-red-200"> |
|
<i class="fas fa-trash text-sm"></i> |
|
</button> |
|
</div> |
|
</div> |
|
<div class="p-4"> |
|
<div class="flex justify-between items-center mb-3"> |
|
<div> |
|
<p class="text-gray-500 text-sm">Due Date</p> |
|
<p class="font-medium">May 15, 2023</p> |
|
</div> |
|
<div> |
|
<p class="text-gray-500 text-sm">Status</p> |
|
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Active</span> |
|
</div> |
|
</div> |
|
<div class="mb-3"> |
|
<p class="text-gray-500 text-sm mb-1">Description</p> |
|
<p class="text-sm">Practice solving quadratic equations using factoring, completing the square, and quadratic formula.</p> |
|
</div> |
|
<div class="flex justify-between items-center pt-3 border-t border-gray-100"> |
|
<div> |
|
<p class="text-gray-500 text-sm">Submissions</p> |
|
<p class="font-medium">12/28</p> |
|
</div> |
|
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center"> |
|
View Details <i class="fas fa-chevron-right ml-1 text-xs"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="assignment-card bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden"> |
|
<div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
|
<div> |
|
<h3 class="font-bold text-lg">Chemical Reactions Lab Report</h3> |
|
<p class="text-sm text-gray-500">Chemistry - Section B</p> |
|
</div> |
|
<div class="assignment-actions flex space-x-2"> |
|
<button class="p-1 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200"> |
|
<i class="fas fa-edit text-sm"></i> |
|
</button> |
|
<button class="p-1 rounded-full bg-red-100 text-red-600 hover:bg-red-200"> |
|
<i class="fas fa-trash text-sm"></i> |
|
</button> |
|
</div> |
|
</div> |
|
<div class="p-4"> |
|
<div class="flex justify-between items-center mb-3"> |
|
<div> |
|
<p class="text-gray-500 text-sm">Due Date</p> |
|
<p class="font-medium">May 18, 2023</p> |
|
</div> |
|
<div> |
|
<p class="text-gray-500 text-sm">Status</p> |
|
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Grading</span> |
|
</div> |
|
</div> |
|
<div class="mb-3"> |
|
<p class="text-gray-500 text-sm mb-1">Description</p> |
|
<p class="text-sm">Write a lab report on the chemical reactions experiment conducted last week.</p> |
|
</div> |
|
<div class="flex justify-between items-center pt-3 border-t border-gray-100"> |
|
<div> |
|
<p class="text-gray-500 text-sm">Submissions</p> |
|
<p class="font-medium">28/32</p> |
|
</div> |
|
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center"> |
|
View Details <i class="fas fa-chevron-right ml-1 text-xs"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="assignment-card bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden"> |
|
<div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
|
<div> |
|
<h3 class="font-bold text-lg">Newton's Laws Problems</h3> |
|
<p class="text-sm text-gray-500">Physics - Honors</p> |
|
</div> |
|
<div class="assignment-actions flex space-x-2"> |
|
<button class="p-1 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200"> |
|
<i class="fas fa-edit text-sm"></i> |
|
</button> |
|
<button class="p-1 rounded-full bg-red-100 text-red-600 hover:bg-red-200"> |
|
<i class="fas fa-trash text-sm"></i> |
|
</button> |
|
</div> |
|
</div> |
|
<div class="p-4"> |
|
<div class="flex justify-between items-center mb-3"> |
|
<div> |
|
<p class="text-gray-500 text-sm">Due Date</p> |
|
<p class="font-medium">May 20, 2023</p> |
|
</div> |
|
<div> |
|
<p class="text-gray-500 text-sm">Status</p> |
|
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Active</span> |
|
</div> |
|
</div> |
|
<div class="mb-3"> |
|
<p class="text-gray-500 text-sm mb-1">Description</p> |
|
<p class="text-sm">Solve problems related to Newton's three laws of motion from textbook Chapter 4.</p> |
|
</div> |
|
<div class="flex justify-between items-center pt-3 border-t border-gray-100"> |
|
<div> |
|
<p class="text-gray-500 text-sm">Submissions</p> |
|
<p class="font-medium">5/24</p> |
|
</div> |
|
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center"> |
|
View Details <i class="fas fa-chevron-right ml-1 text-xs"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="assignment-card bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden"> |
|
<div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
|
<div> |
|
<h3 class="font-bold text-lg">Geometry Proofs</h3> |
|
<p class="text-sm text-gray-500">Geometry - Section C</p> |
|
</div> |
|
<div class="assignment-actions flex space-x-2"> |
|
<button class="p-1 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200"> |
|
<i class="fas fa-edit text-sm"></i> |
|
</button> |
|
<button class="p-1 rounded-full bg-red-100 text-red-600 hover:bg-red-200"> |
|
<i class="fas fa-trash text-sm"></i> |
|
</button> |
|
</div> |
|
</div> |
|
<div class="p-4"> |
|
<div class="flex justify-between items-center mb-3"> |
|
<div> |
|
<p class="text-gray-500 text-sm">Due Date</p> |
|
<p class="font-medium">May 10, 2023</p> |
|
</div> |
|
<div> |
|
<p class="text-gray-500 text-sm">Status</p> |
|
<span class="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800">Graded</span> |
|
</div> |
|
</div> |
|
<div class="mb-3"> |
|
<p class="text-gray-500 text-sm mb-1">Description</p> |
|
<p class="text-sm">Complete the geometric proofs worksheet on triangle congruence.</p> |
|
</div> |
|
<div class="flex justify-between items-center pt-3 border-t border-gray-100"> |
|
<div> |
|
<p class="text-gray-500 text-sm">Submissions</p> |
|
<p class="font-medium">27/27</p> |
|
</div> |
|
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center"> |
|
View Details <i class="fas fa-chevron-right ml-1 text-xs"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="exams" class="tab-content"> |
|
<div class="flex justify-between items-center mb-6"> |
|
<h2 class="text-xl font-bold text-gray-800">Exams</h2> |
|
<div class="flex space-x-3"> |
|
<select class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
<option>All Classes</option> |
|
<option>Algebra II</option> |
|
<option>Chemistry</option> |
|
<option>Physics</option> |
|
<option>Geometry</option> |
|
</select> |
|
<select class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
<option>All Status</option> |
|
<option>Upcoming</option> |
|
<option>Completed</option> |
|
<option>Graded</option> |
|
</select> |
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
<i class="fas fa-plus mr-2"></i> Schedule Exam |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden"> |
|
<div class="overflow-x-auto"> |
|
<table class="min-w-full divide-y divide-gray-200"> |
|
<thead class="bg-gray-50"> |
|
<tr> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Exam Title</th> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Class</th> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Average Score</th> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
|
</tr> |
|
</thead> |
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
<tr class="hover:bg-gray-50"> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="flex items-center"> |
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"> |
|
<i class="fas fa-file-alt"></i> |
|
</div> |
|
<div class="ml-4"> |
|
<div class="text-sm font-medium text-gray-900">Chapter 3 Test</div> |
|
<div class="text-sm text-gray-500">Algebra II</div> |
|
</div> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="text-sm text-gray-900">Algebra II - Section A</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="text-sm text-gray-900">May 5, 2023</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
45 min |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Graded</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="flex items-center"> |
|
<div class="w-16 bg-gray-200 rounded-full h-2.5 mr-2"> |
|
<div class="bg-green-500 h-2.5 rounded-full" style="width: 85%"></div> |
|
</div> |
|
<span class="text-sm font-medium">85%</span> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-chart-bar"></i></button> |
|
<button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button> |
|
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> |
|
</td> |
|
</tr> |
|
|
|
<tr class="hover:bg-gray-50"> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="flex items-center"> |
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600"> |
|
<i class="fas fa-flask"></i> |
|
</div> |
|
<div class="ml-4"> |
|
<div class="text-sm font-medium text-gray-900">Chemical Bonds Exam</div> |
|
<div class="text-sm text-gray-500">Chemistry</div> |
|
</div> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="text-sm text-gray-900">Chemistry - Section B</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="text-sm text-gray-900">May 12, 2023</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
60 min |
|
</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">Grading</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="flex items-center"> |
|
<div class="w-16 bg-gray-200 rounded-full h-2.5 mr-2"> |
|
<div class="bg-yellow-500 h-2.5 rounded-full" style="width: 65%"></div> |
|
</div> |
|
<span class="text-sm font-medium">65%</span> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-chart-bar"></i></button> |
|
<button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button> |
|
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> |
|
</td> |
|
</tr> |
|
|
|
<tr class="hover:bg-gray-50"> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="flex items-center"> |
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600"> |
|
<i class="fas fa-atom"></i> |
|
</div> |
|
<div class="ml-4"> |
|
<div class="text-sm font-medium text-gray-900">Midterm Exam</div> |
|
<div class="text-sm text-gray-500">Physics</div> |
|
</div> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="text-sm text-gray-900">Physics - Honors</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="text-sm text-gray-900">May 22, 2023</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
90 min |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Upcoming</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="text-sm text-gray-500">-</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-chart-bar"></i></button> |
|
<button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button> |
|
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> |
|
</td> |
|
</tr> |
|
|
|
<tr class="hover:bg-gray-50"> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="flex items-center"> |
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"> |
|
<i class="fas fa-shapes"></i> |
|
</div> |
|
<div class="ml-4"> |
|
<div class="text-sm font-medium text-gray-900">Triangles Quiz</div> |
|
<div class="text-sm text-gray-500">Geometry</div> |
|
</div> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="text-sm text-gray-900">Geometry - Section C</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="text-sm text-gray-900">May 8, 2023</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
30 min |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Graded</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="flex items-center"> |
|
<div class="w-16 bg-gray-200 rounded-full h-2.5 mr-2"> |
|
<div class="bg-green-500 h-2.5 rounded-full" style="width: 78%"></div> |
|
</div> |
|
<span class="text-sm font-medium">78%</span> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-chart-bar"></i></button> |
|
<button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button> |
|
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> |
|
</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="calendar" class="tab-content"> |
|
<div class="flex justify-between items-center mb-6"> |
|
<h2 class="text-xl font-bold text-gray-800">Teaching Calendar</h2> |
|
<div class="flex space-x-3"> |
|
<button class="border rounded-lg px-3 py-2 hover:bg-gray-100"> |
|
<i class="fas fa-chevron-left"></i> |
|
</button> |
|
<button class="border rounded-lg px-3 py-2 bg-blue-600 text-white"> |
|
Today |
|
</button> |
|
<button class="border rounded-lg px-3 py-2 hover:bg-gray-100"> |
|
<i class="fas fa-chevron-right"></i> |
|
</button> |
|
<select class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
<option>Month</option> |
|
<option>Week</option> |
|
<option>Day</option> |
|
</select> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden"> |
|
|
|
<div class="grid grid-cols-7 gap-px bg-gray-200"> |
|
<div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider"> |
|
Sun |
|
</div> |
|
<div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider"> |
|
Mon |
|
</div> |
|
<div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider"> |
|
Tue |
|
</div> |
|
<div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider"> |
|
Wed |
|
</div> |
|
<div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider"> |
|
Thu |
|
</div> |
|
<div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider"> |
|
Fri |
|
</div> |
|
<div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider"> |
|
Sat |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-7 gap-px bg-gray-200"> |
|
|
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">30</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">1</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">2</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">3</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">4</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">5</div> |
|
<div class="text-xs mt-1 p-1 rounded bg-blue-100 text-blue-800">Algebra II Test</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">6</div> |
|
</div> |
|
|
|
|
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">7</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">8</div> |
|
<div class="text-xs mt-1 p-1 rounded bg-green-100 text-green-800">Geometry Quiz</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">9</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">10</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">11</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">12</div> |
|
<div class="text-xs mt-1 p-1 rounded bg-green-100 text-green-800">Chemistry Exam</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">13</div> |
|
</div> |
|
|
|
|
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">14</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">15</div> |
|
<div class="text-xs mt-1 p-1 rounded bg-blue-100 text-blue-800">Algebra Assignment Due</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">16</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">17</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">18</div> |
|
<div class="text-xs mt-1 p-1 rounded bg-green-100 text-green-800">Chem Lab Report Due</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">19</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">20</div> |
|
</div> |
|
|
|
|
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">21</div> |
|
</div> |
|
<div class="calendar-day today bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs font-bold">22</div> |
|
<div class="text-xs mt-1 p-1 rounded bg-purple-100 text-purple-800">Physics Midterm</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">23</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">24</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">25</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">26</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">27</div> |
|
</div> |
|
|
|
|
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">28</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">29</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">30</div> |
|
</div> |
|
<div class="calendar-day bg-white h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">31</div> |
|
</div> |
|
<div class="calendar-day bg-gray-50 h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">1</div> |
|
</div> |
|
<div class="calendar-day bg-gray-50 h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">2</div> |
|
</div> |
|
<div class="calendar-day bg-gray-50 h-32 p-1 relative"> |
|
<div class="text-right text-xs text-gray-400">3</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
<h3 class="text-lg font-medium text-gray-800 mb-4">Upcoming Events</h3> |
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden"> |
|
<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 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600"> |
|
<i class="fas fa-file-alt"></i> |
|
</div> |
|
<div class="ml-4"> |
|
<div class="text-sm font-medium text-gray-900">Physics Midterm</div> |
|
<div class="text-sm text-gray-500">May 22, 2023 - 1:00 PM to 2:30 PM</div> |
|
<div class="mt-1 text-sm text-gray-700">Physics Honors class - Room 204</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="p-4 hover:bg-gray-50"> |
|
<div class="flex items-start"> |
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600"> |
|
<i class="fas fa-flask"></i> |
|
</div> |
|
<div class="ml-4"> |
|
<div class="text-sm font-medium text-gray-900">Chemistry Lab</div> |
|
<div class="text-sm text-gray-500">May 24, 2023 - 10:30 AM to 12:00 PM</div> |
|
<div class="mt-1 text-sm text-gray-700">Chemical Reactions Experiment - Lab 3</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="p-4 hover:bg-gray-50"> |
|
<div class="flex items-start"> |
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"> |
|
<i class="fas fa-tasks"></i> |
|
</div> |
|
<div class="ml-4"> |
|
<div class="text-sm font-medium text-gray-900">Assignment Due</div> |
|
<div class="text-sm text-gray-500">May 25, 2023 - 11:59 PM</div> |
|
<div class="mt-1 text-sm text-gray-700">Newton's Laws Problems - Physics Honors</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</main> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
|
|
document.getElementById('toggleSidebar').addEventListener('click', function() { |
|
const sidebar = document.querySelector('.sidebar'); |
|
const content = document.querySelector('.content'); |
|
|
|
sidebar.classList.toggle('collapsed'); |
|
content.classList.toggle('expanded'); |
|
|
|
|
|
if (sidebar.classList.contains('collapsed')) { |
|
this.innerHTML = '<i class="fas fa-chevron-right"></i>'; |
|
} else { |
|
this.innerHTML = '<i class="fas fa-chevron-left"></i>'; |
|
} |
|
}); |
|
|
|
|
|
const tabButtons = document.querySelectorAll('.tab-btn'); |
|
const tabContents = document.querySelectorAll('.tab-content'); |
|
|
|
tabButtons.forEach(button => { |
|
button.addEventListener('click', function() { |
|
|
|
tabButtons.forEach(btn => { |
|
btn.classList.remove('border-blue-500', 'text-blue-600'); |
|
btn.classList.add('border-transparent', 'text-gray-500'); |
|
}); |
|
|
|
tabContents.forEach(content => { |
|
content.classList.remove('active'); |
|
}); |
|
|
|
|
|
this.classList.remove('border-transparent', 'text-gray-500'); |
|
this.classList.add('border-blue-500', 'text-blue-600'); |
|
|
|
const tabId = this.getAttribute('data-tab'); |
|
document.getElementById(tabId).classList.add('active'); |
|
}); |
|
}); |
|
|
|
|
|
const today = new Date(); |
|
const todayDate = today.getDate(); |
|
|
|
|
|
document.querySelectorAll('.calendar-day').forEach(day => { |
|
const dayNumber = day.querySelector('div').textContent; |
|
if (parseInt(dayNumber) === todayDate) { |
|
day.classList.add('today'); |
|
} |
|
}); |
|
|
|
|
|
const events = [ |
|
{ date: 5, title: 'Algebra II Test', color: 'blue' }, |
|
{ date: 8, title: 'Geometry Quiz', color: 'green' }, |
|
{ date: 12, title: 'Chemistry Exam', color: 'green' }, |
|
{ date: 15, title: 'Algebra Assignment Due', color: 'blue' }, |
|
{ date: 18, title: 'Chem Lab Report Due', color: 'green' }, |
|
{ date: 22, title: 'Physics Midterm', color: 'purple' } |
|
]; |
|
|
|
|
|
events.forEach(event => { |
|
const dayElements = document.querySelectorAll('.calendar-day'); |
|
dayElements.forEach(day => { |
|
const dayNumber = day.querySelector('div').textContent; |
|
if (parseInt(dayNumber) === event.date) { |
|
day.classList.add('has-events'); |
|
const eventElement = document.createElement('div'); |
|
eventElement.className = `text-xs mt-1 p-1 rounded bg-${event.color}-100 text-${event.color}-800`; |
|
eventElement.textContent = event.title; |
|
day.appendChild(eventElement); |
|
} |
|
}); |
|
}); |
|
</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=joyman12/checkchue" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
