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"> | |
| <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; | |
| } | |
| .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: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; | |
| } | |
| .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; | |
| } | |
| .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: 600px; | |
| 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; | |
| } | |
| .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; | |
| } | |
| .tab { | |
| padding: 1rem 1.5rem; | |
| cursor: pointer; | |
| border: none; | |
| background: none; | |
| font-size: 1rem; | |
| color: #7f8c8d; | |
| transition: var(--transition); | |
| } | |
| .tab.active { | |
| color: var(--primary-color); | |
| border-bottom: 2px solid var(--primary-color); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| /* Charts */ | |
| .chart-container { | |
| height: 300px; | |
| width: 100%; | |
| } | |
| /* 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; | |
| } | |
| } | |
| /* 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; } | |
| /* 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; | |
| } | |
| </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"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li> | |
| <li><a href="#"><i class="fas fa-users"></i> Students</a></li> | |
| <li><a href="#"><i class="fas fa-book"></i> Courses</a></li> | |
| <li><a href="#"><i class="fas fa-calendar-alt"></i> Batches</a></li> | |
| <li><a href="#"><i class="fas fa-check-square"></i> Attendance</a></li> | |
| <li><a href="#"><i class="fas fa-money-bill-wave"></i> Fees</a></li> | |
| <li><a href="#"><i class="fas fa-clipboard-list"></i> Exams</a></li> | |
| <li><a href="#"><i class="fas fa-certificate"></i> Certificates</a></li> | |
| <li><a href="#"><i class="fas fa-id-card"></i> ID Cards</a></li> | |
| <li><a href="#"><i class="fas fa-building"></i> Branches</a></li> | |
| <li><a href="#"><i class="fas fa-cogs"></i> Settings</a></li> | |
| <li><a href="#"><i class="fas fa-sign-out-alt"></i> Logout</a></li> | |
| </ul> | |
| </div> | |
| <div class="main-content"> | |
| <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>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>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>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>₹5,25,000</h3> | |
| <p>Total Fees Collected</p> | |
| </div> | |
| </div> | |
| </div> | |
| <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> | |
| <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" 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" 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" style="height: 100px; background-color: var(--info-color);"> | |
| <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;"> | |
| <i class="fas fa-certificate" style="font-size: 2rem; margin-bottom: 0.5rem; display: block;"></i> | |
| Generate Certificates | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Modal for adding student --> | |
| <div class="modal" id="addStudentModal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2 class="modal-title">Add New Student</h2> | |
| <button class="modal-close" id="closeStudentModal">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <form id="studentForm"> | |
| <div class="form-group"> | |
| <label for="studentName">Full Name</label> | |
| <input type="text" id="studentName" class="form-control" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="fatherName">Father's Name</label> | |
| <input type="text" id="fatherName" class="form-control" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="dob">Date of Birth</label> | |
| <input type="date" id="dob" class="form-control" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="mobile">Mobile Number</label> | |
| <input type="tel" id="mobile" class="form-control" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="course">Course</label> | |
| <select id="course" class="select-control" required> | |
| <option value="">Select Course</option> | |
| <option value="web-dev">Web Development</option> | |
| <option value="graphic-design">Graphic Design</option> | |
| <option value="digital-marketing">Digital Marketing</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="batch">Batch</label> | |
| <select id="batch" class="select-control" required> | |
| <option value="">Select Batch</option> | |
| <option value="morning">Morning (9AM-12PM)</option> | |
| <option value="evening">Evening (4PM-7PM)</option> | |
| </select> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" id="cancelStudent">Cancel</button> | |
| <button type="button" class="btn btn-primary" id="saveStudent">Save Student</button> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank">Built with anycoder</a> | |
| <script> | |
| // Sidebar toggle | |
| document.getElementById('toggleSidebar').addEventListener('click', function() { | |
| document.getElementById('sidebar').classList.toggle('active'); | |
| }); | |
| // Modal functionality | |
| const addStudentModal = document.getElementById('addStudentModal'); | |
| const closeStudentModal = document.getElementById('closeStudentModal'); | |
| const cancelStudent = document.getElementById('cancelStudent'); | |
| const saveStudent = document.getElementById('saveStudent'); | |
| // Open modal when "Add Student" button is clicked | |
| document.querySelector('.btn-primary[style*="Add Student"]').addEventListener('click', function() { | |
| addStudentModal.classList.add('active'); | |
| }); | |
| // Close modal functions | |
| closeStudentModal.addEventListener('click', function() { | |
| addStudentModal.classList.remove('active'); | |
| }); | |
| cancelStudent.addEventListener('click', function() { | |
| addStudentModal.classList.remove('active'); | |
| }); | |
| // Save student (simulated) | |
| saveStudent.addEventListener('click', function() { | |
| const studentName = document.getElementById('studentName').value; | |
| const fatherName = document.getElementById('fatherName').value; | |
| const dob = document.getElementById('dob').value; | |
| const mobile = document.getElementById('mobile').value; | |
| const course = document.getElementById('course').value; | |
| const batch = document.getElementById('batch').value; | |
| if (!studentName || !fatherName || !dob || !mobile || !course || !batch) { | |
| alert('Please fill all fields'); | |
| return; | |
| } | |
| // In a real app, this would send data to the server | |
| console.log('Student saved:', { | |
| studentName, | |
| fatherName, | |
| dob, | |
| mobile, | |
| course, | |
| batch | |
| }); | |
| alert('Student added successfully!'); | |
| addStudentModal.classList.remove('active'); | |
| document.getElementById('studentForm').reset(); | |
| }); | |
| // Close modal when clicking outside | |
| addStudentModal.addEventListener('click', function(e) { | |
| if (e.target === addStudentModal) { | |
| addStudentModal.classList.remove('active'); | |
| } | |
| }); | |
| // Tab functionality (example) | |
| document.querySelectorAll('.tab').forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| // Remove active class from all tabs and content | |
| document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); | |
| document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active')); | |
| // Add active class to clicked tab | |
| this.classList.add('active'); | |
| // Show corresponding content | |
| const tabId = this.getAttribute('data-tab'); | |
| document.getElementById(tabId).classList.add('active'); | |
| }); | |
| }); | |
| // Initialize first tab as active | |
| if (document.querySelector('.tab')) { | |
| document.querySelector('.tab').classList.add('active'); | |
| const firstTabId = document.querySelector('.tab').getAttribute('data-tab'); | |
| if (firstTabId) { | |
| document.getElementById(firstTabId).classList.add('active'); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |