Files
Student-Management-System-I…/templates/hod/modals/view_meeting_modal.html
T
2025-04-20 17:46:30 +05:45

74 lines
4.8 KiB
HTML

{% load static %}
<!-- View Meeting Modal -->
<div id="viewMeetingModal" 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) closeViewMeetingModal();">
<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); max-height: 90vh; overflow-y: auto;">
<div style="background-color: #3F51B5; color: white; padding: 12px; border-top-left-radius: 8px; border-top-right-radius: 8px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1;">
<h5 style="margin: 0; font-size: 18px;">Meeting Details</h5>
<button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeViewMeetingModal()">&times;</button>
</div>
<div style="padding: 15px;">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
<!-- Left Column -->
<div>
<div style="margin-bottom: 12px;">
<label style="display: block; margin-bottom: 4px; font-weight: 500;">Date</label>
<p id="viewMeetingDate" style="margin: 0; padding: 6px; background-color: #f8f9fa; border-radius: 4px;"></p>
</div>
<div style="margin-bottom: 12px;">
<label style="display: block; margin-bottom: 4px; font-weight: 500;">Time</label>
<p id="viewMeetingTime" style="margin: 0; padding: 6px; background-color: #f8f9fa; border-radius: 4px;"></p>
</div>
<div style="margin-bottom: 12px;">
<label style="display: block; margin-bottom: 4px; font-weight: 500;">Duration</label>
<p style="margin: 0; padding: 6px; background-color: #f8f9fa; border-radius: 4px;"><span id="viewMeetingDuration"></span> minutes</p>
</div>
</div>
<!-- Right Column -->
<div>
<div style="margin-bottom: 12px;">
<label style="display: block; margin-bottom: 4px; font-weight: 500;">Status</label>
<p style="margin: 0; padding: 6px; background-color: #f8f9fa; border-radius: 4px;"><span id="viewMeetingStatus"></span></p>
</div>
<div style="margin-bottom: 12px;">
<label style="display: block; margin-bottom: 4px; font-weight: 500;">Meeting Type</label>
<p id="viewMeetingType" style="margin: 0; padding: 6px; background-color: #f8f9fa; border-radius: 4px;"></p>
</div>
<div id="viewMeetingLinkContainer" style="margin-bottom: 12px; display: none;">
<label style="display: block; margin-bottom: 4px; font-weight: 500;">Meeting Link</label>
<p id="viewMeetingLink" style="margin: 0; padding: 6px; background-color: #f8f9fa; border-radius: 4px;"></p>
</div>
</div>
</div>
<!-- Full Width Sections -->
<div style="margin-top: 15px;">
<div style="margin-bottom: 12px;">
<label style="display: block; margin-bottom: 4px; font-weight: 500;">Agenda</label>
<p id="viewMeetingAgenda" style="margin: 0; padding: 6px; background-color: #f8f9fa; border-radius: 4px; min-height: 60px;"></p>
</div>
<div style="margin-bottom: 12px;">
<label style="display: block; margin-bottom: 4px; font-weight: 500;">Notes</label>
<p id="viewMeetingNotes" style="margin: 0; padding: 6px; background-color: #f8f9fa; border-radius: 4px; min-height: 60px;"></p>
</div>
<div id="viewCancellationReasonContainer" style="margin-bottom: 12px; display: none;">
<label style="display: block; margin-bottom: 4px; font-weight: 500; color: #dc3545;">Cancellation Reason</label>
<p id="viewCancellationReason" style="margin: 0; padding: 6px; background-color: #fff8f8; border-radius: 4px; border-left: 3px solid #dc3545;"></p>
</div>
</div>
</div>
<div style="padding: 12px; border-top: 1px solid #EEEEEE; text-align: right; position: sticky; bottom: 0; background-color: white; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;">
<button type="button" style="background-color: #9E9E9E; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 14px; margin-right: 8px;" onclick="closeViewMeetingModal()">Close</button>
<button type="button" id="editMeetingBtn" style="background-color: #3F51B5; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 14px;">Edit Meeting</button>
</div>
</div>
</div>
<script>
function closeViewMeetingModal() {
document.getElementById('viewMeetingModal').style.display = 'none';
document.body.style.overflow = '';
}
</script>