Huy Văn

Lecturer Management Dashboard - Copy this Html, Bootstrap Component to your project

<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Quản lý Bài tập - TDTU</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet"> <link href="../css/index.css" rel="stylesheet"> </head> <body>  <nav class="navbar navbar-expand-lg navbar-dark bg-gradient"> <div class="container-fluid"> <a class="navbar-brand d-flex align-items-center" href="#"> <img src="../images/logo_2.png" class="rounded-circle me-2" width="40" height="40" alt="TDTU Logo"> <span class="fw-bold" style="color: black;">TDTU | Quản lý Bài tập</span> </a> <div class="d-flex gap-3"> <button class="btn btn-light btn-hover-effect"><i class="bi bi-bell-fill me-2"></i>Thông báo <span class="badge bg-danger">3</span></button> <button class="btn btn-light btn-hover-effect" onclick="logout()"><i class="bi bi-box-arrow-right me-2"></i>Đăng xuất</button> </div> </div> </nav>  <div class="container mt-4"> <div class="row mb-4"> <div class="col-md-3"> <div class="stat-card bg-primary text-white"> <i class="bi bi-journal-text stat-icon"></i> <h3>25</h3> <p>Tổng bài tập</p> </div> </div> <div class="col-md-3"> <div class="stat-card bg-success text-white"> <i class="bi bi-check-circle stat-icon"></i> <h3>15</h3> <p>Đã nộp</p> </div> </div> <div class="col-md-3"> <div class="stat-card bg-warning text-white"> <i class="bi bi-clock stat-icon"></i> <h3>8</h3> <p>Đang chờ</p> </div> </div> <div class="col-md-3"> <div class="stat-card bg-info text-white"> <i class="bi bi-person-check stat-icon"></i> <h3>42</h3> <p>Học sinh</p> </div> </div> </div>  <div class="row mb-4"> <div class="col-12"> <div class="card custom-card"> <div class="card-header d-flex justify-content-between align-items-center bg-white"> <h5 class="mb-0 fw-bold"><i class="bi bi-list-task me-2"></i>Quản lý Bài tập</h5> <button class="btn btn-primary btn-hover-effect" data-bs-toggle="modal" data-bs-target="#newAssignmentModal"> <i class="bi bi-plus-circle me-2"></i>Tạo bài tập mới </button> </div> <div class="card-body">  <div class="row mb-4"> <div class="col-md-4"> <div class="input-group"> <span class="input-group-text"><i class="bi bi-search"></i></span> <input type="text" class="form-control" placeholder="Tìm kiếm bài tập..."> </div> </div> <div class="col-md-3"> <select class="form-select"> <option>Tất cả lớp</option> <option>22CNTT1</option> <option>22CNTT2</option> </select> </div> <div class="col-md-3"> <select class="form-select"> <option>Tất cả trạng thái</option> <option>Đang mở</option> <option>Đã đóng</option> </select> </div> </div> <div class="table-responsive custom-table"> <table class="table table-hover align-middle"> <thead> <tr> <th>Tên bài tập</th> <th>Lớp</th> <th>Hạn nộp</th> <th>Trạng thái</th> <th>Đã nộp</th> <th>Thao tác</th> </tr> </thead> <tbody>  <tr> <td class="fw-medium">BT1: Phân tích yêu cầu</td> <td><span class="badge bg-secondary">22CNTT1</span></td> <td><i class="bi bi-calendar-event me-1"></i>15/04/2025</td> <td><span class="badge bg-success">Đang mở</span></td> <td> <div class="progress" style="height: 8px;"> <div class="progress-bar" role="progressbar" style="width: 42%;"></div> </div> <small class="text-muted">15/35</small> </td> <td> <div class="btn-group"> <button class="btn btn-sm btn-outline-primary"><i class="bi bi-eye me-1"></i>Chi tiết</button> <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash me-1"></i>Xóa</button> </div> </td> </tr>  <tr> <td class="fw-medium">BT2: Thiết kế database</td> <td><span class="badge bg-secondary">22CNTT2</span></td> <td><i class="bi bi-calendar-event me-1"></i>22/04/2025</td> <td><span class="badge bg-success">Đang mở</span></td> <td> <div class="progress" style="height: 8px;"> <div class="progress-bar" role="progressbar" style="width: 65%;"></div> </div> <small class="text-muted">26/40</small> </td> <td> <div class="btn-group"> <button class="btn btn-sm btn-outline-primary"><i class="bi bi-eye me-1"></i>Chi tiết</button> <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash me-1"></i>Xóa</button> </div> </td> </tr>  <tr> <td class="fw-medium">BT3: Triển khai API</td> <td><span class="badge bg-secondary">22CNTT1</span></td> <td><i class="bi bi-calendar-event me-1"></i>29/04/2025</td> <td><span class="badge bg-success">Đang mở</span></td> <td> <div class="progress" style="height: 8px;"> <div class="progress-bar" role="progressbar" style="width: 100%;"></div> </div> <small class="text-muted">30/30</small> </td> <td> <div class="btn-group"> <button class="btn btn-sm btn-outline-primary"><i class="bi bi-eye me-1"></i>Chi tiết</button> <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash me-1"></i>Xóa</button> </div> </td> </tr>  <tr> <td class="fw-medium">BT4: Unit testing</td> <td><span class="badge bg-secondary">22CNTT2</span></td> <td><i class="bi bi-calendar-event me-1"></i>06/05/2025</td> <td><span class="badge bg-success">Đang mở</span></td> <td> <div class="progress" style="height: 8px;"> <div class="progress-bar" role="progressbar" style="width: 28%;"></div> </div> <small class="text-muted">7/25</small> </td> <td> <div class="btn-group"> <button class="btn btn-sm btn-outline-primary"><i class="bi bi-eye me-1"></i>Chi tiết</button> <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash me-1"></i>Xóa</button> </div> </td> </tr>  <tr> <td class="fw-medium">BT5: Review code</td> <td><span class="badge bg-secondary">22CNTT1</span></td> <td><i class="bi bi-calendar-event me-1"></i>13/05/2025</td> <td><span class="badge bg-success">Đang mở</span></td> <td> <div class="progress" style="height: 8px;"> <div class="progress-bar" role="progressbar" style="width: 75%;"></div> </div> <small class="text-muted">15/20</small> </td> <td> <div class="btn-group"> <button class="btn btn-sm btn-outline-primary"><i class="bi bi-eye me-1"></i>Chi tiết</button> <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash me-1"></i>Xóa</button> </div> </td> </tr>  <tr> <td class="fw-medium">BT6: Deploy hệ thống</td> <td><span class="badge bg-secondary">22CNTT2</span></td> <td><i class="bi bi-calendar-event me-1"></i>20/05/2025</td> <td><span class="badge bg-success">Đang mở</span></td> <td> <div class="progress" style="height: 8px;"> <div class="progress-bar" role="progressbar" style="width: 10%;"></div> </div> <small class="text-muted">2/20</small> </td> <td> <div class="btn-group"> <button class="btn btn-sm btn-outline-primary"><i class="bi bi-eye me-1"></i>Chi tiết</button> <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash me-1"></i>Xóa</button> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div>  <div class="modal fade" id="newAssignmentModal" tabindex="-1"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header bg-light"> <h5 class="modal-title"><i class="bi bi-plus-circle me-2"></i>Tạo bài tập mới</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <form id="assignmentForm"> <div class="mb-3"> <label class="form-label fw-medium">Tên bài tập</label> <input type="text" class="form-control" required> </div> <div class="mb-3"> <label class="form-label fw-medium">Chọn lớp</label> <select class="form-select" required> <option value="22CNTT1">22CNTT1</option> <option value="22CNTT2">22CNTT2</option> </select> </div> <div class="mb-3"> <label class="form-label fw-medium">Mô tả bài tập</label> <textarea class="form-control" rows="4" required></textarea> </div> <div class="row"> <div class="col-md-6 mb-3"> <label class="form-label fw-medium">Ngày bắt đầu</label> <div class="input-group"> <span class="input-group-text"><i class="bi bi-calendar"></i></span> <input type="datetime-local" class="form-control" required> </div> </div> <div class="col-md-6 mb-3"> <label class="form-label fw-medium">Hạn nộp</label> <div class="input-group"> <span class="input-group-text"><i class="bi bi-calendar"></i></span> <input type="datetime-local" class="form-control" required> </div> </div> </div> <div class="mb-3"> <label class="form-label fw-medium">Tài liệu đính kèm</label> <div class="input-group"> <span class="input-group-text"><i class="bi bi-paperclip"></i></span> <input type="file" class="form-control" multiple> </div> </div> </form> </div> <div class="modal-footer bg-light"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="bi bi-x-circle me-2"></i>Hủy</button> <button type="submit" form="assignmentForm" class="btn btn-primary"><i class="bi bi-check-circle me-2"></i>Tạo bài tập</button> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html> thiết kế lại code này đẹp hơn

Prompt

About

Lecturer Management Dashboard - manage assignments, view schedules, and track submissions with user-friendly stats and search features. Download code free!

Lecturer Management Dashboard - Copy this Html, Bootstrap Component to your project

About

Tags

Share