1098 lines
51 KiB
HTML
1098 lines
51 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
{% load tz %}
|
|
{% load app_filters %}
|
|
|
|
{% block extrastyle %}
|
|
{{ block.super }}
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Font Awesome -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
|
|
<!-- Viewport meta tag for responsiveness -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<!-- Custom Dashboard CSS -->
|
|
<link href="{% static 'css/dashboard.css' %}" rel="stylesheet" />
|
|
<!-- Responsive overrides -->
|
|
<style>
|
|
@media (max-width: 768px) {
|
|
.welcome-section h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
.summary-card .card-body {
|
|
padding: 0.75rem;
|
|
}
|
|
.table-responsive {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.bottom-nav {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
.profile-actions {
|
|
margin-top: 1rem;
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
@media (max-width: 576px) {
|
|
.container-fluid {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
.col-md-6, .col-lg-3, .col-md-4, .col-md-3 {
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
.row {
|
|
margin-left: -5px;
|
|
margin-right: -5px;
|
|
}
|
|
.modal-body {
|
|
padding: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block extrahead %}
|
|
{{ block.super }}
|
|
<!-- jQuery -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<!-- Bootstrap JS Bundle with Popper -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<!-- Custom Dashboard JS -->
|
|
<script src="{% static 'js/dashboard.js' %}"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="container-fluid py-4">
|
|
<!-- Welcome Section -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="content-card welcome-section">
|
|
<div class="d-flex justify-content-between align-items-center flex-wrap">
|
|
{% if student.image %}
|
|
<img src="{{ student.image.url }}" alt="{{ student.name }}" class="rounded-circle me-3" style="width: 60px; height: 60px; object-fit: cover;">
|
|
{% else %}
|
|
<img src="{% static 'img/user.png' %}" alt="Default User" class="rounded-circle me-3" style="width: 60px; height: 60px; object-fit: cover;">
|
|
{% endif %}
|
|
<div class="flex-grow-1">
|
|
<h2 class="mb-1">Welcome, {{ student.name }}!</h2>
|
|
<p class="text-muted mb-0">Student <span class="ms-2 badge bg-info text-white">ID: {{ student.id }}</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Sections -->
|
|
<div class="content-section active" id="dashboardSection">
|
|
<!-- Summary Cards -->
|
|
<div class="row mb-4">
|
|
<!-- Attendance Summary Card -->
|
|
<div class="col-md-4 col-lg-3 mb-3">
|
|
<div class="summary-card h-100">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0 small"><i class="fas fa-calendar-check me-1"></i> Attendance Summary</h5>
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<div>
|
|
<small class="text-muted d-block mb-1">Total Classes</small>
|
|
<h3 class="fw-bold mb-0">{{ attendance_summary.total_classes }}</h3>
|
|
</div>
|
|
<div class="text-end">
|
|
<small class="text-muted d-block mb-1">Attendance Rate</small>
|
|
<h3 class="fw-bold text-primary mb-0">{{ attendance_summary.attendance_percentage|floatformat:1 }}%</h3>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-between mt-3">
|
|
<span class="badge bg-success p-2"><i class="fas fa-fire me-1"></i> Current: {{ attendance_summary.current_streak }} days</span>
|
|
<span class="badge bg-info p-2"><i class="fas fa-trophy me-1"></i> Best: {{ attendance_summary.longest_streak }} days</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Course Progress Card -->
|
|
<div class="col-md-4 col-lg-3 mb-3">
|
|
<div class="summary-card h-100">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0 small"><i class="fas fa-graduation-cap me-1"></i> Course Progress</h5>
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<div>
|
|
<small class="text-muted d-block mb-1">Total Courses</small>
|
|
<h3 class="fw-bold mb-0">{{ course_summary.total_courses }}</h3>
|
|
</div>
|
|
<div class="text-end">
|
|
<small class="text-muted d-block mb-1">Completion Rate</small>
|
|
<h3 class="fw-bold text-success mb-0">{{ course_summary.completion_percentage|floatformat:1 }}%</h3>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-between mt-3">
|
|
<div>
|
|
<small class="text-muted d-block">Completed</small>
|
|
<span class="badge bg-success p-2"><i class="fas fa-check me-1"></i> {{ course_summary.completed_courses }}</span>
|
|
</div>
|
|
<div class="text-end">
|
|
<small class="text-muted d-block">Ongoing</small>
|
|
<span class="badge bg-warning p-2"><i class="fas fa-spinner me-1"></i> {{ course_summary.ongoing_courses }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Activity Card -->
|
|
<div class="col-md-4 col-lg-3 mb-3">
|
|
<div class="summary-card h-100">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0 small"><i class="fas fa-clock me-1"></i> Recent Activity</h5>
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<div class="activity-scroll" style="max-height: 150px; overflow-y: auto; padding-right: 5px; scrollbar-width: thin;">
|
|
{% for leave in recent_leaves %}
|
|
<div class="d-flex align-items-center mb-2">
|
|
<i class="fas fa-calendar-alt text-primary me-2"></i>
|
|
<div>
|
|
<small class="mb-0 d-block">Leave Request ({{ leave.date|date:"M d" }})</small>
|
|
<span class="badge {% if leave.status == 0 %}bg-warning{% elif leave.status == 1 %}bg-success{% else %}bg-danger{% endif %}">{{ leave.get_status_display }}</span>
|
|
<small class="text-muted">{{ leave.created_at|timesince }} ago</small>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
{% for feedback in recent_feedback %}
|
|
<div class="d-flex align-items-center mb-2">
|
|
<i class="fas fa-comment text-success me-2"></i>
|
|
<div>
|
|
<small class="mb-0 d-block">Gave feedback {% if feedback.teacher %}to {{ feedback.teacher.name }}{% endif %}</small>
|
|
<div>
|
|
{% for i in "12345"|make_list %}
|
|
{% if forloop.counter <= feedback.rating %}
|
|
<i class="fas fa-star text-warning" style="font-size: 0.7rem;"></i>
|
|
{% else %}
|
|
<i class="far fa-star text-warning" style="font-size: 0.7rem;"></i>
|
|
{% endif %}
|
|
{% endfor %}
|
|
<small class="text-muted">{{ feedback.created_at|timesince }} ago</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
{% for notice in notices %}
|
|
<div class="d-flex align-items-center mb-2">
|
|
<i class="fas fa-bullhorn text-info me-2"></i>
|
|
<div>
|
|
<small class="mb-0 d-block">{{ notice.title }}</small>
|
|
<small class="text-muted">{{ notice.created_at|timesince }} ago</small>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
{% for record in attendance_records %}
|
|
<div class="d-flex align-items-center mb-2">
|
|
<i class="fas fa-user-check {% if record.student_attend %}text-success{% else %}text-danger{% endif %} me-2"></i>
|
|
<div>
|
|
<small class="mb-0 d-block">{% if record.student_attend %}Attended{% else %}Missed{% endif %} {{ record.attendance.routine.subject.name|truncatechars:15 }}</small>
|
|
<small class="text-muted">{{ record.attendance.date|date:"M d" }}</small>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
{% if not recent_leaves and not recent_feedback and not notices and not attendance_records %}
|
|
<div class="text-center">
|
|
<small class="text-muted">No recent activity</small>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Leave Status Card -->
|
|
<div class="col-md-4 col-lg-3 mb-3">
|
|
<div class="summary-card h-100">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0 small"><i class="fas fa-calendar-minus me-1"></i> Leave Status</h5>
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<small class="mb-0">Pending</small>
|
|
<span class="badge leave-pending">{{ pending_leaves }}</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<small class="mb-0">Approved</small>
|
|
<span class="badge leave-approved">{{ approved_leaves }}</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<small class="mb-0">Rejected</small>
|
|
<span class="badge leave-rejected">{{ rejected_leaves }}</span>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary w-100 mt-1" id="requestLeaveBtn" onclick="openLeaveModal()">
|
|
<i class="fas fa-plus-circle me-1"></i> Request
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Course Overview Section -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="content-card">
|
|
<h4 class="card-title mb-3 d-flex align-items-center">
|
|
<i class="fas fa-graduation-cap me-2"></i> Course Details
|
|
</h4>
|
|
|
|
{% if course_details %}
|
|
{% for course in course_details %}
|
|
<div class="mb-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h5 class="mb-0">{{ course.name }}</h5>
|
|
<span class="status-badge {% if course.progress_status == 'Completed' %}bg-success{% elif course.progress_status == 'In Progress' %}bg-warning{% else %}bg-secondary{% endif %}">
|
|
{{ course.progress_status }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Course Progress -->
|
|
<div class="progress mb-3">
|
|
<div class="progress-bar bg-primary" role="progressbar"
|
|
aria-valuenow="{{ course.completion_percentage }}" aria-valuemin="0" aria-valuemax="100"
|
|
style="--progress-width: {{ course.completion_percentage }}%">
|
|
{{ course.completion_percentage }}%
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Course Information -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<table class="table">
|
|
<tbody>
|
|
<tr>
|
|
<th>Start Date</th>
|
|
<td>{{ course.start_date|date:"M d, Y" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Duration Type</th>
|
|
<td>{{ course.duration_type }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Total Duration</th>
|
|
<td>
|
|
{% if course.duration_type == "Semester" %}
|
|
{{ course.duration }} years ({{ course.duration|multiply:2 }} semesters)
|
|
{% else %}
|
|
{{ course.duration }} years
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Expected End Date</th>
|
|
<td>{{ course.expected_end_date|date:"M d, Y" }}</td>
|
|
</tr>
|
|
{% if course.actual_end_date %}
|
|
<tr>
|
|
<th>Actual End Date</th>
|
|
<td>{{ course.actual_end_date|date:"M d, Y" }}</td>
|
|
</tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<table class="table">
|
|
<tbody>
|
|
<tr>
|
|
<th>Current Semester</th>
|
|
<td>{{ course.current_semester }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Semester Start</th>
|
|
<td>{{ course.semester_start_date|date:"M d, Y" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Semester End</th>
|
|
<td>{{ course.semester_end_date|date:"M d, Y" }}</td>
|
|
</tr>
|
|
{% if course.remaining_days is not None %}
|
|
<tr>
|
|
<th>Semester Days Remaining</th>
|
|
<td>{{ course.remaining_days }} days</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% if course.total_remaining_days is not None %}
|
|
<tr>
|
|
<th>Total Course Days Remaining</th>
|
|
<td>{{ course.total_remaining_days }} days</td>
|
|
</tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-info-circle me-2"></i>No courses assigned yet.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section" id="subjectsSection">
|
|
<div class="content-card">
|
|
<h3 class="text-xl font-semibold mb-4">
|
|
<i class="fas fa-book me-2"></i>Current Semester Subjects
|
|
</h3>
|
|
{% if current_subjects %}
|
|
<div class="row g-3">
|
|
{% for subject in current_subjects %}
|
|
<div class="col-md-4 col-lg-3">
|
|
<div class="card mb-3">
|
|
<div class="card-body">
|
|
<h5 class="card-title">{{ subject.name }}</h5>
|
|
<p class="card-text">
|
|
<small class="text-muted">Semester: {{ subject.semester_or_year }}</small>
|
|
</p>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<button class="btn btn-primary btn-sm view-subject-files" data-subject-id="{{ subject.id }}" onclick="openSubjectFilesModal('{{ subject.id }}')">
|
|
View Files
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-info-circle me-2"></i>No subjects assigned for the current semester.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section" id="routineSection">
|
|
<div class="content-card">
|
|
<h3 class="text-xl font-semibold mb-4">
|
|
<i class="fas fa-calendar-alt mr-2"></i> Class Routine
|
|
</h3>
|
|
<div class="table-responsive">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Time</th>
|
|
<th>Subject</th>
|
|
<th>Teacher</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% if current_semester_routines %}
|
|
{% for routine in current_semester_routines %}
|
|
<tr>
|
|
<td>{{ routine.start_time|time:"H:i" }} - {{ routine.end_time|time:"H:i" }}</td>
|
|
<td>{{ routine.subject.name }}</td>
|
|
<td>{{ routine.teacher.name }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% elif has_routines %}
|
|
<tr>
|
|
<td colspan="3" class="text-center">No routines for current semester (Semester {{ student.current_semester }}).</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="3" class="text-center">No routines assigned yet.</td>
|
|
</tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Attendance Record Section -->
|
|
<div class="content-card mt-4">
|
|
<h3 class="text-xl font-semibold mb-4">
|
|
<i class="fas fa-history mr-2"></i> Attendance Record
|
|
</h3>
|
|
<div class="table-responsive">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Subject</th>
|
|
<th>Teacher</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for record in attendance_records %}
|
|
<tr>
|
|
<td>{{ record.attendance.date|date:"M d, Y" }}</td>
|
|
<td>{{ record.attendance.routine.name }}</td>
|
|
<td>{{ record.attendance.teacher.name }}</td>
|
|
<td>
|
|
<span class="status-badge {% if record.student_attend %}bg-success{% else %}bg-danger{% endif %}">
|
|
{% if record.student_attend %}Present{% else %}Absent{% endif %}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="4" class="text-center">No attendance records found.</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section" id="leaveSection">
|
|
<div class="content-card">
|
|
<h3 class="text-xl font-semibold mb-4">
|
|
<i class="fas fa-calendar-times mr-2"></i> Leave Management
|
|
</h3>
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<button class="btn btn-primary" onclick="openLeaveModal()">
|
|
<i class="fas fa-plus me-2"></i>Request Leave
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Message</th>
|
|
<th>Status</th>
|
|
<th>Created At</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for leave in student_leaves %}
|
|
<tr>
|
|
<td>{{ leave.date|date:"M d, Y" }}</td>
|
|
<td>{{ leave.message }}</td>
|
|
<td>
|
|
<span class="status-badge {% if leave.status == 1 %}bg-success{% elif leave.status == 2 %}bg-danger{% else %}bg-warning{% endif %}">
|
|
{{ leave.get_status_display }}
|
|
</span>
|
|
</td>
|
|
<td>{{ leave.created_at|date:"M d, Y H:i" }}</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="4" class="text-center">No leave requests found.</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section" id="feedbackSection">
|
|
<div class="content-card">
|
|
<h3 class="text-xl font-semibold mb-4">
|
|
<i class="fas fa-comments mr-2"></i> Feedback
|
|
</h3>
|
|
<div class="d-flex justify-content-end mb-4">
|
|
<button class="btn btn-primary" onclick="openFeedbackModal()">
|
|
<i class="fas fa-plus me-2"></i>Give Feedback
|
|
</button>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h4 class="mb-3">Teacher Feedback</h4>
|
|
{% for feedback in student.feedbacks.all %}
|
|
<div class="card mb-3 border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<h5 class="card-title mb-0">{{ feedback.teacher.name }}</h5>
|
|
<div class="rating">
|
|
{% for i in "12345"|make_list %}
|
|
{% with i_float=forloop.counter|floatformat:0|add:"0" %}
|
|
{% if feedback.rating >= i_float %}
|
|
<i class="fas fa-star text-warning"></i>
|
|
{% elif feedback.rating >= i_float|add:"-0.5" %}
|
|
<i class="fas fa-star-half-alt text-warning"></i>
|
|
{% else %}
|
|
<i class="far fa-star text-warning"></i>
|
|
{% endif %}
|
|
{% endwith %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div class="feedback-message p-3 bg-light rounded mb-2">
|
|
<p class="card-text mb-0">{{ feedback.feedback_text }}</p>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<small class="text-muted">{{ feedback.created_at|timesince }} ago</small>
|
|
<span class="badge bg-primary">{{ feedback.rating }}/5</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-info-circle me-2"></i> No feedback given to teachers yet.
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h4 class="mb-3">Institute Feedback</h4>
|
|
{% for feedback in student.institute_feedbacks.all %}
|
|
<div class="card mb-3 border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<h5 class="card-title mb-0">{{ feedback.feedback_type }}</h5>
|
|
<div class="rating">
|
|
{% for i in "12345"|make_list %}
|
|
{% with i_float=forloop.counter|floatformat:0|add:"0" %}
|
|
{% if feedback.rating >= i_float %}
|
|
<i class="fas fa-star text-warning"></i>
|
|
{% elif feedback.rating >= i_float|add:"-0.5" %}
|
|
<i class="fas fa-star-half-alt text-warning"></i>
|
|
{% else %}
|
|
<i class="far fa-star text-warning"></i>
|
|
{% endif %}
|
|
{% endwith %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div class="feedback-message p-3 bg-light rounded mb-2">
|
|
<p class="card-text mb-0">{{ feedback.feedback_text }}</p>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<small class="text-muted">{{ feedback.created_at|timesince }} ago</small>
|
|
<span class="badge bg-primary">{{ feedback.rating }}/5</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-info-circle me-2"></i> No institute feedback given yet.
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section" id="noticeSection">
|
|
<div class="content-card">
|
|
<h3 class="text-xl font-semibold mb-4">
|
|
<i class="fas fa-bullhorn mr-2"></i> Notices
|
|
</h3>
|
|
<div class="row">
|
|
{% for notice in notices %}
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card h-100">
|
|
{% if notice.image %}
|
|
<img src="{{ notice.image.url }}" class="card-img-top" alt="{{ notice.title }}">
|
|
{% endif %}
|
|
<div class="card-body">
|
|
<h5 class="card-title">{{ notice.title }}</h5>
|
|
<p class="card-text">{{ notice.message }}</p>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<small class="text-muted">{{ notice.created_at|date:"M d, Y" }}</small>
|
|
{% if notice.file %}
|
|
<a href="{{ notice.file.url }}" class="btn btn-sm btn-primary" target="_blank">
|
|
<i class="fas fa-download me-1"></i>Download
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="col-12">
|
|
<p class="text-muted text-center">No notices available.</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section" id="profileSection">
|
|
<div class="content-card">
|
|
<h3 class="text-xl font-semibold mb-4">
|
|
<i class="fas fa-user mr-2"></i> Profile Information
|
|
</h3>
|
|
<div class="row">
|
|
<!-- Profile Header with Image and Actions -->
|
|
<div class="col-12 mb-4">
|
|
<div class="d-flex flex-wrap align-items-center justify-content-between">
|
|
<div class="d-flex align-items-center mb-3 mb-md-0">
|
|
{% if student.image %}
|
|
<img src="{{ student.image.url }}" alt="{{ student.name }}" class="rounded-circle me-3" style="width: 80px; height: 80px; object-fit: cover;">
|
|
{% else %}
|
|
<img src="{% static 'img/user.png' %}" alt="Default User" class="rounded-circle me-3" style="width: 80px; height: 80px; object-fit: cover;">
|
|
{% endif %}
|
|
<div>
|
|
<h4 class="mb-1">{{ student.name }}</h4>
|
|
<p class="mb-0 text-muted">
|
|
<span class="me-3"><i class="fas fa-id-card me-1"></i> {{ student.id }}</span>
|
|
<span class="me-3"><i class="fas fa-envelope me-1"></i> {{ student.email }}</span>
|
|
<span><i class="fas fa-phone me-1"></i> {{ student.phone }}</span>
|
|
</p>
|
|
<div class="mt-2">
|
|
<span class="badge {% if student.status == 'Active' %}bg-success{% elif student.status == 'Leave' %}bg-warning{% else %}bg-secondary{% endif %} me-2">
|
|
{{ student.status }}
|
|
</span>
|
|
{% if student.course %}
|
|
<span class="badge bg-info me-2">{{ student.course.name }}</span>
|
|
{% endif %}
|
|
<span class="badge bg-primary">Semester {{ student.current_semester }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="profile-actions d-flex gap-2">
|
|
<button class="btn btn-sm btn-primary" onclick="openProfileModal()">
|
|
<i class="fas fa-camera me-1"></i> Update Photo
|
|
</button>
|
|
<button class="btn btn-sm btn-secondary" onclick="openPasswordModal()">
|
|
<i class="fas fa-key me-1"></i> Change Password
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Personal Information Section -->
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-header bg-light py-2">
|
|
<h5 class="card-title mb-0"><i class="fas fa-user-circle me-2"></i>Personal Information</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<small class="text-muted d-block">Full Name</small>
|
|
<p class="mb-0 fw-medium">{{ student.name }}</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<small class="text-muted d-block">Gender</small>
|
|
<p class="mb-0 fw-medium">{{ student.gender }}</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<small class="text-muted d-block">Birth Date</small>
|
|
<p class="mb-0 fw-medium">{{ student.birth_date|date:"M d, Y" }}</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<small class="text-muted d-block">Marital Status</small>
|
|
<p class="mb-0 fw-medium">{{ student.marital_status }}</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<small class="text-muted d-block">Citizenship No.</small>
|
|
<p class="mb-0 fw-medium">{{ student.citizenship_no|default:"Not provided" }}</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<small class="text-muted d-block">Joining Date</small>
|
|
<p class="mb-0 fw-medium">{{ student.joining_date|date:"M d, Y" }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact & Parent Information -->
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-header bg-light py-2">
|
|
<h5 class="card-title mb-0"><i class="fas fa-address-book me-2"></i>Contact Information</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<small class="text-muted d-block">Email Address</small>
|
|
<p class="mb-0 fw-medium">{{ student.email }}</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<small class="text-muted d-block">Phone Number</small>
|
|
<p class="mb-0 fw-medium">{{ student.phone }}</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<small class="text-muted d-block">Parent Name</small>
|
|
<p class="mb-0 fw-medium">{{ student.parent_name|default:"Not provided" }}</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<small class="text-muted d-block">Parent Phone</small>
|
|
<p class="mb-0 fw-medium">{{ student.parent_phone|default:"Not provided" }}</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<small class="text-muted d-block">Temporary Address</small>
|
|
<p class="mb-0 fw-medium">{{ student.temporary_address|default:"Not provided" }}</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<small class="text-muted d-block">Permanent Address</small>
|
|
<p class="mb-0 fw-medium">{{ student.permanent_address|default:"Not provided" }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Academic Information -->
|
|
<div class="col-12 mb-4">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-light py-2">
|
|
<h5 class="card-title mb-0"><i class="fas fa-graduation-cap me-2"></i>Academic Information</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-3">
|
|
<small class="text-muted d-block">Course</small>
|
|
<p class="mb-0 fw-medium">{{ student.course.name|default:"Not assigned" }}</p>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<small class="text-muted d-block">Current Semester</small>
|
|
<p class="mb-0 fw-medium">{{ student.current_semester }}</p>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<small class="text-muted d-block">Joining Date</small>
|
|
<p class="mb-0 fw-medium">{{ student.joining_date|date:"M d, Y" }}</p>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<small class="text-muted d-block">Batches</small>
|
|
<p class="mb-0">
|
|
{% for batch in student.batches.all %}
|
|
<span class="badge bg-info me-1">{{ batch.name }}</span>
|
|
{% empty %}
|
|
<span class="text-muted">No batches assigned</span>
|
|
{% endfor %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Profile Modal -->
|
|
<div id="profileModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 10000;" onclick="if(event.target === this) closeProfileModal();">
|
|
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 500px; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);">
|
|
<div style="background-color: #3F51B5; color: white; padding: 15px; border-top-left-radius: 8px; border-top-right-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
|
|
<h5 style="margin: 0; font-size: 18px;">Update Profile Picture</h5>
|
|
<button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeProfileModal()">×</button>
|
|
</div>
|
|
<div style="padding: 20px;">
|
|
<!-- Profile Picture Upload Form -->
|
|
<form action="{% url 'update_profile' %}" method="post" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
<div style="text-align: center; margin-bottom: 20px;">
|
|
{% if student.image %}
|
|
<img src="{{ student.image.url }}" alt="{{ student.name }}" class="rounded-circle" style="width: 120px; height: 120px; object-fit: cover; border: 3px solid #3F51B5;">
|
|
{% else %}
|
|
<img src="{% static 'img/user.png' %}" alt="Default User" class="rounded-circle" style="width: 120px; height: 120px; object-fit: cover; border: 3px solid #3F51B5;">
|
|
{% endif %}
|
|
</div>
|
|
<div style="margin-bottom: 15px;">
|
|
<label style="display: block; margin-bottom: 8px; font-weight: 500;">Select New Profile Picture</label>
|
|
<input type="file" name="image" required style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;">
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between;">
|
|
<button type="button" onclick="closeProfileModal()" style="background-color: #9E9E9E; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">Cancel</button>
|
|
<button type="submit" style="background-color: #3F51B5; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">Update Picture</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Change Password Modal -->
|
|
<div id="passwordModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 10000;" onclick="if(event.target === this) closePasswordModal();">
|
|
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 500px; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);">
|
|
<div style="background-color: #3F51B5; color: white; padding: 15px; border-top-left-radius: 8px; border-top-right-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
|
|
<h5 style="margin: 0; font-size: 18px;">Change Password</h5>
|
|
<button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closePasswordModal()">×</button>
|
|
</div>
|
|
<div style="padding: 20px;">
|
|
<!-- Change Password Form -->
|
|
<form action="{% url 'change_password' %}" method="post">
|
|
{% csrf_token %}
|
|
<div style="margin-bottom: 15px;">
|
|
<label for="current_password" style="display: block; margin-bottom: 8px; font-weight: 500;">Current Password</label>
|
|
<input type="password" id="current_password" name="current_password" required style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;">
|
|
</div>
|
|
<div style="margin-bottom: 15px;">
|
|
<label for="new_password" style="display: block; margin-bottom: 8px; font-weight: 500;">New Password</label>
|
|
<input type="password" id="new_password" name="new_password" required style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;">
|
|
</div>
|
|
<div style="margin-bottom: 15px;">
|
|
<label for="confirm_password" style="display: block; margin-bottom: 8px; font-weight: 500;">Confirm New Password</label>
|
|
<input type="password" id="confirm_password" name="confirm_password" required style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;">
|
|
</div>
|
|
<button type="submit" style="background-color: #3F51B5; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; width: 100%;">Change Password</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Leave Request Modal -->
|
|
<div id="customLeaveModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 10000;" onclick="if(event.target === this) closeLeaveModal();">
|
|
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 500px; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);">
|
|
<div style="background-color: #3F51B5; color: white; padding: 15px; border-top-left-radius: 8px; border-top-right-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
|
|
<h5 style="margin: 0; font-size: 18px;">Request Leave</h5>
|
|
<button id="closeCustomModal" style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeLeaveModal()">×</button>
|
|
</div>
|
|
<form action="{% url 'request_leave' %}" method="post">
|
|
{% csrf_token %}
|
|
<div style="padding: 20px;">
|
|
<div style="margin-bottom: 15px;">
|
|
<label for="customLeaveDate" style="display: block; margin-bottom: 8px; font-weight: 500;">Date</label>
|
|
<input type="date" id="customLeaveDate" name="date" style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;" required>
|
|
</div>
|
|
<div style="margin-bottom: 15px;">
|
|
<label for="customLeaveMessage" style="display: block; margin-bottom: 8px; font-weight: 500;">Reason</label>
|
|
<textarea id="customLeaveMessage" name="message" rows="3" style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;" required></textarea>
|
|
</div>
|
|
</div>
|
|
<div style="padding: 15px; border-top: 1px solid #EEEEEE; text-align: right; display: flex; flex-wrap: wrap; justify-content: flex-end;">
|
|
<button type="button" id="cancelCustomModal" style="background-color: #9E9E9E; color: white; border: none; padding: 8px 16px; border-radius: 4px; margin-right: 10px; margin-bottom: 10px; cursor: pointer; font-size: 14px;" onclick="closeLeaveModal()">Cancel</button>
|
|
<button type="submit" style="background-color: #3F51B5; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; margin-bottom: 10px;">Submit Request</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feedback Modal -->
|
|
<div id="feedbackModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 10000;" onclick="if(event.target === this) closeFeedbackModal();">
|
|
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 600px; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);">
|
|
<div style="background-color: #3F51B5; color: white; padding: 15px; border-top-left-radius: 8px; border-top-right-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
|
|
<h5 style="margin: 0; font-size: 18px;">Give Feedback</h5>
|
|
<button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeFeedbackModal()">×</button>
|
|
</div>
|
|
<div style="padding: 20px;">
|
|
<!-- Custom Tab Navigation -->
|
|
<div class="feedback-tabs d-flex mb-4">
|
|
<div id="teacher-tab-btn" class="feedback-tab-btn active" onclick="switchFeedbackTab('teacher')" style="background-color: #3F51B5; color: white;">
|
|
Teacher Feedback
|
|
</div>
|
|
<div id="institute-tab-btn" class="feedback-tab-btn" onclick="switchFeedbackTab('institute')" style="border-color: #3F51B5;">
|
|
Institute Feedback
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content">
|
|
<!-- Teacher Feedback Form -->
|
|
<div id="teacher-tab-content" class="tab-pane active">
|
|
<form method="post" action="{% url 'submit_feedback' %}" id="teacherFeedbackForm">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="feedback_type" value="teacher">
|
|
<div class="mb-3">
|
|
<label for="teacher_select" class="form-label">Select Teacher</label>
|
|
<select class="form-select" id="teacher_select" name="teacher_id" required style="border-color: #BDBDBD;">
|
|
<option value="">Select Teacher</option>
|
|
{% for teacher in teachers %}
|
|
<option value="{{ teacher.id }}">{{ teacher.name }} - {{ teacher.designation }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Rating</label>
|
|
<div id="teacher-rating" class="rating-container d-flex justify-content-start gap-2">
|
|
{% for i in "12345"|make_list %}
|
|
<div class="form-check">
|
|
<input class="form-check-input visually-hidden" type="radio" name="rating" value="{{ i }}" id="teacherStar{{ i }}" required>
|
|
<label class="form-check-label" for="teacherStar{{ i }}">
|
|
<i class="far fa-star fs-4" style="color: #FFC107;"></i>
|
|
</label>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="teacher_feedback" class="form-label">Your Feedback</label>
|
|
<textarea class="form-control" id="teacher_feedback" name="feedback_text" rows="3" required style="border-color: #BDBDBD;"></textarea>
|
|
</div>
|
|
<div class="d-flex justify-content-end gap-2">
|
|
<button type="button" class="btn" style="background-color: #9E9E9E; color: white;" onclick="closeFeedbackModal()">Cancel</button>
|
|
<button type="submit" class="btn" style="background-color: #3F51B5; color: white;">Submit Feedback</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Institute Feedback Form -->
|
|
<div id="institute-tab-content" class="tab-pane">
|
|
<form method="post" action="{% url 'submit_feedback' %}" id="instituteFeedbackForm">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="feedback_type" value="institute">
|
|
<div class="mb-3">
|
|
<label for="feedback_type_select" class="form-label">Feedback Category</label>
|
|
<select class="form-select" id="feedback_type_select" name="category" required style="border-color: #BDBDBD;">
|
|
<option value="">Select Category</option>
|
|
<option value="General">General</option>
|
|
<option value="Facilities">Facilities</option>
|
|
<option value="Teaching">Teaching Quality</option>
|
|
<option value="Infrastructure">Infrastructure</option>
|
|
<option value="Administration">Administration</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Rating</label>
|
|
<div id="institute-rating" class="rating-container d-flex justify-content-start gap-2">
|
|
{% for i in "12345"|make_list %}
|
|
<div class="form-check">
|
|
<input class="form-check-input visually-hidden" type="radio" name="rating" value="{{ i }}" id="instituteStar{{ i }}" required>
|
|
<label class="form-check-label" for="instituteStar{{ i }}">
|
|
<i class="far fa-star fs-4" style="color: #FFC107;"></i>
|
|
</label>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="institute_feedback" class="form-label">Your Feedback</label>
|
|
<textarea class="form-control" id="institute_feedback" name="feedback_text" rows="3" required placeholder="Please provide your feedback about the institute" style="border-color: #BDBDBD;"></textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="is_anonymous" id="isAnonymous" style="border-color: #BDBDBD;">
|
|
<label class="form-check-label" for="isAnonymous">
|
|
Submit anonymously
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-end gap-2">
|
|
<button type="button" class="btn" style="background-color: #9E9E9E; color: white;" onclick="closeFeedbackModal()">Cancel</button>
|
|
<button type="submit" class="btn" style="background-color: #3F51B5; color: white;">Submit Feedback</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PDF Viewer Modal -->
|
|
<div id="pdfViewerModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 10000;" onclick="if(event.target === this) closePdfViewerModal();">
|
|
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%; max-width: 1000px; height: 90vh; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);">
|
|
<div style="background-color: #3F51B5; color: white; padding: 15px; border-top-left-radius: 8px; border-top-right-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
|
|
<h5 style="margin: 0; font-size: 18px;">Subject Syllabus</h5>
|
|
<button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closePdfViewerModal()">×</button>
|
|
</div>
|
|
<div style="height: calc(90vh - 60px); padding: 0;">
|
|
<iframe id="pdfViewer" style="width: 100%; height: 100%; border: none;"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Subject Files Modal -->
|
|
<div id="subjectFilesModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 10000;" onclick="if(event.target === this) closeSubjectFilesModal();">
|
|
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 800px; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);">
|
|
<div style="background-color: #3F51B5; color: white; padding: 15px; border-top-left-radius: 8px; border-top-right-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
|
|
<h5 style="margin: 0; font-size: 18px;">Subject Files</h5>
|
|
<button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeSubjectFilesModal()">×</button>
|
|
</div>
|
|
<div style="padding: 20px;">
|
|
<div id="subjectFilesList" class="list-group">
|
|
<!-- Files will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional responsive scripts -->
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
// Make all tables responsive
|
|
const tables = document.querySelectorAll('table:not(.table-responsive)');
|
|
tables.forEach(table => {
|
|
const wrapper = document.createElement('div');
|
|
wrapper.classList.add('table-responsive');
|
|
table.parentNode.insertBefore(wrapper, table);
|
|
wrapper.appendChild(table);
|
|
});
|
|
|
|
// Adjust card layout on small screens
|
|
function adjustLayout() {
|
|
const windowWidth = window.innerWidth;
|
|
if (windowWidth < 768) {
|
|
// Smaller screens adjustments
|
|
document.querySelectorAll('.card-title').forEach(title => {
|
|
title.style.fontSize = '1rem';
|
|
});
|
|
} else {
|
|
// Reset for larger screens
|
|
document.querySelectorAll('.card-title').forEach(title => {
|
|
title.style.fontSize = '';
|
|
});
|
|
}
|
|
}
|
|
|
|
// Run on load and resize
|
|
adjustLayout();
|
|
window.addEventListener('resize', adjustLayout);
|
|
});
|
|
</script>
|
|
|
|
<!-- Bottom Navigation -->
|
|
<div class="bottom-nav">
|
|
<div class="nav-container">
|
|
<a href="#" class="nav-item active" data-section="dashboard">
|
|
<i class="fas fa-home"></i>
|
|
<span class="d-none d-sm-block">Dashboard</span>
|
|
</a>
|
|
<a href="#" class="nav-item" data-section="subjects">
|
|
<i class="fas fa-book"></i>
|
|
<span class="d-none d-sm-block">Subjects</span>
|
|
</a>
|
|
<a href="#" class="nav-item" data-section="routine">
|
|
<i class="fas fa-calendar-alt"></i>
|
|
<span class="d-none d-sm-block">Routine</span>
|
|
</a>
|
|
<a href="#" class="nav-item" data-section="leave">
|
|
<i class="fas fa-calendar-times"></i>
|
|
<span class="d-none d-sm-block">Leaves</span>
|
|
</a>
|
|
<a href="#" class="nav-item" data-section="feedback">
|
|
<i class="fas fa-comments"></i>
|
|
<span class="d-none d-sm-block">Feedback</span>
|
|
</a>
|
|
<a href="#" class="nav-item" data-section="notice">
|
|
<i class="fas fa-bullhorn"></i>
|
|
<span class="d-none d-sm-block">Notices</span>
|
|
</a>
|
|
<a href="#" class="nav-item" data-section="profile">
|
|
<i class="fas fa-user"></i>
|
|
<span class="d-none d-sm-block">Profile</span>
|
|
</a>
|
|
<a href="#" class="nav-item" onclick="document.getElementById('logoutForm').submit(); return false;">
|
|
<i class="fas fa-sign-out-alt"></i>
|
|
<span class="d-none d-sm-block">Logout</span>
|
|
</a>
|
|
<form id="logoutForm" method="post" action="{% url 'logout' %}" style="display: none;">
|
|
{% csrf_token %}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Notification -->
|
|
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11000">
|
|
<div id="notificationToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<i class="fas fa-bell me-2"></i>
|
|
<strong class="me-auto" id="toastTitle">Notification</strong>
|
|
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
<div class="toast-body" id="toastMessage">
|
|
<!-- Notification message will appear here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|