Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Add Student - Institute Management System</title> | |
| <!-- Bootstrap 5 CSS --> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <!-- AdminLTE CSS --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css"> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Select2 --> | |
| <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> | |
| <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" | |
| rel="stylesheet" /> | |
| <!-- Datepicker --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"> | |
| <!-- Custom CSS --> | |
| <style> | |
| :root { | |
| --primary-color: #343a40; | |
| --secondary-color: #6c757d; | |
| --success-color: #28a745; | |
| --danger-color: #dc3545; | |
| --warning-color: #ffc107; | |
| --info-color: #17a2b8; | |
| --light-color: #f8f9fa; | |
| --dark-color: #343a40; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background-color: #f4f6f9; | |
| } | |
| .sidebar-dark-primary { | |
| background-color: var(--primary-color); | |
| } | |
| .main-header { | |
| background-color: white; | |
| border-bottom: 1px solid #dee2e6; | |
| } | |
| .brand-link { | |
| background-color: var(--primary-color); | |
| } | |
| .card { | |
| box-shadow: 0 0.15rem 1.75rem 0 rgba(33, 40, 50, 0.15); | |
| border: none; | |
| } | |
| .card-header { | |
| background-color: white; | |
| border-bottom: 1px solid #dee2e6; | |
| font-weight: 600; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary-color); | |
| border-color: var(--primary-color); | |
| } | |
| .btn-success { | |
| background-color: var(--success-color); | |
| border-color: var(--success-color); | |
| } | |
| .btn-danger { | |
| background-color: var(--danger-color); | |
| border-color: var(--danger-color); | |
| } | |
| .btn-info { | |
| background-color: var(--info-color); | |
| border-color: var(--info-color); | |
| } | |
| .table { | |
| margin-bottom: 0; | |
| } | |
| .table th { | |
| background-color: var(--light-color); | |
| font-weight: 600; | |
| } | |
| .select2-container--bootstrap-5 .select2-selection { | |
| padding: 0.375rem 0.75rem; | |
| border: 1px solid #ced4da; | |
| border-radius: 0.25rem; | |
| } | |
| .form-control { | |
| border-radius: 0.25rem; | |
| } | |
| .modal-content { | |
| border-radius: 0.3rem; | |
| } | |
| .nav-pills .nav-link.active { | |
| background-color: var(--primary-color); | |
| } | |
| .user-panel { | |
| padding: 10px; | |
| background-color: rgba(0, 0, 0, 0.1); | |
| } | |
| .user-panel .image { | |
| float: left; | |
| width: 2.1rem; | |
| height: 2.1rem; | |
| margin-right: 10px; | |
| } | |
| .user-panel .info { | |
| display: block; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| padding-top: 5px; | |
| } | |
| .user-panel .info>p { | |
| margin-bottom: 0; | |
| font-size: 0.8rem; | |
| color: #c2c7d0; | |
| } | |
| .sidebar-menu .nav-item>.nav-link { | |
| margin-bottom: 2px; | |
| } | |
| .sidebar-menu .nav-item>.nav-link>.nav-icon { | |
| margin-right: 10px; | |
| width: 20px; | |
| text-align: center; | |
| } | |
| .content-wrapper { | |
| min-height: calc(100vh - 56px); | |
| } | |
| .main-footer { | |
| background-color: white; | |
| border-top: 1px solid #dee2e6; | |
| padding: 1rem; | |
| } | |
| .info-box { | |
| display: flex; | |
| min-height: 80px; | |
| background: #fff; | |
| width: 100%; | |
| box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); | |
| border-radius: 0.25rem; | |
| margin-bottom: 15px; | |
| } | |
| .info-box-icon { | |
| border-top-left-radius: 2px; | |
| border-top-right-radius: 0; | |
| border-bottom-right-radius: 0; | |
| border-bottom-left-radius: 2px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 80px; | |
| font-size: 2rem; | |
| } | |
| .info-box-content { | |
| padding: 10px; | |
| flex: 1; | |
| } | |
| .info-box-text { | |
| text-transform: uppercase; | |
| font-size: 0.85rem; | |
| color: #555; | |
| } | |
| .info-box-number { | |
| display: block; | |
| font-weight: bold; | |
| font-size: 1.5rem; | |
| } | |
| .progress-description, | |
| .info-box-text { | |
| display: block; | |
| font-size: 0.85rem; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .small-box { | |
| border-radius: 0.25rem; | |
| display: block; | |
| margin-bottom: 20px; | |
| position: relative; | |
| } | |
| .small-box>.inner { | |
| padding: 10px; | |
| } | |
| .small-box>.small-box-footer { | |
| position: relative; | |
| text-align: center; | |
| padding: 3px 0; | |
| color: #fff; | |
| color: rgba(255, 255, 255, 0.8); | |
| display: block; | |
| z-index: 10; | |
| background: rgba(0, 0, 0, 0.1); | |
| text-decoration: none; | |
| } | |
| .small-box h3 { | |
| font-size: 2.2rem; | |
| font-weight: bold; | |
| margin: 0 0 10px 0; | |
| white-space: nowrap; | |
| padding: 0; | |
| } | |
| .small-box p { | |
| font-size: 1rem; | |
| } | |
| .small-box .icon { | |
| transition: all .3s linear; | |
| position: absolute; | |
| top: -10px; | |
| right: 10px; | |
| z-index: 0; | |
| font-size: 3rem; | |
| color: rgba(0, 0, 0, 0.15); | |
| } | |
| .bg-info { | |
| background-color: var(--info-color) ; | |
| } | |
| .bg-success { | |
| background-color: var(--success-color) ; | |
| } | |
| .bg-warning { | |
| background-color: var(--warning-color) ; | |
| } | |
| .bg-danger { | |
| background-color: var(--danger-color) ; | |
| } | |
| .text-sm { | |
| font-size: 0.85rem; | |
| } | |
| .text-bold { | |
| font-weight: 600; | |
| } | |
| .text-muted { | |
| color: #6c757d ; | |
| } | |
| .table-responsive { | |
| overflow-x: auto; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .form-group { | |
| margin-bottom: 1rem; | |
| } | |
| .required:after { | |
| content: " *"; | |
| color: var(--danger-color); | |
| } | |
| .error-message { | |
| color: var(--danger-color); | |
| font-size: 0.85rem; | |
| margin-top: 0.25rem; | |
| } | |
| .loading-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| z-index: 9999; | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .loading-overlay.active { | |
| display: flex; | |
| } | |
| .spinner { | |
| width: 50px; | |
| height: 50px; | |
| border: 5px solid rgba(255, 255, 255, 0.3); | |
| border-radius: 50%; | |
| border-top-color: white; | |
| animation: spin 1s ease-in-out infinite; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .student-photo-preview { | |
| width: 150px; | |
| height: 150px; | |
| object-fit: cover; | |
| border: 1px solid #ddd; | |
| margin-bottom: 10px; | |
| display: none; | |
| } | |
| .photo-upload-area { | |
| border: 2px dashed #ccc; | |
| padding: 20px; | |
| text-align: center; | |
| cursor: pointer; | |
| border-radius: 5px; | |
| transition: all 0.3s; | |
| } | |
| .photo-upload-area:hover { | |
| border-color: var(--primary-color); | |
| background-color: #f8f9fa; | |
| } | |
| .photo-upload-area i { | |
| font-size: 3rem; | |
| color: #ccc; | |
| margin-bottom: 10px; | |
| } | |
| .photo-upload-area p { | |
| margin-bottom: 0; | |
| color: #666; | |
| } | |
| .form-section { | |
| background-color: white; | |
| padding: 20px; | |
| border-radius: 5px; | |
| margin-bottom: 20px; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); | |
| } | |
| .form-section-header { | |
| border-bottom: 1px solid #eee; | |
| padding-bottom: 10px; | |
| margin-bottom: 20px; | |
| font-weight: 600; | |
| color: var(--primary-color); | |
| } | |
| .custom-file-input { | |
| position: relative; | |
| overflow: hidden; | |
| display: inline-block; | |
| } | |
| .custom-file-input input[type="file"] { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| opacity: 0; | |
| width: 100%; | |
| height: 100%; | |
| cursor: pointer; | |
| } | |
| .custom-file-label { | |
| display: inline-block; | |
| padding: 6px 12px; | |
| background-color: #f8f9fa; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| .custom-file-label::after { | |
| content: "Browse"; | |
| margin-left: 10px; | |
| color: var(--primary-color); | |
| } | |
| .address-fields { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 15px; | |
| } | |
| @media (max-width: 768px) { | |
| .address-fields { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| </style> | |
| </head> | |
| <body class="hold-transition sidebar-mini layout-fixed"> | |
| <div class="wrapper"> | |
| <!-- Loading Overlay --> | |
| <div class="loading-overlay" id="loadingOverlay"> | |
| <div class="spinner"></div> | |
| </div> | |
| <!-- Navbar --> | |
| <nav class="main-header navbar navbar-expand navbar-white navbar-light"> | |
| <div class="container-fluid"> | |
| <!-- Left navbar links --> | |
| <ul class="navbar-nav"> | |
| <li class="nav-item"> | |
| <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a> | |
| </li> | |
| <li class="nav-item d-none d-sm-inline-block"> | |
| <a href="dashboard.html" class="nav-link">Home</a> | |
| </li> | |
| </ul> | |
| <!-- Right navbar links --> | |
| <ul class="navbar-nav ml-auto"> | |
| <li class="nav-item dropdown"> | |
| <a class="nav-link" data-toggle="dropdown" href="#"> | |
| <i class="far fa-bell"></i> | |
| <span class="badge badge-warning navbar-badge">15</span> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right"> | |
| <span class="dropdown-item dropdown-header">15 Notifications</span> | |
| <div class="dropdown-divider"></div> | |
| <a href="#" class="dropdown-item"> | |
| <i class="fas fa-envelope mr-2"></i> 4 new messages | |
| <span class="float-right text-muted text-sm">3 mins</span> | |
| </a> | |
| <div class="dropdown-divider"></div> | |
| <a href="#" class="dropdown-item"> | |
| <i class="fas fa-users mr-2"></i> 8 friend requests | |
| <span class="float-right text-muted text-sm">12 hours</span> | |
| </a> | |
| <div class="dropdown-divider"></div> | |
| <a href="#" class="dropdown-item"> | |
| <i class="fas fa-file mr-2"></i> 3 new reports | |
| <span class="float-right text-muted text-sm">2 days</span> | |
| </a> | |
| <div class="dropdown-divider"></div> | |
| <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a> | |
| </div> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" data-widget="fullscreen" href="#" role="button"> | |
| <i class="fas fa-expand-arrows-alt"></i> | |
| </a> | |
| </li> | |
| <li class="nav-item dropdown user-menu"> | |
| <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown"> | |
| <img src="https://via.placeholder.com/160" class="user-image img-circle elevation-2" alt="User Image"> | |
| <span class="d-none d-md-inline">Alexander Pierce</span> | |
| </a> | |
| <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-right"> | |
| <!-- User image --> | |
| <li class="user-header bg-primary"> | |
| <img src="https://via.placeholder.com/160" class="img-circle elevation-2" alt="User Image"> | |
| <p> | |
| Alexander Pierce - Web Developer | |
| <small>Member since Nov. 2012</small> | |
| </p> | |
| </li> | |
| <!-- Menu Body --> | |
| <li class="user-body"> | |
| <div class="row"> | |
| <div class="col-4 text-center"> | |
| <a href="#">Followers</a> | |
| </div> | |
| <div class="col-4 text-center"> | |
| <a href="#">Sales</a> | |
| </div> | |
| <div class="col-4 text-center"> | |
| <a href="#">Friends</a> | |
| </div> | |
| </div> | |
| </li> | |
| <!-- Menu Footer--> | |
| <li class="user-footer"> | |
| <a href="#" class="btn btn-default btn-flat">Profile</a> | |
| <a href="#" class="btn btn-default btn-flat float-right">Sign out</a> | |
| </li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </div> | |
| </nav> | |
| <!-- Main Sidebar Container --> | |
| <aside class="main-sidebar sidebar-dark-primary elevation-4"> | |
| <!-- Brand Logo --> | |
| <a href="dashboard.html" class="brand-link"> | |
| <img src="https://via.placeholder.com/160" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"> | |
| <span class="brand-text font-weight-light">Institute MS</span> | |
| </a> | |
| <!-- Sidebar --> | |
| <div class="sidebar"> | |
| <!-- Sidebar user panel (optional) --> | |
| <div class="user-panel mt-3 pb-3 mb-3 d-flex"> | |
| <div class="image"> | |
| <img src="https://via.placeholder.com/160" class="img-circle elevation-2" alt="User Image"> | |
| </div> | |
| <div class="info"> | |
| <a href="#" class="d-block">Alexander Pierce</a> | |
| <p>Super Admin</p> | |
| </div> | |
| </div> | |
| <!-- Sidebar Menu --> | |
| <nav class="mt-2"> | |
| <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"> | |
| <!-- Dashboard --> | |
| <li class="nav-item"> | |
| <a href="dashboard.html" class="nav-link"> | |
| <i class="nav-icon fas fa-tachometer-alt"></i> | |
| <p>Dashboard</p> | |
| </a> | |
| </li> | |
| <!-- Student Management --> | |
| <li class="nav-item menu-open"> | |
| <a href="#" class="nav-link active"> | |
| <i class="nav-icon fas fa-user-graduate"></i> | |
| <p> | |
| Student Management | |
| <i class="right fas fa-angle-left"></i> | |
| </p> | |
| </a> | |
| <ul class="nav nav-treeview"> | |
| <li class="nav-item"> | |
| <a href="students.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>All Students</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="add-student.html" class="nav-link active"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Add Student</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="student-import.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Import Students</p> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <!-- Course Management --> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link"> | |
| <i class="nav-icon fas fa-book"></i> | |
| <p> | |
| Course Management | |
| <i class="right fas fa-angle-left"></i> | |
| </p> | |
| </a> | |
| <ul class="nav nav-treeview"> | |
| <li class="nav-item"> | |
| <a href="courses.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>All Courses</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="add-course.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Add Course</p> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <!-- Batch Management --> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link"> | |
| <i class="nav-icon fas fa-clock"></i> | |
| <p> | |
| Batch Management | |
| <i class="right fas fa-angle-left"></i> | |
| </p> | |
| </a> | |
| <ul class="nav nav-treeview"> | |
| <li class="nav-item"> | |
| <a href="batches.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>All Batches</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="add-batch.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Add Batch</p> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <!-- Attendance Management --> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link"> | |
| <i class="nav-icon fas fa-calendar-check"></i> | |
| <p> | |
| Attendance | |
| <i class="right fas fa-angle-left"></i> | |
| </p> | |
| </a> | |
| <ul class="nav nav-treeview"> | |
| <li class="nav-item"> | |
| <a href="mark-attendance.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Mark Attendance</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="attendance-reports.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Attendance Reports</p> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <!-- Fees Management --> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link"> | |
| <i class="nav-icon fas fa-money-bill-wave"></i> | |
| <p> | |
| Fees Management | |
| <i class="right fas fa-angle-left"></i> | |
| </p> | |
| </a> | |
| <ul class="nav nav-treeview"> | |
| <li class="nav-item"> | |
| <a href="fees-collection.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Collect Fees</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="fees-reports.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Fees Reports</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="pending-fees.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Pending Fees</p> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <!-- Exam Management --> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link"> | |
| <i class="nav-icon fas fa-clipboard-list"></i> | |
| <p> | |
| Exam Management | |
| <i class="right fas fa-angle-left"></i> | |
| </p> | |
| </a> | |
| <ul class="nav nav-treeview"> | |
| <li class="nav-item"> | |
| <a href="exams.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>All Exams</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="add-exam.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Add Exam</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="enter-marks.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Enter Marks</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="marksheets.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Marksheets</p> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <!-- Certificate Management --> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link"> | |
| <i class="nav-icon fas fa-certificate"></i> | |
| <p> | |
| Certificates | |
| <i class="right fas fa-angle-left"></i> | |
| </p> | |
| </a> | |
| <ul class="nav nav-treeview"> | |
| <li class="nav-item"> | |
| <a href="certificate-templates.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Templates</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="generate-certificate.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Generate Certificate</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="verify-certificate.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Verify Certificate</p> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <!-- ID Card Management --> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link"> | |
| <i class="nav-icon fas fa-id-card"></i> | |
| <p> | |
| ID Cards | |
| <i class="right fas fa-angle-left"></i> | |
| </p> | |
| </a> | |
| <ul class="nav nav-treeview"> | |
| <li class="nav-item"> | |
| <a href="id-card-templates.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Templates</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="generate-id-card.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Generate ID Card</p> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <!-- Branch Management --> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link"> | |
| <i class="nav-icon fas fa-building"></i> | |
| <p> | |
| Branch Management | |
| <i class="right fas fa-angle-left"></i> | |
| </p> | |
| </a> | |
| <ul class="nav nav-treeview"> | |
| <li class="nav-item"> | |
| <a href="branches.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>All Branches</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="add-branch.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Add Branch</p> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <!-- Staff Management --> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link"> | |
| <i class="nav-icon fas fa-users-cog"></i> | |
| <p> | |
| Staff Management | |
| <i class="right fas fa-angle-left"></i> | |
| </p> | |
| </a> | |
| <ul class="nav nav-treeview"> | |
| <li class="nav-item"> | |
| <a href="staff.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>All Staff</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="add-staff.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Add Staff</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="staff-permissions.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Permissions</p> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <!-- Reports --> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link"> | |
| <i class="nav-icon fas fa-chart-pie"></i> | |
| <p> | |
| Reports | |
| <i class="right fas fa-angle-left"></i> | |
| </p> | |
| </a> | |
| <ul class="nav nav-treeview"> | |
| <li class="nav-item"> | |
| <a href="student-reports.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Student Reports</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="financial-reports.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Financial Reports</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="attendance-reports.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Attendance Reports</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="exam-reports.html" class="nav-link"> | |
| <i class="far fa-circle nav-icon"></i> | |
| <p>Exam Reports</p> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <!-- Backup/Restore --> | |
| <li class="nav-item"> | |
| <a href="backup.html" class="nav-link"> | |
| <i class="nav-icon fas fa-database"></i> | |
| <p>Backup/Restore</p> | |
| </a> | |
| </li> | |
| <!-- Settings --> | |
| <li class="nav-item"> | |
| <a href="settings.html" class="nav-link"> | |
| <i class="nav-icon fas fa-cogs"></i> | |
| <p>Settings</p> | |
| </a> | |
| </li> | |
| <!-- Logout --> | |
| <li class="nav-item"> | |
| <a href="login.html" class="nav-link"> | |
| <i class="nav-icon fas fa-sign-out-alt"></i> | |
| <p>Logout</p> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </aside> | |
| <!-- Content Wrapper --> | |
| <div class="content-wrapper"> | |
| <!-- Content Header --> | |
| <div class="content-header"> | |
| <div class="container-fluid"> | |
| <div class="row mb-2"> | |
| <div class="col-sm-6"> | |
| <h1 class="m-0">Add Student</h1> | |
| </div> | |
| <div class="col-sm-6"> | |
| <ol class="breadcrumb float-sm-right"> | |
| <li class="breadcrumb-item"><a href="dashboard.html">Home</a></li> | |
| <li class="breadcrumb-item"><a href="students.html">Student Management</a></li> | |
| <li class="breadcrumb-item active">Add Student</li> | |
| </ol> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <section class="content"> | |
| <div class="container-fluid"> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Student Registration Form</h3> | |
| <div class="card-tools"> | |
| <button type="button" class="btn btn-tool" data-card-widget="collapse"> | |
| <i class="fas fa-minus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="card-body"> | |
| <form id="studentForm" enctype="multipart/form-data"> | |
| <!-- Personal Information Section --> | |
| <div class="form-section"> | |
| <div class="form-section-header"> | |
| <i class="fas fa-user mr-2"></i> Personal Information | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-3"> | |
| <div class="form-group"> | |
| <label class="required">Student ID</label> | |
| <input type="text" class="form-control" id="studentId" name="studentId" readonly> | |
| </div> | |
| </div> | |
| <div class="col-md-3"> | |
| <div class="form-group"> | |
| <label class="required">First Name</label> | |
| <input type="text" class="form-control" id="firstName" name="firstName" required> | |
| <div class="error-message" id="firstNameError"></div> | |
| </div> | |
| </div> | |
| <div class="col-md-3"> | |
| <div class="form-group"> | |
| <label>Middle Name</label> | |
| <input type="text" class="form-control" id="middleName" name="middleName"> | |
| </div> | |
| </div> | |
| <div class="col-md-3"> | |
| <div class="form-group"> | |
| <label class="required">Last Name</label> | |
| <input type="text" class="form-control" id="lastName" name="lastName" required> | |
| <div class="error-message" id="lastNameError"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-3"> | |
| <div class="form-group"> | |
| <label class="required">Date of Birth</label> | |
| <div class="input-group date" id="dobPicker"> | |
| <input type="text" class="form-control" id="dob" name="dob" required> | |
| <div class="input-group-append"> | |
| <span class="input-group-text"><i class="fas fa-calendar"></i></span> | |
| </div> | |
| </div> | |
| <div class="error-message" id="dobError"></div> | |
| </div> | |
| </div> | |
| <div class="col-md-3"> | |
| <div class="form-group"> | |
| <label class="required">Gender</label> | |
| <select class="form-control select2" id="gender" name="gender" required> | |
| <option value="">Select Gender</option> | |
| <option value="Male">Male</option> | |
| <option value="Female">Female</option> | |
| <option value="Other">Other</option> | |
| </select> | |
| <div class="error-message" id="genderError"></div> | |
| </div> | |
| </div> | |
| <div class="col-md-3"> | |
| <div class="form-group"> | |
| <label class="required">Mobile Number</label> | |
| <input type="tel" class="form-control" id="mobile" name="mobile" required> | |
| <div class="error-message" id="mobileError"></div> | |
| </div> | |
| </div> | |
| <div class="col-md-3"> | |
| <div class="form-group"> | |
| <label>Alternate Mobile</label> | |
| <input type="tel" class="form-control" id="alternateMobile" name="alternateMobile"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-3"> | |
| <div class="form-group"> | |
| <label class="required">Email</label> | |
| <input type="email" class="form-control" id="email" name="email" required> | |
| <div class="error-message" id="emailError"></div> | |
| </div> | |
| </div> | |
| <div class="col-md-3"> | |
| <div class="form-group"> | |
| <label>Aadhaar Number</label> | |
| <input type="text" class="form-control" id="aadhaar" name="aadhaar"> | |
| </div> | |
| </div> | |
| <div class="col-md-3"> | |
| <div class="form-group"> | |
| <label>Blood Group</label> | |
| <select class="form-control select2" id="bloodGroup" name="bloodGroup"> | |
| <option value="">Select Blood Group</option> | |
| <option value="A+">A+</option> | |
| <option value="A-">A-</option> | |
| <option value="B+">B+</option> | |
| <option value="B-">B-</option> | |
| <option value="AB+">AB+</option> | |
| <option value="AB-">AB-</option> | |
| <option value="O+">O+</option> | |
| <option value="O-">O-</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="col-md-3"> | |
| <div class="form-group"> | |
| <label>Student Photo</label> | |
| <div class="photo-upload-area" id="photoUploadArea"> | |
| <i class="fas fa-camera"></i> | |
| <p>Click to upload photo</p> | |
| <input type="file" id="studentPhoto" name="studentPhoto" accept="image/*" style="display: none;"> | |
| </div> | |
| <img id="studentPhotoPreview" class="student-photo-preview" alt="Student Photo"> | |
| <div class="error-message" id="photoError"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Address Information Section --> | |
| <div class="form-section"> | |
| <div class="form-section-header"> | |
| <i class="fas fa-map-marker-alt mr-2"></i> Address Information | |
| </div> | |
| <div class="address-fields"> | |
| <div class="form-group"> | |
| <label class="required">Address Line 1</label> | |
| <input type="text" class="form-control" id="addressLine1" name="addressLine1" required> | |
| <div class="error-message" id="addressLine1Error"></div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Address Line 2</label> | |
| <input type="text" class="form-control" id="addressLine2" name="addressLine2"> | |
| </div> | |
| <div class="form-group"> | |
| <label class="required">City</label> | |
| <input type="text" class="form-control" id="city" name="city" required> | |
| <div class="error-message" id="cityError"></div> | |
| </div> | |
| <div class="form-group"> | |
| <label class="required">State</label> | |
| <input type="text" class="form-control" id="state" name="state" required> | |
| <div class="error-message" id="stateError"></div> | |
| </div> | |
| <div class="form-group"> | |
| <label class="required">Pincode</label> | |
| <input type="text" class="form-control" id="pincode" name="pincode" required> | |
| <div class="error-message" id="pincodeError"></div> | |
| </div> | |
| <div class="form-group"> | |
| <label class="required">Country</label> | |
| <select class="form-control select2" id="country" name="country" required> | |
| <option value="">Select Country</option> | |
| <option value="India" selected>India</option> | |
| <option value="USA">USA</option> | |
| <option value="UK">UK</option> | |
| <option value="Canada">Canada</option> | |
| <option value="Australia">Australia</option> | |
| </select> | |
| <div class="error-message" id="countryError"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Course & Batch Information Section --> | |
| <div class="form-section"> | |
| <div class="form-section-header"> | |
| <i class="fas fa-book mr-2"></i> Course & Batch Information | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <div class="form-group"> | |
| <label class="required">Branch</label> | |
| <select class="form-control select2" id="branch" name="branch" required> | |
| <option value="">Select Branch</option> | |
| <option value="Main Branch">Main Branch</option> | |
| <option value="North Branch">North Branch</option> | |
| <option value="South Branch">South Branch</option> | |
| <option value="East Branch">East Branch</option> | |
| <option value="West Branch">West Branch</option> | |
| </select> | |
| <div class="error-message" id="branchError"></div> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="form-group"> | |
| <label class="required">Course</label> | |
| <select class="form-control select2" id="course" name="course" required> | |
| <option value="">Select Course</option> | |
| <option value="Web Development">Web Development</option> | |
| <option value="Graphic Design">Graphic Design</option> | |
| <option value="Digital Marketing">Digital Marketing</option> | |
| <option value="Python Programming">Python Programming</option> | |
| <option value="Data Science">Data Science</option> | |
| <option value="Machine Learning">Machine Learning</option> | |
| </select> | |
| <div class="error-message" id="courseError"></div> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="form-group"> | |
| <label class="required">Batch</label> | |
| <select class="form-control select2" id="batch" name="batch" required> | |
| <option value="">Select Batch</option> | |
| <option value="Morning (9-11)">Morning (9-11)</option> | |
| <option value="Afternoon (2-4)">Afternoon (2-4)</option> | |
| <option value="Evening (5-7)">Evening (5-7)</option> | |
| <option value="Weekend (10-1)">Weekend (10-1)</option> | |
| </select> | |
| <div class="error-message" id="batchError"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <div class="form-group"> | |
| <label class="required">Joining Date</label> | |
| <div class="input-group date" id="joiningDatePicker"> | |
| <input type="text" class="form-control" id="joiningDate" name="joiningDate" required> | |
| <div class="input-group-append"> | |
| <span class="input-group-text"><i class="fas fa-calendar"></i></span> | |
| </div> | |
| </div> | |
| <div class="error-message" id="joiningDateError"></div> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="form-group"> | |
| <label class="required">Course Duration</label> | |
| <select class="form-control select2" id="courseDuration" name="courseDuration" required> | |
| <option value="">Select Duration</option> | |
| <option value="1 Month">1 Month</option> | |
| <option value="3 Months">3 Months</option> | |
| <option value="6 Months">6 Months</option> | |
| <option value="1 Year">1 Year</option> | |
| <option value="2 Years">2 Years</option> | |
| </select> | |
| <div class="error-message" id="courseDurationError"></div> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="form-group"> | |
| <label class="required">Course Fee</label> | |
| <div class="input-group"> | |
| <div class="input-group-prepend"> | |
| <span class="input-group-text">₹</span> | |
| </div> | |
| <input type="number" class="form-control" id="courseFee" name="courseFee" required> | |
| </div> | |
| <div class="error-message" id="courseFeeError"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Additional Information Section --> | |
| <div class="form-section"> | |
| <div class="form-section-header"> | |
| <i class="fas fa-info-circle mr-2"></i> Additional Information | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <div class="form-group"> | |
| <label>Qualification</label> | |
| <input type="text" class="form-control" id="qualification" name="qualification"> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="form-group"> | |
| <label>College/School</label> | |
| <input type="text" class="form-control" id="college" name="college"> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="form-group"> | |
| <label>Year of Passing</label> | |
| <input type="text" class="form-control" id="yearOfPassing" name="yearOfPassing"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <div class="form-group"> | |
| <label>How did you hear about us?</label> | |
| <select class="form-control |