| <!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="preconnect" href="https://fonts.googleapis.com">
|
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
| <style>
|
| body {
|
| font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif;
|
| }
|
| </style>
|
| <script>
|
| tailwind.config = {
|
| theme: {
|
| extend: {
|
| fontFamily: {
|
| 'vazir': ['Vazirmatn', 'system-ui', '-apple-system', 'sans-serif'],
|
| }
|
| }
|
| }
|
| }
|
| </script>
|
| </head>
|
| <body class="font-vazir bg-gray-50 min-h-screen">
|
|
|
| <nav style="background-color: #1b6e6e;" class="shadow-lg border-b border-gray-200 sticky top-0 z-50">
|
| <div class="max-w-7xl mx-auto px-4">
|
| <div class="flex items-center justify-between h-16">
|
|
|
| <div class="flex items-center gap-3">
|
| <div class="bg-white/20 w-10 h-10 rounded-lg flex items-center justify-center">
|
| <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
|
| <path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z"/>
|
| </svg>
|
| </div>
|
| <div>
|
| <h1 class="text-xl font-bold text-white">TalimBot</h1>
|
| <p class="text-xs text-white/80">سیستم گروه‌بندی هوشمند</p>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="hidden md:flex items-center gap-1">
|
| <a href="student-dashboard.html" class="px-4 py-2 text-white/80 hover:text-white hover:bg-white/10 rounded-lg font-medium transition-colors">
|
| <span class="flex items-center gap-2">
|
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
| <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
|
| </svg>
|
| داشبورد
|
| </span>
|
| </a>
|
| <a href="#" class="px-4 py-2 text-white bg-white/20 rounded-lg font-semibold border-b-2 border-white">
|
| <span class="flex items-center gap-2">
|
| <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
|
| </svg>
|
| گروه من
|
| </span>
|
| </a>
|
| </div>
|
|
|
|
|
| <div class="flex items-center gap-4">
|
| <div class="hidden md:block text-left">
|
| <p class="text-sm font-semibold text-white" id="navStudentName">دانش آموز</p>
|
| <p class="text-xs text-white/80" id="navStudentNumber">-</p>
|
| </div>
|
| <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center text-white font-bold">
|
| <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
| <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
|
| </svg>
|
| </div>
|
| <a href="login.html" class="text-white/80 hover:text-red-300 transition-colors" title="خروج">
|
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
|
| </svg>
|
| </a>
|
| </div>
|
| </div>
|
| </div>
|
| </nav>
|
|
|
|
|
| <div class="max-w-7xl mx-auto px-4 py-8">
|
|
|
| <div class="mb-8 flex items-center gap-3">
|
| <svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
|
| </svg>
|
| <div>
|
| <h2 class="text-3xl font-bold text-gray-900">گروه مطالعاتی شما</h2>
|
| <p class="text-gray-600" id="headerSubtext">مشاهده اعضای گروه و اطلاعات همکاران</p>
|
| </div>
|
| </div>
|
|
|
|
|
|
|
| <div id="loadingState" class="hidden">
|
| <div class="bg-white rounded-xl shadow-md p-12 text-center">
|
| <div class="inline-block w-16 h-16 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mb-4"></div>
|
| <p class="text-gray-600 font-semibold">در حال بارگذاری اطلاعات گروه...</p>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="notGroupedState" class="hidden">
|
| <div class="bg-white rounded-xl shadow-md p-12">
|
| <div class="text-center mb-8">
|
| <svg class="w-24 h-24 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
| </svg>
|
| <h3 class="text-2xl font-bold text-gray-900 mb-3" id="notGroupedTitle">گروه‌بندی هنوز انجام نشده است</h3>
|
| <p class="text-gray-600 mb-2" id="notGroupedMessage">معلم هنوز فرآیند گروه‌بندی را تکمیل نکرده است.</p>
|
| <p class="text-gray-500">لطفاً بعداً دوباره بررسی کنید یا با معلم خود تماس بگیرید.</p>
|
| </div>
|
| <div class="flex gap-4 justify-center">
|
| <button onclick="window.location.href='student-dashboard.html'"
|
| class="bg-gray-600 hover:bg-gray-700 text-white py-3 px-6 rounded-lg font-semibold transition-colors">
|
| بازگشت به داشبورد
|
| </button>
|
| <button onclick="window.location.reload()"
|
| class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg font-semibold transition-colors">
|
| بروزرسانی صفحه
|
| </button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="groupedState" class="hidden space-y-6">
|
|
|
| <div id="courseInfo" class="bg-blue-50 border-r-4 border-blue-500 rounded-lg p-4 flex items-center gap-2">
|
| <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
|
| </svg>
|
| <p class="text-blue-800 font-semibold"><strong>درس:</strong> <span id="courseName">-</span></p>
|
| </div>
|
|
|
|
|
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
|
| <div class="bg-white rounded-xl shadow-md p-6">
|
| <div class="flex items-center gap-2 mb-4">
|
| <svg class="w-7 h-7 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/>
|
| </svg>
|
| <h3 class="text-xl font-bold text-gray-900">گروه <span id="groupNumber">-</span></h3>
|
| </div>
|
| <div class="grid grid-cols-2 gap-4">
|
| <div class="bg-blue-50 rounded-lg p-4 text-center">
|
| <p class="text-gray-600 text-sm mb-1">تعداد اعضا</p>
|
| <p class="text-3xl font-bold text-blue-600" id="memberCount">-</p>
|
| </div>
|
| <div class="bg-green-50 rounded-lg p-4 text-center">
|
| <p class="text-gray-600 text-sm mb-1">وضعیت گروه</p>
|
| <p class="text-lg font-bold text-green-600">فعال</p>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="bg-white rounded-xl shadow-md p-6">
|
| <div class="flex items-center gap-2 mb-4">
|
| <svg class="w-7 h-7 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
| </svg>
|
| <h3 class="text-xl font-bold text-gray-900">پروفایل من در گروه</h3>
|
| </div>
|
| <div class="space-y-3">
|
| <div class="flex justify-between items-center py-2 border-b border-gray-200">
|
| <span class="text-gray-600 font-medium">نوع شخصیت MBTI</span>
|
| <span class="text-gray-900 font-bold" id="myMbti">-</span>
|
| </div>
|
| <div class="flex justify-between items-center py-2 border-b border-gray-200">
|
| <span class="text-gray-600 font-medium">سبک یادگیری</span>
|
| <span class="text-gray-900 font-bold" id="myLearningStyle">-</span>
|
| </div>
|
| <div class="flex justify-between items-center py-2">
|
| <span class="text-gray-600 font-medium">نمره</span>
|
| <span class="text-gray-900 font-bold" id="myGrade">-</span>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="bg-white rounded-xl shadow-md p-6">
|
| <div class="flex items-center gap-2 mb-4">
|
| <svg class="w-7 h-7 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
|
| </svg>
|
| <h3 class="text-xl font-bold text-gray-900">اعضای گروه</h3>
|
| </div>
|
| <div class="space-y-3" id="groupMembersList">
|
|
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="flex gap-4">
|
| <button onclick="window.location.href='student-dashboard.html'"
|
| class="flex-1 bg-gray-600 hover:bg-gray-700 text-white py-4 px-6 rounded-xl font-bold text-lg transition-colors">
|
| بازگشت به داشبورد
|
| </button>
|
| <button onclick="window.location.reload()"
|
| class="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-4 px-6 rounded-xl font-bold text-lg transition-colors flex items-center justify-center gap-2">
|
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
|
| </svg>
|
| بروزرسانی اطلاعات
|
| </button>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="errorState" class="hidden">
|
| <div class="bg-white rounded-xl shadow-md p-12">
|
| <div class="text-center mb-8">
|
| <svg class="w-24 h-24 mx-auto mb-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
| </svg>
|
| <h3 class="text-2xl font-bold text-gray-900 mb-3">خطا در بارگذاری اطلاعات!</h3>
|
| <p class="text-gray-600" id="errorMessage">قادر به بارگذاری اطلاعات گروه نیستیم.</p>
|
| </div>
|
| <div class="text-center">
|
| <button onclick="window.location.href='student-dashboard.html'"
|
| class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg font-semibold transition-colors">
|
| بازگشت به داشبورد
|
| </button>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <footer class="bg-white border-t border-gray-200 mt-16">
|
| <div class="max-w-7xl mx-auto px-4 py-6">
|
| <div class="text-center text-gray-600 text-sm">
|
| <p>© ۲۰۲۵ TalimBot - سیستم گروه‌بندی هوشمند دانش آموزان</p>
|
| </div>
|
| </div>
|
| </footer>
|
|
|
| <script src="../assets/js/data.js"></script>
|
| <script src="../assets/js/grouping.js"></script>
|
| <script>
|
| let currentStudent = null;
|
|
|
|
|
| function checkAuth() {
|
| const studentNumber = sessionStorage.getItem('currentStudent');
|
| if (!studentNumber) {
|
| window.location.href = 'login.html';
|
| return null;
|
| }
|
| return studentNumber;
|
| }
|
|
|
| function showState(state) {
|
| document.getElementById('loadingState').classList.add('hidden');
|
| document.getElementById('notGroupedState').classList.add('hidden');
|
| document.getElementById('groupedState').classList.add('hidden');
|
| document.getElementById('errorState').classList.add('hidden');
|
|
|
| if (state) {
|
| document.getElementById(state).classList.remove('hidden');
|
| }
|
| }
|
|
|
| async function loadGroupInfo() {
|
| showState('loadingState');
|
|
|
| const studentNumber = checkAuth();
|
| if (!studentNumber) return;
|
|
|
| try {
|
| currentStudent = await getStudent(studentNumber);
|
|
|
| if (!currentStudent) {
|
| showState('errorState');
|
| document.getElementById('errorMessage').textContent = 'دانشجو یافت نشد. لطفاً دوباره وارد شوید.';
|
| return;
|
| }
|
|
|
|
|
| document.getElementById('navStudentName').textContent = currentStudent.name;
|
| document.getElementById('navStudentNumber').textContent = currentStudent.studentNumber;
|
|
|
| if (!currentStudent.mbti || !currentStudent.learningStyle) {
|
| showState('errorState');
|
| document.getElementById('errorMessage').textContent = 'لطفاً ابتدا پروفایل خود را در داشبورد تکمیل کنید.';
|
| return;
|
| }
|
|
|
| const status = await getGroupingStats();
|
|
|
| if (!status.groupingComplete || !currentStudent.group) {
|
| showState('notGroupedState');
|
| document.getElementById('notGroupedTitle').textContent = 'گروه‌بندی هنوز انجام نشده است';
|
| document.getElementById('notGroupedMessage').textContent = 'معلم هنوز فرآیند گروه‌بندی را تکمیل نکرده است.';
|
| return;
|
| }
|
|
|
|
|
| if (!status.resultsVisible) {
|
| showState('notGroupedState');
|
| document.getElementById('notGroupedTitle').textContent = 'نتایج گروه‌بندی هنوز نمایش داده نشده';
|
| document.getElementById('notGroupedMessage').textContent = 'معلم گروه‌بندی را انجام داده است اما هنوز آن را برای دانش‌آموزان نمایش نداده است.';
|
| return;
|
| }
|
|
|
| await displayGroupInfo();
|
| } catch (error) {
|
| console.error('Error loading group info:', error);
|
| showState('errorState');
|
| document.getElementById('errorMessage').textContent = 'خطا در بارگذاری اطلاعات. لطفاً اطمینان حاصل کنید که سرور در حال اجرا است.';
|
| }
|
| }
|
|
|
| async function displayGroupInfo() {
|
| const allStudents = await getAllStudents();
|
| const groupMembers = allStudents.filter(s => s.group === currentStudent.group);
|
|
|
| document.getElementById('headerSubtext').textContent = `شما در گروه ${currentStudent.group} قرار دارید`;
|
|
|
| const status = await getGroupingStats();
|
| const courseName = status.courseName;
|
| if (courseName) {
|
| document.getElementById('courseInfo').classList.remove('hidden');
|
| document.getElementById('courseName').textContent = courseName;
|
| } else {
|
| document.getElementById('courseInfo').classList.add('hidden');
|
| }
|
|
|
| document.getElementById('groupNumber').textContent = currentStudent.group;
|
| document.getElementById('memberCount').textContent = groupMembers.length;
|
|
|
| document.getElementById('myMbti').textContent = currentStudent.mbti || 'تنظیم نشده';
|
| document.getElementById('myLearningStyle').textContent = currentStudent.learningStyle || 'تنظیم نشده';
|
| document.getElementById('myGrade').textContent = currentStudent.grade.toFixed(2);
|
|
|
| const membersList = document.getElementById('groupMembersList');
|
| membersList.innerHTML = '';
|
|
|
| groupMembers.forEach(member => {
|
| const div = document.createElement('div');
|
| const isMe = member.studentNumber === currentStudent.studentNumber;
|
|
|
| div.className = `flex items-start gap-4 p-4 rounded-lg border-2 transition-all ${
|
| isMe
|
| ? 'bg-blue-50 border-blue-500 shadow-md'
|
| : 'bg-gray-50 border-gray-200 hover:border-blue-300 hover:shadow-sm'
|
| }`;
|
|
|
| div.innerHTML = `
|
| <div class="flex-shrink-0">
|
| <div class="w-12 h-12 rounded-full ${isMe ? 'bg-blue-500' : 'bg-gray-400'} flex items-center justify-center text-white">
|
| <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20">
|
| ${isMe
|
| ? '<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />'
|
| : '<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>'
|
| }
|
| </svg>
|
| </div>
|
| </div>
|
| <div class="flex-1">
|
| <div class="flex items-center gap-2 mb-1">
|
| <h4 class="font-bold text-lg text-gray-900">${member.name}</h4>
|
| ${isMe ? '<span class="bg-blue-500 text-white text-xs px-2 py-1 rounded-full font-semibold">شما</span>' : ''}
|
| </div>
|
| <p class="text-sm text-gray-600 mb-2">${member.studentNumber}</p>
|
| <div class="flex flex-wrap gap-3 text-sm">
|
| <span class="bg-white px-3 py-1 rounded-lg border border-gray-200">
|
| <strong>MBTI:</strong> ${member.mbti || 'ندارد'}
|
| </span>
|
| <span class="bg-white px-3 py-1 rounded-lg border border-gray-200">
|
| <strong>سبک:</strong> ${member.learningStyle || 'ندارد'}
|
| </span>
|
| ${member.ams ? `<span class="bg-white px-3 py-1 rounded-lg border border-gray-200">
|
| <strong>AMS:</strong> ${member.ams}
|
| </span>` : ''}
|
| ${member.cooperative ? `<span class="bg-white px-3 py-1 rounded-lg border border-gray-200">
|
| <strong>همکاری:</strong> ${member.cooperative}
|
| </span>` : ''}
|
| </div>
|
| </div>
|
| `;
|
|
|
| membersList.appendChild(div);
|
| });
|
|
|
| showState('groupedState');
|
| }
|
|
|
| window.onload = () => {
|
| setTimeout(loadGroupInfo, 500);
|
| };
|
| </script>
|
| </body>
|
| </html>
|
|
|
|
|
