fix(idk):
This commit is contained in:
sankalp committed
1 parent
1a7d5617e8
commit
c97fa1ab83
50 files changed
+14655
-585
No files matched your search
+113
-300
@@ -1,329 +1,142 @@
|
||||
{% load static %}
|
||||
|
||||
<style>
|
||||
/* Modal Base Styles */
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 10000;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: linear-gradient(135deg, #0D6EFD 0%, #0B5ED7 100%);
|
||||
color: white;
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
line-height: 24px;
|
||||
padding: 0;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #E9ECEF;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* Form Styles */
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #DEE2E6;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: #0D6EFD;
|
||||
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
/* Button Styles */
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #0D6EFD;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #0B5ED7;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #6C757D;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #5C636A;
|
||||
}
|
||||
|
||||
/* Profile Picture Styles */
|
||||
.profile-picture-container {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
border: 3px solid #E9ECEF;
|
||||
}
|
||||
|
||||
.profile-picture {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* File Input Styles */
|
||||
.file-input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-input-label {
|
||||
display: block;
|
||||
padding: 10px 12px;
|
||||
background-color: #F8F9FA;
|
||||
border: 1px dashed #DEE2E6;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.file-input-label:hover {
|
||||
background-color: #E9ECEF;
|
||||
border-color: #CED4DA;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Profile Modal -->
|
||||
<div id="profileModal" class="modal-overlay" onclick="if(event.target === this) closeProfileModal();">
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Update Profile Picture</h5>
|
||||
<button class="modal-close" onclick="closeProfileModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form action="{% url 'update_profile' %}" method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
<div class="text-center">
|
||||
{% if user.image %}
|
||||
<div class="profile-picture-container mx-auto">
|
||||
<img src="{{ user.image.url }}" alt="{{ user.name }}" class="profile-picture">
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="profile-picture-container mx-auto">
|
||||
<img src="{% static 'img/user.png' %}" alt="Default User" class="profile-picture">
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Select New Profile Picture</label>
|
||||
<div class="file-input-wrapper">
|
||||
<label class="file-input-label">
|
||||
<i class="fas fa-cloud-upload-alt me-2"></i>Choose a file...
|
||||
<input type="file" name="profile_image" required class="file-input">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeProfileModal()">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Update Picture</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<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;">
|
||||
<form action="{% url 'update_profile' %}" method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
<div style="text-align: center; margin-bottom: 20px;">
|
||||
{% if user.image %}
|
||||
<div class="profile-picture-container profile-lg mx-auto">
|
||||
<img src="{{ user.image.url }}" alt="{{ user.name }}" class="profile-picture">
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="profile-picture-container profile-lg mx-auto">
|
||||
<img src="{% static 'img/user.png' %}" alt="Default User" class="profile-picture">
|
||||
</div>
|
||||
{% 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="profile_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>
|
||||
|
||||
<!-- Password Change Modal -->
|
||||
<div id="passwordModal" class="modal-overlay" onclick="if(event.target === this) closePasswordModal();">
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Change Password</h5>
|
||||
<button class="modal-close" onclick="closePasswordModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form action="{% url 'change_password' %}" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="current_password">Current Password</label>
|
||||
<input type="password" id="current_password" name="current_password" required class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="new_password">New Password</label>
|
||||
<input type="password" id="new_password" name="new_password" required class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="confirm_password">Confirm New Password</label>
|
||||
<input type="password" id="confirm_password" name="confirm_password" required class="form-control">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" onclick="closePasswordModal()">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Change Password</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<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;">
|
||||
<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>
|
||||
|
||||
<!-- Leave Request Modal -->
|
||||
<div id="customLeaveModal" class="modal-overlay" onclick="if(event.target === this) closeLeaveModal();">
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Request Leave</h5>
|
||||
<button class="modal-close" onclick="closeLeaveModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form action="{% if user.is_teacher %}{% url 'request_staff_leave' %}{% else %}{% url 'request_leave' %}{% endif %}" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="startDate">Start Date</label>
|
||||
<input type="date" id="startDate" name="start_date" class="form-control" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="endDate">End Date</label>
|
||||
<input type="date" id="endDate" name="end_date" class="form-control" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="customLeaveMessage">Reason</label>
|
||||
<textarea id="customLeaveMessage" name="message" rows="3" class="form-control" required></textarea>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeLeaveModal()">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Submit Request</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<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="{% if user.is_teacher %}{% url 'request_staff_leave' %}{% else %}{% url 'request_leave' %}{% endif %}" method="post">
|
||||
{% csrf_token %}
|
||||
<div style="padding: 20px;">
|
||||
<div style="margin-bottom: 15px;">
|
||||
<label for="startDate" style="display: block; margin-bottom: 8px; font-weight: 500;">Start Date</label>
|
||||
<input type="date" id="startDate" name="start_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="endDate" style="display: block; margin-bottom: 8px; font-weight: 500;">End Date</label>
|
||||
<input type="date" id="endDate" name="end_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>
|
||||
|
||||
<!-- Confirmation Modal -->
|
||||
<div id="confirmationModal" class="modal-overlay" onclick="if(event.target === this) closeConfirmationModal();">
|
||||
<div class="modal-container" style="max-width: 400px;">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Confirm Deletion</h5>
|
||||
<button class="modal-close" onclick="closeConfirmationModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="mb-0">Are you sure you want to delete this file? This action cannot be undone.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeConfirmationModal()">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" id="confirmDeleteBtn">Delete</button>
|
||||
</div>
|
||||
<div id="confirmationModal" 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) closeConfirmationModal();">
|
||||
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; 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: 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;">Confirm Deletion</h5>
|
||||
<button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeConfirmationModal()">×</button>
|
||||
</div>
|
||||
<div style="padding: 15px;">
|
||||
<p style="margin: 0 0 15px 0;">Are you sure you want to delete this file? This action cannot be undone.</p>
|
||||
</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="closeConfirmationModal()">Cancel</button>
|
||||
<button type="button" style="background-color: #3F51B5; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 14px;" id="confirmDeleteBtn">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message Modal -->
|
||||
<div id="messageModal" class="modal-overlay" onclick="if(event.target === this) closeMessageModal();">
|
||||
<div class="modal-container" style="max-width: 400px;">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="messageModalTitle">Message</h5>
|
||||
<button class="modal-close" onclick="closeMessageModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="mb-0" id="messageModalContent"></p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" onclick="closeMessageModal()">OK</button>
|
||||
</div>
|
||||
<div id="messageModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 10001;" onclick="if(event.target === this) closeMessageModal();">
|
||||
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; 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: 12px; border-top-left-radius: 8px; border-top-right-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
|
||||
<h5 id="messageModalTitle" style="margin: 0; font-size: 18px;">Message</h5>
|
||||
<button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeMessageModal()">×</button>
|
||||
</div>
|
||||
<div style="padding: 15px;">
|
||||
<p id="messageModalContent" style="margin: 0 0 15px 0;"></p>
|
||||
</div>
|
||||
<div style="padding: 12px; border-top: 1px solid #EEEEEE; text-align: right;">
|
||||
<button type="button" style="background-color: #3F51B5; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 14px;" onclick="closeMessageModal()">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Utility function for displaying message modals
|
||||
function showMessageModal(title, message) {
|
||||
document.getElementById('messageModalTitle').textContent = title;
|
||||
document.getElementById('messageModalContent').textContent = message;
|
||||
document.getElementById('messageModal').style.display = 'block';
|
||||
document.body.style.overflow = 'hidden';
|
||||
document.getElementById('messageModalTitle').textContent = title;
|
||||
document.getElementById('messageModalContent').textContent = message;
|
||||
document.getElementById('messageModal').style.display = 'block';
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeMessageModal() {
|
||||
document.getElementById('messageModal').style.display = 'none';
|
||||
document.body.style.overflow = '';
|
||||
document.getElementById('messageModal').style.display = 'none';
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
</script>
|
||||
Reference in new issue
Block a user