Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Institution Analysis</title> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| /* General Body Styling */ | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| min-height: 100vh; | |
| margin: 0; | |
| padding: 0; | |
| color: #333; /* Darker text for better readability */ | |
| line-height: 1.6; | |
| } | |
| /* Container for Centered Layout */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 20px auto; | |
| background: white; | |
| border-radius: 15px; | |
| padding: 30px; | |
| box-shadow: 0 8px 30px rgba(0,0,0,0.1); | |
| transition: transform 0.3s ease; | |
| display: none; /* Hidden by default */ | |
| } | |
| .container:hover { | |
| transform: translateY(-5px); | |
| } | |
| .container.active { | |
| display: block; | |
| } | |
| /* Headers Styling */ | |
| h1, h2, h3 { | |
| text-align: center; | |
| color: #0056b3; /* A professional blue color */ | |
| margin-bottom: 10px; | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| } | |
| h2 { | |
| font-size: 2rem; | |
| margin-top: 20px; | |
| } | |
| h3 { | |
| font-size: 1.5rem; | |
| } | |
| /* Form Elements */ | |
| label { | |
| display: block; | |
| font-weight: bold; | |
| margin-top: 15px; | |
| color: #555; | |
| } | |
| textarea, input[type="text"], input[type="number"] { | |
| width: 100%; | |
| padding: 10px; | |
| margin-top: 5px; | |
| margin-bottom: 15px; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| font-size: 1rem; | |
| transition: border-color 0.3s; | |
| } | |
| textarea:focus, input[type="text"]:focus, input[type="number"]:focus { | |
| border-color: #0056b3; | |
| outline: none; | |
| } | |
| button { | |
| display: inline-block; | |
| width: 100%; | |
| padding: 12px; | |
| font-size: 1rem; | |
| font-weight: bold; | |
| color: #fff; | |
| background-color: #0056b3; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| button:hover { | |
| background-color: #003d80; | |
| } | |
| /* Insights and Results Section */ | |
| #results { | |
| margin-top: 20px; | |
| padding: 15px; | |
| border-radius: 8px; | |
| background-color: #e9f5ff; /* Light blue for a soft highlight */ | |
| color: #0056b3; | |
| border: 1px solid #0056b3; | |
| } | |
| ul { | |
| list-style-type: none; | |
| padding: 0; | |
| } | |
| ul li { | |
| margin-bottom: 10px; | |
| padding: 10px; | |
| background: #f8f9fa; | |
| border-left: 4px solid #0056b3; | |
| border-radius: 4px; | |
| } | |
| /* Chart Container */ | |
| .chart-container { | |
| margin-top: 30px; | |
| text-align: center; | |
| } | |
| canvas { | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .container { | |
| padding: 20px; | |
| margin: 10px; | |
| } | |
| .form-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .nav-tabs { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| .nav-tab { | |
| width: 100%; | |
| text-align: center; | |
| } | |
| } | |
| /* Modern Base Styles */ | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| min-height: 100vh; | |
| } | |
| /* Navigation Tabs */ | |
| .nav-tabs { | |
| display: flex; | |
| justify-content: center; | |
| gap: 15px; | |
| margin: 20px 0; | |
| flex-wrap: wrap; | |
| padding: 0 20px; | |
| } | |
| .nav-tab { | |
| padding: 12px 24px; | |
| background: white; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| border: 2px solid transparent; | |
| } | |
| .nav-tab:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.15); | |
| } | |
| .nav-tab.active { | |
| border-color: #3445db; | |
| color: #3445db; | |
| font-weight: 600; | |
| } | |
| /* Enhanced Container Styling */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 20px auto; | |
| background: white; | |
| border-radius: 15px; | |
| padding: 30px; | |
| box-shadow: 0 8px 30px rgba(0,0,0,0.1); | |
| transition: transform 0.3s ease; | |
| display: none; /* Hidden by default */ | |
| } | |
| .container:hover { | |
| transform: translateY(-5px); | |
| } | |
| .container.active { | |
| display: block; | |
| } | |
| /* Improved Form Elements */ | |
| .form-group input, | |
| .form-group select, | |
| .form-group textarea { | |
| width: 100%; | |
| padding: 12px; | |
| border: 2px solid #e0e0e0; | |
| border-radius: 8px; | |
| font-size: 0.95rem; | |
| transition: all 0.3s ease; | |
| background: #f8f9fa; | |
| } | |
| .form-group input:focus, | |
| .form-group select:focus, | |
| .form-group textarea:focus { | |
| border-color: #3445db; | |
| box-shadow: 0 0 0 3px rgba(52,69,219,0.1); | |
| outline: none; | |
| } | |
| /* Enhanced Button Styling */ | |
| .footer-button button { | |
| background: linear-gradient(135deg, #3445db 0%, #5466f2 100%); | |
| color: white; | |
| border: none; | |
| padding: 14px 30px; | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 15px rgba(52,69,219,0.2); | |
| } | |
| .footer-button button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(52,69,219,0.3); | |
| } | |
| /* Loading Animation */ | |
| .loading { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(255,255,255,0.9); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| } | |
| .loading-spinner { | |
| width: 50px; | |
| height: 50px; | |
| border: 5px solid #f3f3f3; | |
| border-top: 5px solid #3445db; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Responsive Improvements */ | |
| @media (max-width: 768px) { | |
| .container { | |
| padding: 20px; | |
| margin: 10px; | |
| } | |
| .form-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .nav-tabs { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| .nav-tab { | |
| width: 100%; | |
| text-align: center; | |
| } | |
| } | |
| /* Sub-section Styling */ | |
| .sub-section { | |
| background: #f8f9fa; | |
| border-radius: 12px; | |
| padding: 20px; | |
| margin-bottom: 30px; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
| } | |
| .sub-section h3 { | |
| color: #3445db; | |
| margin-bottom: 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .sub-section h3 i { | |
| font-size: 1.2em; | |
| } | |
| /* Form Grid Layout */ | |
| .form-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 20px; | |
| } | |
| /* Required Field Indicator */ | |
| .required { | |
| color: #dc3545; | |
| margin-left: 4px; | |
| } | |
| /* Improved Form Group Spacing */ | |
| .form-group { | |
| margin-bottom: 15px; | |
| } | |
| /* Add smooth transitions */ | |
| .container { | |
| transition: opacity 0.3s ease-in-out; | |
| opacity: 0; | |
| display: none; | |
| } | |
| .container.active { | |
| opacity: 1; | |
| display: block; | |
| } | |
| select[multiple] { | |
| height: 120px; | |
| padding: 8px; | |
| } | |
| select[multiple] option { | |
| padding: 8px; | |
| margin: 2px 0; | |
| border-radius: 4px; | |
| } | |
| select[multiple] option:checked { | |
| background: linear-gradient(135deg, #3445db 0%, #5466f2 100%); | |
| color: white; | |
| } | |
| .criteria-info { | |
| background: #f8f9fa; | |
| padding: 15px; | |
| border-radius: 8px; | |
| margin-bottom: 20px; | |
| border-left: 4px solid #3445db; | |
| } | |
| .criteria-grid { | |
| display: grid; | |
| gap: 25px; | |
| margin-bottom: 30px; | |
| } | |
| .criterion-box { | |
| background: white; | |
| border-radius: 12px; | |
| padding: 20px; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .criterion-box:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.15); | |
| } | |
| .criterion-header { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| gap: 15px; | |
| } | |
| .criterion-number { | |
| background: #3445db; | |
| color: white; | |
| padding: 5px 10px; | |
| border-radius: 6px; | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| } | |
| .criterion-header h3 { | |
| margin: 0; | |
| color: #2c3e50; | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| } | |
| .criterion-box textarea { | |
| width: 100%; | |
| padding: 12px; | |
| border: 2px solid #e0e0e0; | |
| border-radius: 8px; | |
| font-size: 0.95rem; | |
| transition: all 0.3s ease; | |
| background: #f8f9fa; | |
| resize: vertical; | |
| min-height: 120px; | |
| } | |
| .criterion-box textarea:focus { | |
| border-color: #3445db; | |
| box-shadow: 0 0 0 3px rgba(52,69,219,0.1); | |
| outline: none; | |
| } | |
| .criterion-box label { | |
| color: #555; | |
| font-size: 0.95rem; | |
| margin-bottom: 8px; | |
| display: block; | |
| } | |
| @media (max-width: 768px) { | |
| .criteria-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .criterion-box { | |
| padding: 15px; | |
| } | |
| } | |
| /* Enhanced Input Field Styling */ | |
| .form-group input, | |
| .form-group select, | |
| .form-group textarea { | |
| width: 100%; | |
| padding: 12px 16px; | |
| border: 2px solid #e0e0e0; | |
| border-radius: 8px; | |
| font-size: 0.95rem; | |
| font-family: 'Poppins', sans-serif; | |
| transition: all 0.3s ease; | |
| background: #f8f9fa; | |
| color: #2c3e50; | |
| } | |
| .form-group input:hover, | |
| .form-group select:hover, | |
| .form-group textarea:hover { | |
| border-color: #b3c4ff; | |
| background: #ffffff; | |
| } | |
| .form-group input:focus, | |
| .form-group select:focus, | |
| .form-group textarea:focus { | |
| border-color: #3445db; | |
| box-shadow: 0 0 0 3px rgba(52,69,219,0.1); | |
| outline: none; | |
| background: #ffffff; | |
| } | |
| /* Input Labels */ | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| color: #2c3e50; | |
| } | |
| /* Required Field Indicator */ | |
| .required { | |
| color: #dc3545; | |
| margin-left: 4px; | |
| font-size: 1.2em; | |
| line-height: 1; | |
| } | |
| /* Input Field Types */ | |
| .form-group input[type="date"] { | |
| padding-right: 8px; | |
| } | |
| .form-group input[type="number"] { | |
| -moz-appearance: textfield; | |
| } | |
| .form-group input[type="number"]::-webkit-outer-spin-button, | |
| .form-group input[type="number"]::-webkit-inner-spin-button { | |
| -webkit-appearance: none; | |
| margin: 0; | |
| } | |
| /* Readonly Fields */ | |
| .form-group input[readonly] { | |
| background-color: #e9ecef; | |
| cursor: not-allowed; | |
| border-style: dashed; | |
| } | |
| /* Select Fields */ | |
| .form-group select { | |
| cursor: pointer; | |
| padding-right: 32px; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232c3e50'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 8px center; | |
| background-size: 24px; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| } | |
| /* Textarea Fields */ | |
| .form-group textarea { | |
| min-height: 100px; | |
| resize: vertical; | |
| line-height: 1.5; | |
| } | |
| /* Invalid Fields */ | |
| .form-group.error input, | |
| .form-group.error select, | |
| .form-group.error textarea { | |
| border-color: #dc3545; | |
| background-color: #fff8f8; | |
| } | |
| .form-group.error label { | |
| color: #dc3545; | |
| } | |
| .form-group.error .error-message { | |
| display: block; | |
| color: #dc3545; | |
| font-size: 0.8rem; | |
| margin-top: 4px; | |
| } | |
| /* Placeholder Styling */ | |
| .form-group input::placeholder, | |
| .form-group textarea::placeholder { | |
| color: #a0aec0; | |
| opacity: 1; | |
| } | |
| /* Input Groups */ | |
| .input-group { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .input-group .prefix, | |
| .input-group .suffix { | |
| position: absolute; | |
| color: #718096; | |
| font-size: 0.9rem; | |
| pointer-events: none; | |
| } | |
| .input-group .prefix { | |
| left: 12px; | |
| } | |
| .input-group .suffix { | |
| right: 12px; | |
| } | |
| .input-group input { | |
| padding-left: 32px; | |
| } | |
| /* Field Help Text */ | |
| .form-group .help-text { | |
| display: block; | |
| color: #718096; | |
| font-size: 0.8rem; | |
| margin-top: 4px; | |
| } | |
| /* Success State */ | |
| .form-group.success input, | |
| .form-group.success select, | |
| .form-group.success textarea { | |
| border-color: #28a745; | |
| } | |
| .form-group.success label { | |
| color: #28a745; | |
| } | |
| /* Form Layout Improvements */ | |
| .form-grid { | |
| display: grid; | |
| grid-template-columns: 1fr; /* Changed to single column */ | |
| gap: 25px; | |
| margin-bottom: 30px; | |
| } | |
| /* Individual Form Group Styling */ | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| margin-bottom: 20px; | |
| padding: 15px; | |
| background: #ffffff; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.05); | |
| transition: transform 0.2s ease; | |
| } | |
| .form-group:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.1); | |
| } | |
| /* Label Styling */ | |
| .form-group label { | |
| font-size: 0.95rem; | |
| font-weight: 500; | |
| color: #2c3e50; | |
| margin-bottom: 10px; | |
| } | |
| /* Input Field Styling */ | |
| .form-group input, | |
| .form-group select, | |
| .form-group textarea { | |
| width: 100%; | |
| padding: 12px 16px; | |
| margin-top: 8px; | |
| border: 2px solid #e0e0e0; | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| line-height: 1.5; | |
| transition: all 0.3s ease; | |
| } | |
| /* Required Field Indicator */ | |
| .required { | |
| color: #dc3545; | |
| margin-left: 4px; | |
| } | |
| /* Field Description */ | |
| .field-description { | |
| font-size: 0.85rem; | |
| color: #666; | |
| margin-top: 6px; | |
| } | |
| /* Responsive Design */ | |
| @media (min-width: 768px) { | |
| .form-grid { | |
| grid-template-columns: repeat(2, 1fr); /* Two columns on larger screens */ | |
| gap: 20px; | |
| } | |
| .form-group.full-width { | |
| grid-column: 1 / -1; /* Span full width */ | |
| } | |
| } | |
| /* Section Headers */ | |
| .section-header { | |
| font-size: 1.2rem; | |
| color: #3445db; | |
| margin: 30px 0 15px; | |
| padding-bottom: 10px; | |
| border-bottom: 2px solid #e0e0e0; | |
| } | |
| /* Input Groups (for currency/units) */ | |
| .input-group { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .input-group .prefix, | |
| .input-group .suffix { | |
| position: absolute; | |
| color: #718096; | |
| font-size: 0.9rem; | |
| padding: 0 12px; | |
| pointer-events: none; | |
| } | |
| .input-group .prefix { | |
| left: 0; | |
| } | |
| .input-group .suffix { | |
| right: 0; | |
| } | |
| .input-group input { | |
| padding-left: 40px; /* Space for prefix */ | |
| padding-right: 40px; /* Space for suffix */ | |
| } | |
| /* Textarea specific styling */ | |
| .form-group textarea { | |
| min-height: 100px; | |
| resize: vertical; | |
| } | |
| /* Read-only fields */ | |
| .form-group input[readonly] { | |
| background-color: #f8f9fa; | |
| border-style: dashed; | |
| cursor: not-allowed; | |
| } | |
| /* Container Spacing Fix */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 20px auto; | |
| padding: 30px; | |
| overflow: hidden; /* Prevents child elements from overflowing */ | |
| } | |
| /* Sub-section Spacing Fix */ | |
| .sub-section { | |
| margin: 0 0 30px 0; | |
| padding: 25px; | |
| width: 100%; | |
| box-sizing: border-box; | |
| } | |
| /* Form Grid Fix */ | |
| .form-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| box-sizing: border-box; | |
| } | |
| /* Form Group Spacing Fix */ | |
| .form-group { | |
| margin: 0; | |
| padding: 15px; | |
| width: 100%; | |
| box-sizing: border-box; | |
| } | |
| /* Full Width Items Fix */ | |
| .form-group.full-width, | |
| .form-group.remarks { | |
| grid-column: 1 / -1; | |
| width: 100%; | |
| } | |
| /* Input Group Fix */ | |
| .input-group { | |
| width: 100%; | |
| box-sizing: border-box; | |
| margin: 0; | |
| } | |
| /* Responsive Fixes */ | |
| @media (max-width: 768px) { | |
| .container { | |
| padding: 15px; | |
| margin: 10px; | |
| } | |
| .sub-section { | |
| padding: 15px; | |
| } | |
| .form-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .form-group { | |
| padding: 10px; | |
| } | |
| } | |
| /* Box Shadow Adjustments */ | |
| .form-group { | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.05); | |
| } | |
| .sub-section { | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.08); | |
| } | |
| .container { | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="nav-tabs"> | |
| <div class="nav-tab active" onclick="showSection('institution-analysis')"> | |
| <i class="fas fa-university"></i> Institution Analysis | |
| </div> | |
| <div class="nav-tab" onclick="showSection('utilities')"> | |
| <i class="fas fa-bolt"></i> Utilities | |
| </div> | |
| <div class="nav-tab" onclick="showSection('finance')"> | |
| <i class="fas fa-money-bill-wave"></i> Finance | |
| </div> | |
| <div class="nav-tab" onclick="showSection('facilities')"> | |
| <i class="fas fa-building"></i> Facilities | |
| </div> | |
| <div class="nav-tab" onclick="showSection('staff')"> | |
| <i class="fas fa-users"></i> Staff | |
| </div> | |
| <div class="nav-tab" onclick="showSection('students')"> | |
| <i class="fas fa-user-graduate"></i> Students | |
| </div> | |
| </div> | |
| <!-- Update the Institution Analysis section --> | |
| <div class="container active" data-section="institution-analysis"> | |
| <h1>Institution Analysis</h1> | |
| <div class="criteria-info"> | |
| <p>Please provide detailed descriptions for each criterion below. These criteria are essential for institutional assessment.</p> | |
| </div> | |
| <form id="analysisForm"> | |
| <div class="criteria-grid"> | |
| <div class="criterion-box"> | |
| <div class="criterion-header"> | |
| <span class="criterion-number">6.1.1</span> | |
| <h3>Institutional Vision and Leadership</h3> | |
| </div> | |
| <div class="form-group"> | |
| <label for="6.1.1">The governance of the institution is reflective of and in tune with the vision and mission of the institution</label> | |
| <textarea id="6.1.1" name="6.1.1" rows="4" required | |
| placeholder="Describe the institution's governance structure and how it aligns with the vision and mission..."></textarea> | |
| </div> | |
| </div> | |
| <div class="criterion-box"> | |
| <div class="criterion-header"> | |
| <span class="criterion-number">6.2.1</span> | |
| <h3>Strategy Development and Deployment</h3> | |
| </div> | |
| <div class="form-group"> | |
| <label for="6.2.1">The institutional Strategic/Perspective plan is effectively deployed</label> | |
| <textarea id="6.2.1" name="6.2.1" rows="4" required | |
| placeholder="Detail the strategic planning process and its implementation..."></textarea> | |
| </div> | |
| </div> | |
| <div class="criterion-box"> | |
| <div class="criterion-header"> | |
| <span class="criterion-number">6.3.1</span> | |
| <h3>Faculty Empowerment Strategies</h3> | |
| </div> | |
| <div class="form-group"> | |
| <label for="6.3.1">The institution has effective welfare measures for teaching and non-teaching staff</label> | |
| <textarea id="6.3.1" name="6.3.1" rows="4" required | |
| placeholder="List and describe the welfare measures implemented for staff..."></textarea> | |
| </div> | |
| </div> | |
| <div class="criterion-box"> | |
| <div class="criterion-header"> | |
| <span class="criterion-number">6.4.1</span> | |
| <h3>Financial Management and Resource Mobilization</h3> | |
| </div> | |
| <div class="form-group"> | |
| <label for="6.4.1">Institution conducts internal and external financial audits regularly</label> | |
| <textarea id="6.4.1" name="6.4.1" rows="4" required | |
| placeholder="Describe the audit processes and their frequency..."></textarea> | |
| </div> | |
| </div> | |
| <div class="criterion-box"> | |
| <div class="criterion-header"> | |
| <span class="criterion-number">6.5.1</span> | |
| <h3>Internal Quality Assurance System</h3> | |
| </div> | |
| <div class="form-group"> | |
| <label for="6.5.1">Internal Quality Assurance Cell (IQAC) has contributed significantly for institutionalizing the quality assurance strategies and processes</label> | |
| <textarea id="6.5.1" name="6.5.1" rows="4" required | |
| placeholder="Explain IQAC's role and contributions to quality improvement..."></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer-button"> | |
| <button type="submit">Analyze Criteria</button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- For the Utilities section --> | |
| <div class="container" data-section="utilities"> | |
| <h2>College Utilities Management</h2> | |
| <!-- Electricity Bill Section --> | |
| <div class="sub-section"> | |
| <h3><i class="fas fa-bolt"></i> Electricity Bill</h3> | |
| <form id="electricity-form"> | |
| <div class="form-grid"> | |
| <!-- Basic Information --> | |
| <div class="form-group"> | |
| <label for="totalUnits">Total Units Consumed <span class="required">*</span></label> | |
| <input type="number" id="totalUnits" name="totalUnits" placeholder="5000" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="ratePerUnit">Rate Per Unit (Rs.) <span class="required">*</span></label> | |
| <input type="number" id="ratePerUnit" name="ratePerUnit" placeholder="10" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="totalAmount">Total Amount (Rs.)</label> | |
| <input type="number" id="totalAmount" name="totalAmount" placeholder="50000" readonly> | |
| </div> | |
| <!-- Dates --> | |
| <div class="form-group"> | |
| <label for="lastPaidDate">Last Paid Date</label> | |
| <input type="date" id="lastPaidDate" name="lastPaidDate" placeholder="dd/mm/yyyy"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="billingStartDate">Billing Start Date</label> | |
| <input type="date" id="billingStartDate" name="billingStartDate" placeholder="dd/mm/yyyy"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="billingEndDate">Billing End Date</label> | |
| <input type="date" id="billingEndDate" name="billingEndDate" placeholder="dd/mm/yyyy"> | |
| </div> | |
| <!-- Meter Readings --> | |
| <div class="form-group"> | |
| <label for="previousMeterReading">Previous Meter Reading</label> | |
| <input type="number" id="previousMeterReading" name="previousMeterReading" placeholder="Previous Reading"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="currentMeterReading">Current Meter Reading</label> | |
| <input type="number" id="currentMeterReading" name="currentMeterReading" placeholder="Current Reading"> | |
| </div> | |
| <!-- Charges --> | |
| <div class="form-group"> | |
| <label for="fixedCharges">Fixed Charges (Rs.)</label> | |
| <input type="number" id="fixedCharges" name="fixedCharges" placeholder="Fixed Charges"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="taxesSurcharges">Taxes/Surcharges (Rs.)</label> | |
| <input type="number" id="taxesSurcharges" name="taxesSurcharges" placeholder="Taxes and Surcharges"> | |
| </div> | |
| <!-- Payment Details --> | |
| <div class="form-group"> | |
| <label for="paymentStatus">Payment Status</label> | |
| <select id="paymentStatus" name="paymentStatus"> | |
| <option value="Paid">Paid</option> | |
| <option value="Unpaid">Unpaid</option> | |
| <option value="Partially Paid">Partially Paid</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="paymentMethod">Payment Method</label> | |
| <select id="paymentMethod" name="paymentMethod"> | |
| <option value="Cash">Cash</option> | |
| <option value="Cheque">Cheque</option> | |
| <option value="Online Transfer">Online Transfer</option> | |
| </select> | |
| </div> | |
| <!-- Supplier Details --> | |
| <div class="form-group"> | |
| <label for="supplierName">Supplier Name</label> | |
| <input type="text" id="supplierName" name="supplierName" placeholder="Supplier Name"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="supplierContact">Supplier Contact</label> | |
| <input type="text" id="supplierContact" name="supplierContact" placeholder="Supplier Contact"> | |
| </div> | |
| <!-- Remarks --> | |
| <div class="form-group remarks"> | |
| <label for="remarksElectricity">Remarks</label> | |
| <textarea id="remarksElectricity" name="remarksElectricity" rows="3" placeholder="Enter any remarks"></textarea> | |
| </div> | |
| </div> | |
| <div class="footer-button"> | |
| <button type="button" onclick="saveFormData('electricity-form')">Save</button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Water Bill Section --> | |
| <div class="sub-section"> | |
| <h3><i class="fas fa-water"></i> Water Bill</h3> | |
| <form id="water-form"> | |
| <div class="form-grid"> | |
| <!-- Basic Information --> | |
| <div class="form-group"> | |
| <label for="waterConsumption">Total Water Consumption (Liters) <span class="required">*</span></label> | |
| <input type="number" id="waterConsumption" name="waterConsumption" placeholder="50000" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="waterRate">Rate Per Liter (Rs.) <span class="required">*</span></label> | |
| <input type="number" id="waterRate" name="waterRate" placeholder="0.05" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="waterAmount">Total Amount (Rs.)</label> | |
| <input type="number" id="waterAmount" name="waterAmount" placeholder="2500" readonly> | |
| </div> | |
| <!-- Dates --> | |
| <div class="form-group"> | |
| <label for="lastBillDate">Last Bill Date</label> | |
| <input type="date" id="lastBillDate" name="lastBillDate" placeholder="dd/mm/yyyy"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="waterBillingStartDate">Billing Start Date</label> | |
| <input type="date" id="waterBillingStartDate" name="waterBillingStartDate" placeholder="dd/mm/yyyy"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="waterBillingEndDate">Billing End Date</label> | |
| <input type="date" id="waterBillingEndDate" name="waterBillingEndDate" placeholder="dd/mm/yyyy"> | |
| </div> | |
| <!-- Meter Readings --> | |
| <div class="form-group"> | |
| <label for="waterPreviousReading">Previous Meter Reading</label> | |
| <input type="number" id="waterPreviousReading" name="waterPreviousReading" placeholder="Previous Reading"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="waterCurrentReading">Current Meter Reading</label> | |
| <input type="number" id="waterCurrentReading" name="waterCurrentReading" placeholder="Current Reading"> | |
| </div> | |
| <!-- Charges --> | |
| <div class="form-group"> | |
| <label for="waterServiceCharges">Service Charges (Rs.)</label> | |
| <input type="number" id="waterServiceCharges" name="waterServiceCharges" placeholder="Service Charges"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="waterTaxes">Taxes (Rs.)</label> | |
| <input type="number" id="waterTaxes" name="waterTaxes" placeholder="Taxes"> | |
| </div> | |
| <!-- Remarks --> | |
| <div class="form-group remarks"> | |
| <label for="remarksWater">Remarks</label> | |
| <textarea id="remarksWater" name="remarksWater" rows="3" placeholder="Enter any remarks"></textarea> | |
| </div> | |
| </div> | |
| <div class="footer-button"> | |
| <button type="button" onclick="saveFormData('water-form')">Save</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- For the Finance section --> | |
| <div class="container" data-section="finance"> | |
| <h2>Financial Management</h2> | |
| <!-- College Financial Activity --> | |
| <div class="sub-section"> | |
| <h3><i class="fas fa-chart-line"></i> Financial Activity</h3> | |
| <form id="finance-form"> | |
| <div class="form-grid"> | |
| <!-- Basic Financial Information --> | |
| <div class="form-group"> | |
| <label for="totalRevenue">Total Revenue (Rs.) <span class="required">*</span></label> | |
| <input type="number" id="totalRevenue" name="totalRevenue" placeholder="1000000" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="totalExpenditure">Total Expenditure (Rs.) <span class="required">*</span></label> | |
| <input type="number" id="totalExpenditure" name="totalExpenditure" placeholder="800000" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="profitLoss">Profit/Loss (Rs.)</label> | |
| <input type="number" id="profitLoss" name="profitLoss" placeholder="200000" readonly> | |
| </div> | |
| <!-- Billing Period --> | |
| <div class="form-group"> | |
| <label for="billingStartDate">Billing Start Date</label> | |
| <input type="date" id="billingStartDate" name="billingStartDate" placeholder="dd/mm/yyyy"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="billingEndDate">Billing End Date</label> | |
| <input type="date" id="billingEndDate" name="billingEndDate" placeholder="dd/mm/yyyy"> | |
| </div> | |
| <!-- Meter Readings --> | |
| <div class="form-group"> | |
| <label for="previousMeterReading">Previous Meter Reading</label> | |
| <input type="number" id="previousMeterReading" name="previousMeterReading" placeholder="Previous Reading"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="currentMeterReading">Current Meter Reading</label> | |
| <input type="number" id="currentMeterReading" name="currentMeterReading" placeholder="Current Reading"> | |
| </div> | |
| <!-- Charges --> | |
| <div class="form-group"> | |
| <label for="fixedCharges">Fixed Charges (Rs.)</label> | |
| <input type="number" id="fixedCharges" name="fixedCharges" placeholder="Fixed Charges"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="taxesSurcharges">Taxes/Surcharges (Rs.)</label> | |
| <input type="number" id="taxesSurcharges" name="taxesSurcharges" placeholder="Taxes and Surcharges"> | |
| </div> | |
| <!-- Payment Details --> | |
| <div class="form-group"> | |
| <label for="paymentStatus">Payment Status</label> | |
| <select id="paymentStatus" name="paymentStatus"> | |
| <option value="Paid">Paid</option> | |
| <option value="Unpaid">Unpaid</option> | |
| <option value="Partially Paid">Partially Paid</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="paymentMethod">Payment Method</label> | |
| <select id="paymentMethod" name="paymentMethod"> | |
| <option value="Cash">Cash</option> | |
| <option value="Cheque">Cheque</option> | |
| <option value="Online Transfer">Online Transfer</option> | |
| </select> | |
| </div> | |
| <!-- Supplier Details --> | |
| <div class="form-group"> | |
| <label for="supplierName">Supplier Name</label> | |
| <input type="text" id="supplierName" name="supplierName" placeholder="Supplier Name"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="supplierContact">Supplier Contact</label> | |
| <input type="text" id="supplierContact" name="supplierContact" placeholder="Supplier Contact"> | |
| </div> | |
| <!-- Description and Remarks --> | |
| <div class="form-group"> | |
| <label for="majorExpenditure">Major Expenditure Description</label> | |
| <textarea id="majorExpenditure" name="majorExpenditure" rows="3" | |
| placeholder="Describe major expenditure items"></textarea> | |
| </div> | |
| <div class="form-group remarks"> | |
| <label for="remarksFinance">Remarks</label> | |
| <textarea id="remarksFinance" name="remarksFinance" rows="3" | |
| placeholder="Enter any additional remarks"></textarea> | |
| </div> | |
| </div> | |
| <div class="footer-button"> | |
| <button type="button" onclick="saveFormData('finance-form')">Save</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- For the Facilities section --> | |
| <div class="container" data-section="facilities"> | |
| <h2>Facilities Management</h2> | |
| <!-- Library Management --> | |
| <div class="sub-section"> | |
| <h3><i class="fas fa-book"></i> Library Management</h3> | |
| <form id="library-overview-form"> | |
| <div class="form-grid"> | |
| <div class="form-group"> | |
| <label for="totalBooks">Total Books in Library <span class="required">*</span></label> | |
| <input type="number" id="totalBooks" name="totalBooks" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="booksLastFiveYears">Books Added in Last Five Years</label> | |
| <input type="number" id="booksLastFiveYears" name="booksLastFiveYears"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="moneySpent">Money Spent on Books (Rs.)</label> | |
| <input type="number" id="moneySpent" name="moneySpent"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="totalBorrowers">Total Number of Borrowers</label> | |
| <input type="number" id="totalBorrowers" name="totalBorrowers"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="booksIssued">Total Books Issued</label> | |
| <input type="number" id="booksIssued" name="booksIssued"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="avgBooksPerBorrower">Average Books per Borrower</label> | |
| <input type="number" id="avgBooksPerBorrower" name="avgBooksPerBorrower" readonly> | |
| </div> | |
| <div class="form-group"> | |
| <label for="lateFee">Late Fee per Day (Rs.)</label> | |
| <input type="number" id="lateFee" name="lateFee"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="fineAmount">Total Fine Amount Collected (Rs.)</label> | |
| <input type="number" id="fineAmount" name="fineAmount"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="remarksLibrary">Remarks</label> | |
| <textarea id="remarksLibrary" name="remarksLibrary" rows="3"></textarea> | |
| </div> | |
| </div> | |
| <div class="footer-button"> | |
| <button type="button" onclick="saveFormData('library-overview-form')">Save</button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Sports Facility --> | |
| <div class="sub-section"> | |
| <h3><i class="fas fa-running"></i> Sports Facility</h3> | |
| <form id="sports-facility-form"> | |
| <div class="form-grid"> | |
| <div class="form-group"> | |
| <label for="totalSportsFacilities">Total Sports Facilities <span class="required">*</span></label> | |
| <input type="number" id="totalSportsFacilities" name="totalSportsFacilities" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="maintenanceCosts">Maintenance Costs (Rs.)</label> | |
| <input type="number" id="maintenanceCosts" name="maintenanceCosts"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="equipmentInventory">Equipment Inventory</label> | |
| <textarea id="equipmentInventory" name="equipmentInventory" rows="3"></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="studentsParticipating">Number of Students Participating</label> | |
| <input type="number" id="studentsParticipating" name="studentsParticipating"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="equipmentCost">Equipment Cost (Rs.)</label> | |
| <input type="number" id="equipmentCost" name="equipmentCost"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="staffSalary">Staff Salary (Rs.)</label> | |
| <input type="number" id="staffSalary" name="staffSalary"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="eventCost">Event Cost (Rs.)</label> | |
| <input type="number" id="eventCost" name="eventCost"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="sportsRemarks">Remarks</label> | |
| <textarea id="sportsRemarks" name="sportsRemarks" rows="3"></textarea> | |
| </div> | |
| </div> | |
| <div class="footer-button"> | |
| <button type="button" onclick="saveFormData('sports-facility-form')">Save</button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Cafeteria Management --> | |
| <div class="sub-section"> | |
| <h3><i class="fas fa-utensils"></i> Cafeteria Management</h3> | |
| <form id="cafeteria-management-form"> | |
| <div class="form-grid"> | |
| <div class="form-group"> | |
| <label for="totalMealsServed">Total Meals Served <span class="required">*</span></label> | |
| <input type="number" id="totalMealsServed" name="totalMealsServed" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="costPerMeal">Cost Per Meal (Rs.)</label> | |
| <input type="number" id="costPerMeal" name="costPerMeal"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="staffCount">Number of Staff</label> | |
| <input type="number" id="staffCount" name="staffCount"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="monthlyRevenue">Monthly Revenue (Rs.)</label> | |
| <input type="number" id="monthlyRevenue" name="monthlyRevenue"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="monthlyExpenses">Monthly Expenses (Rs.)</label> | |
| <input type="number" id="monthlyExpenses" name="monthlyExpenses"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="foodSuppliesCost">Food Supplies Cost (Rs.)</label> | |
| <input type="number" id="foodSuppliesCost" name="foodSuppliesCost"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="cafeteriaRemarks">Remarks</label> | |
| <textarea id="cafeteriaRemarks" name="cafeteriaRemarks" rows="3"></textarea> | |
| </div> | |
| </div> | |
| <div class="footer-button"> | |
| <button type="button" onclick="saveFormData('cafeteria-management-form')">Save</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Add Staff section --> | |
| <div class="container" data-section="staff"> | |
| <h2>Staff Management</h2> | |
| <!-- Teaching Staff --> | |
| <div class="sub-section"> | |
| <h3><i class="fas fa-chalkboard-teacher"></i> Teaching Staff</h3> | |
| <form id="teaching-staff-form"> | |
| <div class="form-grid"> | |
| <div class="form-group"> | |
| <label for="teachingStaffCount">Total Teaching Staff <span class="required">*</span></label> | |
| <input type="number" id="teachingStaffCount" name="teachingStaffCount" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="teachingTotalSalary">Total Monthly Salary (Rs.) <span class="required">*</span></label> | |
| <input type="number" id="teachingTotalSalary" name="teachingTotalSalary" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="teachingSalaryComponents">Salary Components</label> | |
| <input type="text" id="teachingSalaryComponents" name="teachingSalaryComponents" placeholder="Basic + HRA + Allowances"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="teachingDeductions">Deductions</label> | |
| <input type="text" id="teachingDeductions" name="teachingDeductions" placeholder="PF + Tax + Other"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="teachingNetSalary">Net Salary Paid (Rs.)</label> | |
| <input type="number" id="teachingNetSalary" name="teachingNetSalary"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="teachingOvertime">Overtime Hours</label> | |
| <input type="number" id="teachingOvertime" name="teachingOvertime"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="teachingRemarksSalary">Remarks</label> | |
| <textarea id="teachingRemarksSalary" name="teachingRemarksSalary" rows="3"></textarea> | |
| </div> | |
| </div> | |
| <div class="footer-button"> | |
| <button type="button" onclick="saveFormData('teaching-staff-form')">Save</button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Non-Teaching Staff --> | |
| <div class="sub-section"> | |
| <h3><i class="fas fa-user-tie"></i> Non-Teaching Staff</h3> | |
| <form id="non-teaching-staff-form"> | |
| <div class="form-grid"> | |
| <div class="form-group"> | |
| <label for="nonTeachingStaffCount">Total Non-Teaching Staff <span class="required">*</span></label> | |
| <input type="number" id="nonTeachingStaffCount" name="nonTeachingStaffCount" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="nonTeachingTotalSalary">Total Monthly Salary (Rs.) <span class="required">*</span></label> | |
| <input type="number" id="nonTeachingTotalSalary" name="nonTeachingTotalSalary" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="nonTeachingSalaryComponents">Salary Components</label> | |
| <input type="text" id="nonTeachingSalaryComponents" name="nonTeachingSalaryComponents" placeholder="Basic + HRA + Allowances"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="nonTeachingDeductions">Deductions</label> | |
| <input type="text" id="nonTeachingDeductions" name="nonTeachingDeductions" placeholder="PF + Tax + Other"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="nonTeachingNetSalary">Net Salary Paid (Rs.)</label> | |
| <input type="number" id="nonTeachingNetSalary" name="nonTeachingNetSalary"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="nonTeachingOvertime">Overtime Hours</label> | |
| <input type="number" id="nonTeachingOvertime" name="nonTeachingOvertime"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="nonTeachingDepartments">Departments</label> | |
| <textarea id="nonTeachingDepartments" name="nonTeachingDepartments" rows="3" placeholder="List of departments"></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="nonTeachingRemarks">Remarks</label> | |
| <textarea id="nonTeachingRemarks" name="nonTeachingRemarks" rows="3"></textarea> | |
| </div> | |
| </div> | |
| <div class="footer-button"> | |
| <button type="button" onclick="saveFormData('non-teaching-staff-form')">Save</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Add Student section --> | |
| <div class="container" data-section="students"> | |
| <h2>Student Management</h2> | |
| <!-- Student Fee Details --> | |
| <div class="sub-section"> | |
| <h3><i class="fas fa-file-invoice-dollar"></i> Fee Details</h3> | |
| <form id="student-fee-form"> | |
| <div class="form-grid"> | |
| <div class="form-group"> | |
| <label for="totalStudents">Total Students <span class="required">*</span></label> | |
| <input type="number" id="totalStudents" name="totalStudents" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="totalFeeCollected">Total Fee Collected (Rs.) <span class="required">*</span></label> | |
| <input type="number" id="totalFeeCollected" name="totalFeeCollected" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="totalFeeDue">Total Fee Due (Rs.)</label> | |
| <input type="number" id="totalFeeDue" name="totalFeeDue"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="totalScholarships">Number of Students on Scholarships</label> | |
| <input type="number" id="totalScholarships" name="totalScholarships"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="totalScholarshipAmount">Total Scholarship Amount (Rs.)</label> | |
| <input type="number" id="totalScholarshipAmount" name="totalScholarshipAmount"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="courseFeeBreakdown">Course Fee Breakdown</label> | |
| <textarea id="courseFeeBreakdown" name="courseFeeBreakdown" rows="3"></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="remarksFeeOverview">Remarks</label> | |
| <textarea id="remarksFeeOverview" name="remarksFeeOverview" rows="3"></textarea> | |
| </div> | |
| </div> | |
| <div class="footer-button"> | |
| <button type="button" onclick="saveFormData('student-fee-form')">Save</button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Student Activities --> | |
| <div class="sub-section"> | |
| <h3><i class="fas fa-users"></i> Student Activities</h3> | |
| <form id="student-activities-form"> | |
| <div class="form-grid"> | |
| <div class="form-group"> | |
| <label for="totalEvents">Total Events Conducted <span class="required">*</span></label> | |
| <input type="number" id="totalEvents" name="totalEvents" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="totalParticipants">Total Student Participants</label> | |
| <input type="number" id="totalParticipants" name="totalParticipants"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="eventCategories">Event Categories</label> | |
| <select id="eventCategories" name="eventCategories" multiple> | |
| <option value="cultural">Cultural</option> | |
| <option value="technical">Technical</option> | |
| <option value="sports">Sports</option> | |
| <option value="academic">Academic</option> | |
| <option value="social">Social Service</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="eventBudget">Total Event Budget (Rs.)</label> | |
| <input type="number" id="eventBudget" name="eventBudget"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="eventExpenses">Total Event Expenses (Rs.)</label> | |
| <input type="number" id="eventExpenses" name="eventExpenses"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="achievementsWon">Achievements/Prizes Won</label> | |
| <textarea id="achievementsWon" name="achievementsWon" rows="3" placeholder="List major achievements"></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="clubsSocieties">Active Clubs & Societies</label> | |
| <textarea id="clubsSocieties" name="clubsSocieties" rows="3" placeholder="List active clubs and societies"></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="upcomingEvents">Upcoming Events</label> | |
| <textarea id="upcomingEvents" name="upcomingEvents" rows="3" placeholder="List upcoming events"></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="studentCoordinators">Student Coordinators</label> | |
| <textarea id="studentCoordinators" name="studentCoordinators" rows="3" placeholder="List student coordinators"></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="facultyMentors">Faculty Mentors</label> | |
| <textarea id="facultyMentors" name="facultyMentors" rows="3" placeholder="List faculty mentors"></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="activityRemarks">Remarks</label> | |
| <textarea id="activityRemarks" name="activityRemarks" rows="3"></textarea> | |
| </div> | |
| </div> | |
| <div class="footer-button"> | |
| <button type="button" onclick="saveFormData('student-activities-form')">Save</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| // Fix the showSection function to handle transitions better | |
| function showSection(sectionId) { | |
| const containers = document.querySelectorAll('.container'); | |
| const tabs = document.querySelectorAll('.nav-tab'); | |
| // First hide all containers | |
| containers.forEach(container => { | |
| if (container.classList.contains('active')) { | |
| container.style.opacity = '0'; | |
| setTimeout(() => { | |
| container.classList.remove('active'); | |
| container.style.display = 'none'; | |
| }, 300); | |
| } | |
| }); | |
| // Update tabs | |
| tabs.forEach(tab => tab.classList.remove('active')); | |
| event.currentTarget.classList.add('active'); | |
| // Show selected container | |
| const selectedContainer = document.querySelector(`[data-section="${sectionId}"]`); | |
| if (selectedContainer) { | |
| setTimeout(() => { | |
| selectedContainer.style.display = 'block'; | |
| selectedContainer.classList.add('active'); | |
| setTimeout(() => { | |
| selectedContainer.style.opacity = '1'; | |
| }, 10); | |
| }, 300); | |
| } | |
| } | |
| // Show loading animation | |
| function showLoading() { | |
| const loading = document.createElement('div'); | |
| loading.className = 'loading'; | |
| loading.innerHTML = '<div class="loading-spinner"></div>'; | |
| document.body.appendChild(loading); | |
| } | |
| // Hide loading animation | |
| function hideLoading() { | |
| const loading = document.querySelector('.loading'); | |
| if (loading) { | |
| loading.remove(); | |
| } | |
| } | |
| // Add loading animation to form submissions | |
| document.querySelectorAll('form').forEach(form => { | |
| form.addEventListener('submit', () => { | |
| showLoading(); | |
| }); | |
| }); | |
| // Initialize the page | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Show the institution analysis section by default | |
| showSection('institution-analysis'); | |
| }); | |
| // Add form auto-calculation functions | |
| function calculateTotalAmount(formId) { | |
| const form = document.getElementById(formId); | |
| if (!form) return; | |
| // For electricity bill | |
| if (formId === 'electricity-form') { | |
| const units = parseFloat(form.querySelector('#totalUnits').value) || 0; | |
| const rate = parseFloat(form.querySelector('#ratePerUnit').value) || 0; | |
| const totalAmount = units * rate; | |
| form.querySelector('#totalAmount').value = totalAmount.toFixed(2); | |
| } | |
| // Add similar calculations for other forms | |
| } | |
| // Enhance form validation | |
| function validateForm(formId) { | |
| const form = document.getElementById(formId); | |
| if (!form) return false; | |
| const requiredFields = form.querySelectorAll('[required]'); | |
| let isValid = true; | |
| requiredFields.forEach(field => { | |
| const value = field.value.trim(); | |
| if (!value) { | |
| field.classList.add('invalid'); | |
| field.parentElement.classList.add('error'); | |
| isValid = false; | |
| } else { | |
| field.classList.remove('invalid'); | |
| field.parentElement.classList.remove('error'); | |
| } | |
| }); | |
| return isValid; | |
| } | |
| // Add event listeners for calculations | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const forms = document.querySelectorAll('form'); | |
| forms.forEach(form => { | |
| form.addEventListener('input', (e) => { | |
| if (e.target.type === 'number') { | |
| calculateTotalAmount(form.id); | |
| } | |
| }); | |
| }); | |
| }); | |
| // Enhance the saveFormData function | |
| async function saveFormData(formId) { | |
| if (!validateForm(formId)) { | |
| alert('Please fill in all required fields'); | |
| return; | |
| } | |
| showLoading(); | |
| try { | |
| const form = document.getElementById(formId); | |
| const formData = new FormData(form); | |
| const data = Object.fromEntries(formData.entries()); | |
| // Simulate API call | |
| await new Promise(resolve => setTimeout(resolve, 1000)); | |
| console.log(`Saving data for ${formId}:`, data); | |
| alert('Data saved successfully!'); | |
| } catch (error) { | |
| console.error('Error saving data:', error); | |
| alert('Error saving data. Please try again.'); | |
| } finally { | |
| hideLoading(); | |
| } | |
| } | |
| // Add to your calculateTotalAmount function | |
| if (formId === 'non-teaching-staff-form') { | |
| const salary = parseFloat(form.querySelector('#nonTeachingTotalSalary').value) || 0; | |
| const overtime = parseFloat(form.querySelector('#nonTeachingOvertime').value) || 0; | |
| const overtimeRate = salary / (30 * 8); // Assuming 30 days, 8 hours per day | |
| const overtimePay = overtime * overtimeRate; | |
| form.querySelector('#nonTeachingNetSalary').value = (salary + overtimePay).toFixed(2); | |
| } | |
| if (formId === 'student-activities-form') { | |
| const budget = parseFloat(form.querySelector('#eventBudget').value) || 0; | |
| const expenses = parseFloat(form.querySelector('#eventExpenses').value) || 0; | |
| const remaining = budget - expenses; | |
| // You could add a field to show remaining budget if needed | |
| } | |
| if (formId === 'finance-form') { | |
| const revenue = parseFloat(form.querySelector('#totalRevenue').value) || 0; | |
| const expenditure = parseFloat(form.querySelector('#totalExpenditure').value) || 0; | |
| const profitLoss = revenue - expenditure; | |
| form.querySelector('#profitLoss').value = profitLoss.toFixed(2); | |
| } | |
| // Add to your existing JavaScript | |
| function setupInputFields() { | |
| // Add error handling for required fields | |
| document.querySelectorAll('.form-group input[required], .form-group textarea[required]').forEach(field => { | |
| field.addEventListener('blur', () => { | |
| const formGroup = field.closest('.form-group'); | |
| if (!field.value.trim()) { | |
| formGroup.classList.add('error'); | |
| if (!formGroup.querySelector('.error-message')) { | |
| const errorMessage = document.createElement('span'); | |
| errorMessage.className = 'error-message'; | |
| errorMessage.textContent = 'This field is required'; | |
| formGroup.appendChild(errorMessage); | |
| } | |
| } else { | |
| formGroup.classList.remove('error'); | |
| const errorMessage = formGroup.querySelector('.error-message'); | |
| if (errorMessage) { | |
| errorMessage.remove(); | |
| } | |
| } | |
| }); | |
| }); | |
| // Add success handling for filled fields | |
| document.querySelectorAll('.form-group input, .form-group textarea').forEach(field => { | |
| field.addEventListener('input', () => { | |
| const formGroup = field.closest('.form-group'); | |
| if (field.value.trim()) { | |
| formGroup.classList.add('success'); | |
| } else { | |
| formGroup.classList.remove('success'); | |
| } | |
| }); | |
| }); | |
| // Format number inputs | |
| document.querySelectorAll('input[type="number"]').forEach(input => { | |
| input.addEventListener('input', (e) => { | |
| if (e.target.value) { | |
| const num = parseFloat(e.target.value); | |
| if (!isNaN(num)) { | |
| e.target.value = num.toLocaleString('en-IN'); | |
| } | |
| } | |
| }); | |
| }); | |
| } | |
| // Call the setup function when the page loads | |
| document.addEventListener('DOMContentLoaded', setupInputFields); | |
| // Add this to your existing JavaScript | |
| function initializeFormLayout() { | |
| // Add full-width class to remarks and description fields | |
| document.querySelectorAll('textarea').forEach(textarea => { | |
| textarea.closest('.form-group').classList.add('full-width'); | |
| }); | |
| // Add currency prefix to amount fields | |
| document.querySelectorAll('input[type="number"][id*="amount"], input[type="number"][id*="salary"], input[type="number"][id*="cost"]').forEach(input => { | |
| const wrapper = document.createElement('div'); | |
| wrapper.className = 'input-group'; | |
| input.parentNode.insertBefore(wrapper, input); | |
| wrapper.appendChild(input); | |
| const prefix = document.createElement('span'); | |
| prefix.className = 'prefix'; | |
| prefix.textContent = '₹'; | |
| wrapper.insertBefore(prefix, input); | |
| }); | |
| } | |
| // Call on page load | |
| document.addEventListener('DOMContentLoaded', initializeFormLayout); | |
| </script> | |
| </body> | |
| </html> | |