Hugging Face's logo

Spaces:
Bimarz
/
teacher
Running

App Files Community
teacher / index.html
Bimarz's picture
Bimarz
Add 2 files
72fa600 verified
raw
history blame contribute delete
31.2 kB
 <!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>پنل مدیریت معلم</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>
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
font-family: 'Vazirmatn', sans-serif;
}
.sidebar-item:hover .sidebar-tooltip {
opacity: 1;
visibility: visible;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="hidden md:flex md:flex-shrink-0">
<div class="flex flex-col w-64 border-l border-gray-200 bg-white">
<!-- Sidebar header -->
<div class="flex items-center justify-center h-16 px-4 border-b border-gray-200">
<div class="flex items-center">
<i class="fas fa-chalkboard-teacher text-2xl text-indigo-600 mr-2"></i>
<span class="text-xl font-bold text-gray-800">پنل معلم</span>
</div>
</div>
<!-- Sidebar content -->
<div class="flex flex-col flex-grow overflow-y-auto scrollbar-hide">
<!-- User profile -->
<div class="flex items-center px-4 py-6 border-b border-gray-200">
<img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="معلم">
<div class="mr-3">
<p class="text-sm font-medium text-gray-900">سرکار خانم احمدی</p>
<p class="text-xs text-gray-500">دبیر ریاضی</p>
</div>
</div>
<!-- Navigation -->
<nav class="flex-1 px-2 py-4 space-y-1">
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-white bg-indigo-600 rounded-lg">
<i class="fas fa-home ml-3"></i>
<span>داشبورد</span>
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
<i class="fas fa-users ml-3"></i>
<span>دانش آموزان</span>
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
<i class="fas fa-book ml-3"></i>
<span>درس‌ها</span>
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
<i class="fas fa-tasks ml-3"></i>
<span>تکالیف</span>
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
<i class="fas fa-chart-bar ml-3"></i>
<span>نمرات</span>
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
<i class="fas fa-calendar-alt ml-3"></i>
<span>برنامه هفتگی</span>
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
<i class="fas fa-comments ml-3"></i>
<span>گفتگوها</span>
</a>
</nav>
</div>
<!-- Sidebar footer -->
<div class="p-4 border-t border-gray-200">
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
<i class="fas fa-cog ml-3"></i>
<span>تنظیمات</span>
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-red-600 hover:bg-gray-100 rounded-lg">
<i class="fas fa-sign-out-alt ml-3"></i>
<span>خروج</span>
</a>
</div>
</div>
</div>
<!-- Mobile sidebar -->
<div class="md:hidden fixed inset-0 z-40">
<div class="fixed inset-0 bg-gray-600 bg-opacity-75" aria-hidden="true"></div>
<div class="relative flex flex-col w-full max-w-xs h-full bg-white">
<div class="flex items-center justify-between h-16 px-4 border-b border-gray-200">
<div class="flex items-center">
<i class="fas fa-chalkboard-teacher text-2xl text-indigo-600 ml-2"></i>
<span class="text-xl font-bold text-gray-800">پنل معلم</span>
</div>
<button class="text-gray-500 hover:text-gray-600">
<i class="fas fa-times"></i>
</button>
</div>
<div class="flex-1 overflow-y-auto py-4">
<nav class="px-2 space-y-1">
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-white bg-indigo-600 rounded-lg">
<i class="fas fa-home ml-3"></i>
<span>داشبورد</span>
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
<i class="fas fa-users ml-3"></i>
<span>دانش آموزان</span>
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
<i class="fas fa-book ml-3"></i>
<span>درس‌ها</span>
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
<i class="fas fa-tasks ml-3"></i>
<span>تکالیف</span>
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
<i class="fas fa-chart-bar ml-3"></i>
<span>نمرات</span>
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
<i class="fas fa-calendar-alt ml-3"></i>
<span>برنامه هفتگی</span>
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
<i class="fas fa-comments ml-3"></i>
<span>گفتگوها</span>
</a>
</nav>
</div>
<div class="p-4 border-t border-gray-200">
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
<i class="fas fa-cog ml-3"></i>
<span>تنظیمات</span>
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-red-600 hover:bg-gray-100 rounded-lg">
<i class="fas fa-sign-out-alt ml-3"></i>
<span>خروج</span>
</a>
</div>
</div>
</div>
<!-- Main content -->
<div class="flex flex-col flex-1 overflow-hidden">
<!-- Top navigation -->
<div class="flex items-center justify-between h-16 px-4 border-b border-gray-200 bg-white">
<div class="flex items-center">
<button class="md:hidden text-gray-500 hover:text-gray-600">
<i class="fas fa-bars"></i>
</button>
<h1 class="text-lg font-medium text-gray-800 mr-2">داشبورد</h1>
</div>
<div class="flex items-center space-x-4 space-x-reverse">
<button class="p-1 text-gray-500 hover:text-gray-600">
<i class="fas fa-bell"></i>
</button>
<button class="p-1 text-gray-500 hover:text-gray-600">
<i class="fas fa-envelope"></i>
</button>
<div class="relative">
<button class="flex items-center text-gray-500 hover:text-gray-600">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="معلم">
<span class="mr-2 text-sm font-medium">سرکار خانم احمدی</span>
<i class="fas fa-chevron-down text-xs"></i>
</button>
</div>
</div>
</div>
<!-- Main content area -->
<div class="flex-1 overflow-auto p-4 bg-gray-50">
<!-- Stats cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
<div class="bg-white p-4 rounded-lg shadow border-r-4 border-indigo-500">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">تعداد دانش آموزان</p>
<p class="text-2xl font-bold text-gray-800">32</p>
</div>
<div class="p-3 rounded-full bg-indigo-100 text-indigo-600">
<i class="fas fa-users"></i>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow border-r-4 border-blue-500">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">درس‌های فعال</p>
<p class="text-2xl font-bold text-gray-800">4</p>
</div>
<div class="p-3 rounded-full bg-blue-100 text-blue-600">
<i class="fas fa-book"></i>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow border-r-4 border-green-500">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">تکالیف جدید</p>
<p class="text-2xl font-bold text-gray-800">12</p>
</div>
<div class="p-3 rounded-full bg-green-100 text-green-600">
<i class="fas fa-tasks"></i>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow border-r-4 border-yellow-500">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">پیام‌های خوانده نشده</p>
<p class="text-2xl font-bold text-gray-800">5</p>
</div>
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
<i class="fas fa-comments"></i>
</div>
</div>
</div>
</div>
<!-- Recent activities and upcoming tasks -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Recent activities -->
<div class="lg:col-span-2 bg-white p-4 rounded-lg shadow">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-medium text-gray-800">فعالیت‌های اخیر</h2>
<a href="#" class="text-sm text-indigo-600 hover:text-indigo-800">مشاهده همه</a>
</div>
<div class="space-y-4">
<div class="flex items-start">
<div class="p-2 rounded-full bg-indigo-100 text-indigo-600 mr-3">
<i class="fas fa-book"></i>
</div>
<div>
<p class="text-sm font-medium text-gray-800">درس جدید اضافه شد</p>
<p class="text-xs text-gray-500">ریاضی پایه دهم - 2 ساعت پیش</p>
</div>
</div>
<div class="flex items-start">
<div class="p-2 rounded-full bg-green-100 text-green-600 mr-3">
<i class="fas fa-check-circle"></i>
</div>
<div>
<p class="text-sm font-medium text-gray-800">تکلیف بررسی شد</p>
<p class="text-xs text-gray-500">تکلیف فصل 3 هندسه - 5 ساعت پیش</p>
</div>
</div>
<div class="flex items-start">
<div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3">
<i class="fas fa-comment"></i>
</div>
<div>
<p class="text-sm font-medium text-gray-800">پیام جدید از دانش آموز</p>
<p class="text-xs text-gray-500">سارا محمدی - دیروز</p>
</div>
</div>
<div class="flex items-start">
<div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mr-3">
<i class="fas fa-exclamation-circle"></i>
</div>
<div>
<p class="text-sm font-medium text-gray-800">تکلیف جدید ارسال شد</p>
<p class="text-xs text-gray-500">حل مسئله‌های جبر - دیروز</p>
</div>
</div>
</div>
</div>
<!-- Upcoming tasks -->
<div class="bg-white p-4 rounded-lg shadow">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-medium text-gray-800">برنامه‌های پیش رو</h2>
<a href="#" class="text-sm text-indigo-600 hover:text-indigo-800">مشاهده همه</a>
</div>
<div class="space-y-4">
<div class="p-3 border border-gray-200 rounded-lg">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-800">جلسه اول - مثلثات</p>
<p class="text-xs text-gray-500">کلاس 10A - فردا ساعت 10:00</p>
</div>
<button class="text-indigo-600 hover:text-indigo-800">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
<div class="p-3 border border-gray-200 rounded-lg">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-800">مهلت تحویل تکلیف</p>
<p class="text-xs text-gray-500">مسائل فصل 2 - 2 روز دیگر</p>
</div>
<button class="text-indigo-600 hover:text-indigo-800">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
<div class="p-3 border border-gray-200 rounded-lg">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-800">جلسه معلمان</p>
<p class="text-xs text-gray-500">سه‌شنبه ساعت 14:00</p>
</div>
<button class="text-indigo-600 hover:text-indigo-800">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
<div class="p-3 border border-gray-200 rounded-lg">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-800">ارزیابی نیم‌سال</p>
<p class="text-xs text-gray-500">هفته آینده</p>
</div>
<button class="text-indigo-600 hover:text-indigo-800">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Students performance -->
<div class="mt-6 bg-white p-4 rounded-lg shadow">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-medium text-gray-800">عملکرد دانش آموزان</h2>
<div class="flex space-x-2 space-x-reverse">
<button class="px-3 py-1 text-sm bg-indigo-600 text-white rounded-lg">ریاضی</button>
<button class="px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded-lg">هندسه</button>
<button class="px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded-lg">جبر</button>
</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-right text-xs font-medium text-gray-500 uppercase tracking-wider">نام دانش آموز</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">حضور</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">میانگین نمرات</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">وضعیت</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">عملیات</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="mr-4">
<div class="text-sm font-medium text-gray-900">علی رضایی</div>
<div class="text-sm text-gray-500">کلاس 10A</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">95%</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">18.7</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">عالی</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900">مشاهده</a>
</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="mr-4">
<div class="text-sm font-medium text-gray-900">سارا محمدی</div>
<div class="text-sm text-gray-500">کلاس 10A</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">90%</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">17.5</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">خوب</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900">مشاهده</a>
</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/41.jpg" alt="">
</div>
<div class="mr-4">
<div class="text-sm font-medium text-gray-900">رضا حسینی</div>
<div class="text-sm text-gray-500">کلاس 10A</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">85%</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">16.2</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">متوسط</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900">مشاهده</a>
</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/63.jpg" alt="">
</div>
<div class="mr-4">
<div class="text-sm font-medium text-gray-900">نازنین کریمی</div>
<div class="text-sm text-gray-500">کلاس 10A</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">75%</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">14.8</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">نیاز به تلاش</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900">مشاهده</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
// Mobile sidebar toggle
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuButton = document.querySelector('.md\\:hidden button');
const mobileSidebar = document.querySelector('.md\\:hidden.fixed');
mobileMenuButton.addEventListener('click', function() {
mobileSidebar.classList.toggle('hidden');
});
// Close mobile sidebar when clicking outside
document.addEventListener('click', function(event) {
if (!event.target.closest('.md\\:hidden.fixed') && !event.target.closest('.md\\:hidden button') && !mobileSidebar.classList.contains('hidden')) {
mobileSidebar.classList.add('hidden');
}
});
});
</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=Bimarz/teacher" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>