Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NCTI Institute Management System</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #3498db; | |
| --secondary-color: #2ecc71; | |
| --danger-color: #e74c3c; | |
| --warning-color: #f39c12; | |
| --info-color: #9b59b6; | |
| --dark-color: #2c3e50; | |
| --light-color: #ecf0f1; | |
| --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| --transition: all 0.3s ease; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: #f5f7fa; | |
| color: var(--dark-color); | |
| line-height: 1.6; | |
| } | |
| /* Header */ | |
| header { | |
| background-color: white; | |
| box-shadow: var(--shadow); | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| } | |
| .header-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 2rem; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .logo img { | |
| height: 50px; | |
| width: auto; | |
| } | |
| .logo h1 { | |
| font-size: 1.5rem; | |
| color: var(--primary-color); | |
| } | |
| .user-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .user-avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background-color: var(--primary-color); | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| } | |
| .header-actions { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: center; | |
| } | |
| .btn { | |
| padding: 0.5rem 1rem; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-weight: 500; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary-color); | |
| color: white; | |
| } | |
| .btn-secondary { | |
| background-color: var(--secondary-color); | |
| color: white; | |
| } | |
| .btn-danger { | |
| background-color: var(--danger-color); | |
| color: white; | |
| } | |
| .btn-info { | |
| background-color: var(--info-color); | |
| color: white; | |
| } | |
| .btn-success { | |
| background-color: #27ae60; | |
| color: white; | |
| } | |
| .btn:hover { | |
| opacity: 0.9; | |
| transform: translateY(-2px); | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| position: fixed; | |
| top: 70px; | |
| left: 0; | |
| width: 250px; | |
| height: calc(100vh - 70px); | |
| background-color: white; | |
| box-shadow: var(--shadow); | |
| overflow-y: auto; | |
| transition: var(--transition); | |
| z-index: 999; | |
| } | |
| .sidebar-header { | |
| padding: 1rem; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .sidebar-menu { | |
| list-style: none; | |
| } | |
| .sidebar-menu li { | |
| border-bottom: 1px solid #eee; | |
| } | |
| .sidebar-menu a { | |
| display: flex; | |
| align-items: center; | |
| padding: 1rem; | |
| color: var(--dark-color); | |
| text-decoration: none; | |
| transition: var(--transition); | |
| } | |
| .sidebar-menu a:hover, | |
| .sidebar-menu a.active { | |
| background-color: var(--primary-color); | |
| color: white; | |
| } | |
| .sidebar-menu i { | |
| margin-right: 1rem; | |
| width: 20px; | |
| text-align: center; | |
| } | |
| /* Main Content */ | |
| .main-content { | |
| margin-left: 250px; | |
| padding: 2rem; | |
| min-height: calc(100vh - 70px); | |
| } | |
| .page-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 2rem; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .page-title { | |
| font-size: 1.8rem; | |
| color: var(--dark-color); | |
| } | |
| .breadcrumb { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| color: #7f8c8d; | |
| } | |
| .breadcrumb i { | |
| font-size: 0.8rem; | |
| } | |
| /* Cards */ | |
| .card { | |
| background-color: white; | |
| border-radius: 8px; | |
| box-shadow: var(--shadow); | |
| padding: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| padding-bottom: 1rem; | |
| border-bottom: 1px solid #eee; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .card-title { | |
| font-size: 1.2rem; | |
| color: var(--dark-color); | |
| } | |
| .card-body { | |
| padding: 1rem 0; | |
| } | |
| /* Dashboard Stats */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .stat-card { | |
| background-color: white; | |
| border-radius: 8px; | |
| box-shadow: var(--shadow); | |
| padding: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .stat-icon { | |
| font-size: 2rem; | |
| opacity: 0.7; | |
| } | |
| .stat-info h3 { | |
| font-size: 2rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .stat-info p { | |
| color: #7f8c8d; | |
| font-size: 0.9rem; | |
| } | |
| /* Tables */ | |
| .table-responsive { | |
| overflow-x: auto; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-bottom: 1rem; | |
| } | |
| th, | |
| td { | |
| padding: 1rem; | |
| text-align: left; | |
| border-bottom: 1px solid #eee; | |
| } | |
| th { | |
| background-color: var(--light-color); | |
| font-weight: 600; | |
| color: var(--dark-color); | |
| } | |
| tr:hover { | |
| background-color: #f9f9f9; | |
| } | |
| /* Forms */ | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 500; | |
| } | |
| .form-control { | |
| width: 100%; | |
| padding: 0.75rem; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| font-size: 1rem; | |
| transition: var(--transition); | |
| } | |
| .form-control:focus { | |
| border-color: var(--primary-color); | |
| outline: none; | |
| box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); | |
| } | |
| .select-control { | |
| width: 100%; | |
| padding: 0.75rem; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| background-color: white; | |
| font-size: 1rem; | |
| } | |
| /* Modal */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| z-index: 2000; | |
| overflow-y: auto; | |
| } | |
| .modal.active { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 1rem; | |
| } | |
| .modal-content { | |
| background-color: white; | |
| border-radius: 8px; | |
| width: 100%; | |
| max-width: 800px; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); | |
| animation: modalFadeIn 0.3s ease; | |
| } | |
| @keyframes modalFadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1.5rem; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .modal-title { | |
| font-size: 1.3rem; | |
| } | |
| .modal-close { | |
| background: none; | |
| border: none; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| color: #7f8c8d; | |
| } | |
| .modal-body { | |
| padding: 1.5rem; | |
| max-height: 70vh; | |
| overflow-y: auto; | |
| } | |
| .modal-footer { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 1rem; | |
| padding: 1.5rem; | |
| border-top: 1px solid #eee; | |
| } | |
| /* Tabs */ | |
| .tabs { | |
| display: flex; | |
| border-bottom: 1px solid #eee; | |
| margin-bottom: 1.5rem; | |
| overflow-x: auto; | |
| } | |
| .tab { | |
| padding: 1rem 1.5rem; | |
| cursor: pointer; | |
| border: none; | |
| background: none; | |
| font-size: 1rem; | |
| color: #7f8c8d; | |
| transition: var(--transition); | |
| white-space: nowrap; | |
| } | |
| .tab.active { | |
| color: var(--primary-color); | |
| border-bottom: 2px solid var(--primary-color); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| /* ID Card */ | |
| .id-card { | |
| width: 300px; | |
| height: 200px; | |
| background-color: white; | |
| border-radius: 8px; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
| padding: 1rem; | |
| margin: 0 auto; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .id-card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .id-card-logo { | |
| width: 50px; | |
| height: 50px; | |
| } | |
| .id-card-title { | |
| font-size: 0.9rem; | |
| font-weight: bold; | |
| text-align: center; | |
| } | |
| .id-card-photo { | |
| width: 80px; | |
| height: 100px; | |
| border: 2px solid #ddd; | |
| margin: 0 auto 1rem; | |
| display: block; | |
| } | |
| .id-card-details { | |
| font-size: 0.8rem; | |
| } | |
| .id-card-details p { | |
| margin-bottom: 0.3rem; | |
| } | |
| .id-card-qr { | |
| position: absolute; | |
| bottom: 1rem; | |
| right: 1rem; | |
| width: 50px; | |
| height: 50px; | |
| } | |
| /* Certificate */ | |
| .certificate { | |
| width: 800px; | |
| height: 600px; | |
| background-color: white; | |
| border: 10px solid #f5f5f5; | |
| padding: 2rem; | |
| margin: 0 auto; | |
| position: relative; | |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .certificate-border { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| border: 2px solid #ddd; | |
| pointer-events: none; | |
| } | |
| .certificate-header { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| .certificate-title { | |
| font-size: 2rem; | |
| font-weight: bold; | |
| color: var(--primary-color); | |
| margin-bottom: 0.5rem; | |
| } | |
| .certificate-subtitle { | |
| font-size: 1.2rem; | |
| color: #7f8c8d; | |
| } | |
| .certificate-content { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| } | |
| .certificate-name { | |
| font-size: 1.8rem; | |
| font-weight: bold; | |
| margin-bottom: 1rem; | |
| } | |
| .certificate-details { | |
| font-size: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| .certificate-signature { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-top: 3rem; | |
| } | |
| .signature { | |
| text-align: center; | |
| width: 200px; | |
| } | |
| .signature-line { | |
| height: 2px; | |
| background-color: #7f8c8d; | |
| margin-bottom: 0.5rem; | |
| } | |
| .certificate-qr { | |
| position: absolute; | |
| bottom: 2rem; | |
| right: 2rem; | |
| width: 80px; | |
| height: 80px; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| transform: translateX(-100%); | |
| } | |
| .sidebar.active { | |
| transform: translateX(0); | |
| } | |
| .main-content { | |
| margin-left: 0; | |
| } | |
| .header-container { | |
| padding: 1rem; | |
| } | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .certificate { | |
| width: 100%; | |
| height: auto; | |
| } | |
| } | |
| /* Utility Classes */ | |
| .text-center { | |
| text-align: center; | |
| } | |
| .text-right { | |
| text-align: right; | |
| } | |
| .mt-1 { | |
| margin-top: 0.5rem; | |
| } | |
| .mt-2 { | |
| margin-top: 1rem; | |
| } | |
| .mt-3 { | |
| margin-top: 1.5rem; | |
| } | |
| .mt-4 { | |
| margin-top: 2rem; | |
| } | |
| .mb-1 { | |
| margin-bottom: 0.5rem; | |
| } | |
| .mb-2 { | |
| margin-bottom: 1rem; | |
| } | |
| .mb-3 { | |
| margin-bottom: 1.5rem; | |
| } | |
| .mb-4 { | |
| margin-bottom: 2rem; | |
| } | |
| .d-flex { | |
| display: flex; | |
| } | |
| .justify-between { | |
| justify-content: space-between; | |
| } | |
| .align-center { | |
| align-items: center; | |
| } | |
| .gap-1 { | |
| gap: 0.5rem; | |
| } | |
| .gap-2 { | |
| gap: 1rem; | |
| } | |
| .gap-3 { | |
| gap: 1.5rem; | |
| } | |
| .grid-2 { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .grid-3 { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| /* Built with anycoder */ | |
| .built-with { | |
| position: fixed; | |
| bottom: 1rem; | |
| right: 1rem; | |
| background-color: var(--primary-color); | |
| color: white; | |
| padding: 0.5rem 1rem; | |
| border-radius: 4px; | |
| font-size: 0.9rem; | |
| text-decoration: none; | |
| box-shadow: var(--shadow); | |
| z-index: 1000; | |
| } | |
| .built-with:hover { | |
| opacity: 0.9; | |
| } | |
| /* Search and Filter */ | |
| .search-filter { | |
| display: flex; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| flex-wrap: wrap; | |
| } | |
| .search-input { | |
| flex: 1; | |
| min-width: 200px; | |
| } | |
| /* File Upload */ | |
| .file-upload { | |
| border: 2px dashed #ddd; | |
| border-radius: 4px; | |
| padding: 2rem; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .file-upload:hover { | |
| border-color: var(--primary-color); | |
| } | |
| .file-upload input { | |
| display: none; | |
| } | |
| .file-upload-label { | |
| cursor: pointer; | |
| } | |
| .file-preview { | |
| margin-top: 1rem; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .file-preview-item { | |
| position: relative; | |
| width: 100px; | |
| height: 100px; | |
| } | |
| .file-preview-item img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| border-radius: 4px; | |
| } | |
| .file-preview-remove { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| background-color: var(--danger-color); | |
| color: white; | |
| border: none; | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| cursor: pointer; | |
| } | |
| /* QR Code */ | |
| .qr-code { | |
| display: flex; | |
| justify-content: center; | |
| margin: 1rem 0; | |
| } | |
| .qr-code img { | |
| width: 100px; | |
| height: 100px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="header-container"> | |
| <div class="logo"> | |
| <img src="https://via.placeholder.com/50" alt="NCTI Logo"> | |
| <h1>NCTI Institute</h1> | |
| </div> | |
| <div class="header-actions"> | |
| <button class="btn btn-primary" id="toggleSidebar"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <div class="user-info"> | |
| <div class="user-avatar">A</div> | |
| <div> | |
| <p style="font-size: 0.9rem; margin-bottom: 0.2rem;">Admin</p> | |
| <small style="color: #7f8c8d;">Super Admin</small> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="sidebar" id="sidebar"> | |
| <div class="sidebar-header"> | |
| <h3>Menu</h3> | |
| </div> | |
| <ul class="sidebar-menu"> | |
| <li><a href="#" class="active" data-page="dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li> | |
| <li><a href="#" data-page="students"><i class="fas fa-users"></i> Students</a></li> | |
| <li><a href="#" data-page="courses"><i class="fas fa-book"></i> Courses</a></li> | |
| <li><a href="#" data-page="fees"><i class="fas fa-money-bill-wave"></i> Fees</a></li> | |
| <li><a href="#" data-page="attendance"><i class="fas fa-check-square"></i> Attendance</a></li> | |
| <li><a href="#" data-page="exams"><i class="fas fa-clipboard-list"></i> Exams</a></li> | |
| <li><a href="#" data-page="certificates"><i class="fas fa-certificate"></i> Certificates</a></li> | |
| <li><a href="#" data-page="marksheets"><i class="fas fa-file-alt"></i> Marksheets</a></li> | |
| <li><a href="#" data-page="branches"><i class="fas fa-building"></i> Branches</a></li> | |
| <li><a href="#" data-page="staff"><i class="fas fa-user-tie"></i> Staff</a></li> | |
| <li><a href="#" data-page="reports"><i class="fas fa-chart-bar"></i> Reports</a></li> | |
| <li><a href="#" data-page="settings"><i class="fas fa-cogs"></i> Settings</a></li> | |
| <li><a href="#" data-page="backup"><i class="fas fa-database"></i> Backup</a></li> | |
| <li><a href="#" data-page="notifications"><i class="fas fa-bell"></i> Notifications</a></li> | |
| <li><a href="#"><i class="fas fa-sign-out-alt"></i> Logout</a></li> | |
| </ul> | |
| </div> | |
| <div class="main-content" id="mainContent"> | |
| <!-- Dashboard Page --> | |
| <div class="page" id="dashboardPage"> | |
| <div class="page-header"> | |
| <h1 class="page-title">Dashboard</h1> | |
| <div class="breadcrumb"> | |
| <i class="fas fa-home"></i> | |
| <span>Home</span> | |
| <i class="fas fa-chevron-right"></i> | |
| <span>Dashboard</span> | |
| </div> | |
| </div> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-icon" style="color: var(--primary-color);"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <div class="stat-info"> | |
| <h3 id="totalStudents">1,250</h3> | |
| <p>Total Students</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon" style="color: var(--secondary-color);"> | |
| <i class="fas fa-book"></i> | |
| </div> | |
| <div class="stat-info"> | |
| <h3 id="activeCourses">12</h3> | |
| <p>Active Courses</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon" style="color: var(--info-color);"> | |
| <i class="fas fa-calendar-alt"></i> | |
| </div> | |
| <div class="stat-info"> | |
| <h3 id="runningBatches">25</h3> | |
| <p>Running Batches</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon" style="color: var(--warning-color);"> | |
| <i class="fas fa-money-bill-wave"></i> | |
| </div> | |
| <div class="stat-info"> | |
| <h3 id="totalFees">₹5,25,000</h3> | |
| <p>Total Fees Collected</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon" style="color: #3498db;"> | |
| <i class="fas fa-user-plus"></i> | |
| </div> | |
| <div class="stat-info"> | |
| <h3 id="todayJoining">5</h3> | |
| <p>Today's New Joining</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon" style="color: #2ecc71;"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <div class="stat-info"> | |
| <h3 id="todayAttendance">125</h3> | |
| <p>Today's Attendance</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid-2"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Recent Activity</h3> | |
| <button class="btn btn-primary" id="viewAllActivity">View All</button> | |
| </div> | |
| <div class="card-body"> | |
| <div class="table-responsive"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Date</th> | |
| <th>User</th> | |
| <th>Action</th> | |
| <th>Details</th> | |
| </tr> | |
| </thead> | |
| <tbody id="recentActivity"> | |
| <tr> | |
| <td>2023-06-15 10:30 AM</td> | |
| <td>Admin</td> | |
| <td>Student Added</td> | |
| <td>Rajesh Kumar enrolled in Web Development</td> | |
| </tr> | |
| <tr> | |
| <td>2023-06-14 03:15 PM</td> | |
| <td>Staff (Priya)</td> | |
| <td>Fee Received</td> | |
| <td>₹12,000 from Ananya Sharma</td> | |
| </tr> | |
| <tr> | |
| <td>2023-06-14 11:00 AM</td> | |
| <td>Admin</td> | |
| <td>Certificate Generated</td> | |
| <td>For batch WD-2023-05</td> | |
| </tr> | |
| <tr> | |
| <td>2023-06-13 04:45 PM</td> | |
| <td>Staff (Amit)</td> | |
| <td>Attendance Marked</td> | |
| <td>Batch WD-2023-05 - 25 present</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Quick Actions</h3> | |
| </div> | |
| <div class="card-body"> | |
| <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;"> | |
| <button class="btn btn-primary quick-action" data-action="add-student" style="height: 100px;"> | |
| <i class="fas fa-user-plus" style="font-size: 2rem; margin-bottom: 0.5rem; display: block;"></i> | |
| Add Student | |
| </button> | |
| <button class="btn btn-secondary quick-action" data-action="record-fee" style="height: 100px;"> | |
| <i class="fas fa-money-bill-wave" style="font-size: 2rem; margin-bottom: 0.5rem; display: block;"></i> | |
| Record Fee | |
| </button> | |
| <button class="btn btn-info quick-action" data-action="mark-attendance" style="height: 100px;"> | |
| <i class="fas fa-check-square" style="font-size: 2rem; margin-bottom: 0.5rem; display: block;"></i> | |
| Mark Attendance | |
| </button> | |
| <button class="btn" style="height: 100px; background-color: #34495e; color: white;" data-action="generate-certificates"> | |
| <i class="fas fa-certificate" style="font-size: 2rem; margin-bottom: 0.5rem; display: block;"></i> | |
| Generate Certificates | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Upcoming Certificate Expiry</h3> | |
| </div> | |
| <div class="card-body"> | |
| <div class="table-responsive"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Student Name</th> | |
| <th>Course</th> | |
| <th>Certificate Date</th> | |
| <th>Days Remaining</th> | |
| </tr> | |
| </thead> | |
| <tbody id="certificateExpiry"> | |
| <tr> | |
| <td>Rahul Sharma</td> | |
| <td>Web Development</td> | |
| <td>2023-07-15</td> | |
| <td>30 days</td> | |
| </tr> | |
| <tr> | |
| <td>Priya Singh</td> | |
| <td>Graphic Design</td> | |
| <td>2023-07-20</td> | |
| <td>25 days</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Students Page --> | |
| <div class="page" id="studentsPage" style="display: none;"> | |
| <div class="page-header"> | |
| <h1 class="page-title">Student Management</h1> | |
| <div class="breadcrumb"> | |
| <i class="fas fa-home"></i> | |
| <span>Home</span> | |
| <i class="fas fa-chevron-right"></i> | |
| <span>Students</span> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Student List</h3> | |
| <div> | |
| <button class="btn btn-primary" id="addNewStudent">Add New Student</button> | |
| <button class="btn btn-secondary" id="importStudents">Import Students</button> | |
| </div> | |
| </div> | |
| <div class="card-body"> | |
| <div class="search-filter"> | |
| <input type="text" class="form-control search-input" id="studentSearch" placeholder="Search students..."> | |
| <select class="form-control" id="studentCourseFilter"> | |
| <option value="">All Courses</option> | |
| <option value="web-dev">Web Development</option> | |
| <option value="graphic-design">Graphic Design</option> | |
| <option value="digital-marketing">Digital Marketing</option> | |
| </select> | |
| <select class="form-control" id="studentBranchFilter"> | |
| <option value="">All Branches</option> | |
| <option value="main">Main Branch</option> | |
| <option value="north">North Branch</option> | |
| </select> | |
| </div> | |
| <div class="table-responsive"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>ID</th> | |
| <th>Photo</th> | |
| <th>Name</th> | |
| <th>Course</th> | |
| <th>Branch</th> | |
| <th>Mobile</th> | |
| <th>Joining Date</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody id="studentList"> | |
| <tr> | |
| <td>NCTI-2023-001</td> | |
| <td><img src="https://via.placeholder.com/40" alt="Student" class="student-photo"></td> | |
| <td>Rajesh Kumar</td> | |
| <td>Web Development</td> | |
| <td>Main Branch</td> | |
| <td>9876543210</td> | |
| <td>2023-01-15</td> | |
| <td> | |
| <button class="btn btn-sm btn-info" data-action="view-student" data-id="1"><i class="fas fa-eye"></i></button> | |
| <button class="btn btn-sm btn-secondary" data-action="edit-student" data-id="1"><i class="fas fa-edit"></i></button> | |
| <button class="btn btn-sm btn-danger" data-action="delete-student" data-id="1"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>NCTI-2023-002</td> | |
| <td><img src="https://via.placeholder.com/40" alt="Student" class="student-photo"></td> | |
| <td>Ananya Sharma</td> | |
| <td>Graphic Design</td> | |
| <td>North Branch</td> | |
| <td>9876543211</td> | |
| <td>2023-02-20</td> | |
| <td> | |
| <button class="btn btn-sm btn-info" data-action="view-student" data-id="2"><i class="fas fa-eye"></i></button> | |
| <button class="btn btn-sm btn-secondary" data-action="edit-student" data-id="2"><i class="fas fa-edit"></i></button> | |
| <button class="btn btn-sm btn-danger" data-action="delete-student" data-id="2"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Courses Page --> | |
| <div class="page" id="coursesPage" style="display: none;"> | |
| <div class="page-header"> | |
| <h1 class="page-title">Course Management</h1> | |
| <div class="breadcrumb"> | |
| <i class="fas fa-home"></i> | |
| <span>Home</span> | |
| <i class="fas fa-chevron-right"></i> | |
| <span>Courses</span> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Course List</h3> | |
| <button class="btn btn-primary" id="addNewCourse">Add New Course</button> | |
| </div> | |
| <div class="card-body"> | |
| <div class="table-responsive"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>ID</th> | |
| <th>Course Name</th> | |
| <th>Duration</th> | |
| <th>Fees</th> | |
| <th>Students</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody id="courseList"> | |
| <tr> | |
| <td>COURSE-001</td> | |
| <td>Web Development</td> | |
| <td>6 Months</td> | |
| <td>₹25,000</td> | |
| <td>125</td> | |
| <td> | |
| <button class="btn btn-sm btn-secondary" data-action="edit-course" data-id="1"><i class="fas fa-edit"></i></button> | |
| <button class="btn btn-sm btn-danger" data-action="delete-course" data-id="1"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>COURSE-002</td> | |
| <td>Graphic Design</td> | |
| <td>4 Months</td> | |
| <td>₹20,000</td> | |
| <td>85</td> | |
| <td> | |
| <button class="btn btn-sm btn-secondary" data-action="edit-course" data-id="2"><i class="fas fa-edit"></i></button> | |
| <button class="btn btn-sm btn-danger" data-action="delete-course" data-id="2"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Fees Page --> | |
| <div class="page" id="feesPage" style="display: none;"> | |
| <div class="page-header"> | |
| <h1 class="page-title">Fees Management</h1> | |
| <div class="breadcrumb"> | |
| <i class="fas fa-home"></i> | |
| <span>Home</span> | |
| <i class="fas fa-chevron-right"></i> | |
| <span>Fees</span> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Fee Payments</h3> | |
| <button class="btn btn-primary" id="recordNewFee">Record New Payment</button> | |
| </div> | |
| <div class="card-body"> | |
| <div class="search-filter"> | |
| <input type="text" class="form-control search-input" id="feeSearch" placeholder="Search by student name or ID..."> | |
| <select class="form-control" id="feeCourseFilter"> | |
| <option value="">All Courses</option> | |
| <option value="web-dev">Web Development</option> | |
| <option value="graphic-design">Graphic Design</option> | |
| </select> | |
| <input type="date" class="form-control" id="feeDateFilter"> | |
| </div> | |
| <div class="table-responsive"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Date</th> | |
| <th>Student</th> | |
| <th>Course</th> | |
| <th>Amount</th> | |
| <th>Payment Mode</th> | |
| <th>Receipt</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody id="feeList"> | |
| <tr> | |
| <td>2023-06-15</td> | |
| <td>Rajesh Kumar (NCTI-2023-001)</td> | |
| <td>Web Development</td> | |
| <td>₹12,000</td> | |
| <td>Cash</td> | |
| <td><button class="btn btn-sm btn-info" data-action="view-receipt" data-id="1"><i class="fas fa-file-pdf"></i></button></td> | |
| <td> | |
| <button class="btn btn-sm btn-secondary" data-action="edit-fee" data-id="1"><i class="fas fa-edit"></i></button> | |
| <button class="btn btn-sm btn-danger" data-action="delete-fee" data-id="1"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Fee Reports</h3> | |
| </div> | |
| <div class="card-body"> | |
| <div class="grid-2"> | |
| <div> | |
| <h4>Date-wise Report</h4> | |
| <canvas id="feeDateChart" style="height: 200px;"></canvas> | |
| </div> | |
| <div> | |
| <h4>Course-wise Report</h4> | |
| <canvas id="feeCourseChart" style="height: 200px;"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Attendance Page --> | |
| <div class="page" id="attendancePage" style="display: none;"> | |
| <div class="page-header"> | |
| <h1 class="page-title">Attendance Management</h1> | |
| <div class="breadcrumb"> | |
| <i class="fas fa-home"></i> | |
| <span>Home</span> | |
| <i class="fas fa-chevron-right"></i> | |
| <span>Attendance</span> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Mark Attendance</h3> | |
| </div> | |
| <div class="card-body"> | |
| <form id="attendanceForm"> | |
| <div class="grid-3"> | |
| <div class="form-group"> | |
| <label for="attendanceDate">Date</label> | |
| <input type="date" id="attendanceDate" class="form-control" value="<?php echo date('Y-m-d'); ?>"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="attendanceCourse">Course</label> | |
| <select id="attendanceCourse" class="form-control"> | |
| <option value="">Select Course</option> | |
| <option value="web-dev">Web Development</option> | |
| <option value="graphic-design">Graphic Design</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="attendanceBatch">Batch</label> | |
| <select id="attendanceBatch" class="form-control"> | |
| <option value="">Select Batch</option> | |
| <option value="morning">Morning</option> | |
| <option value="evening">Evening</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <button type="button" class="btn btn-primary" id="loadStudentsForAttendance">Load Students</button> | |
| </div> | |
| </form> | |
| <div id="attendanceStudentsContainer" style="display: none;"> | |
| <form id="attendanceStudentsForm"> | |
| <div class="table-responsive"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Student ID</th> | |
| <th>Name</th> | |
| <th>Status</th> | |
| </tr> | |
| </thead> | |
| <tbody id="attendanceStudentsList"> | |
| <!-- Students will be loaded here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <button type="button" class="btn btn-success mt-2" id="saveAttendance">Save Attendance</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Attendance Reports</h3> | |
| </div> | |
| <div class="card-body"> | |
| <div class="search-filter"> | |
| <input type="date" class="form-control" id="attendanceReportDate"> | |
| <select class="form-control" id="attendanceReportCourse"> | |
| <option value="">All Courses</option> | |
| <option value="web-dev">Web Development</option> | |
| <option value="graphic-design">Graphic Design</option> | |
| </select> | |
| <button class="btn btn-primary" id="generateAttendanceReport">Generate Report</button> | |
| <button class="btn btn-secondary" id="exportAttendanceReport">Export to Excel</button> | |
| </div> | |
| <div id="attendanceReportContainer" style="display: none;"> | |
| <div class="table-responsive"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Date</th> | |
| <th>Student</th> | |
| <th>Course</th> | |
| <th>Status</th> | |
| </tr> | |
| </thead> | |
| <tbody id="attendanceReportList"> | |
| <!-- Report will be generated here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Exams Page --> | |
| <div class="page" id="examsPage" style="display: none;"> | |
| <div class="page-header"> | |
| <h1 class="page-title">Exam & Result Management</h1> | |
| <div class="breadcrumb"> | |
| <i class="fas fa-home"></i> | |
| <span>Home</span> | |
| <i class="fas fa-chevron-right"></i> | |
| <span>Exams</span> | |
| </div> | |
| </div> | |
| <div class="tabs"> | |
| <button class="tab active" data-tab="exams">Exams</button> | |
| <button class="tab" data-tab="results">Results</button> | |
| </div> | |
| <div class="tab-content active" id="exams"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Exam List</h3> | |
| <button class="btn btn-primary |