Schedule & Task Manager
Thời khoá biểu học kỳ
<table class="timetable">
<thead>
<tr>
<th style="width: 80px;">Tiết</th>
<th>Thứ 2</th>
<th>Thứ 3</th>
<th>Thứ 4</th>
<th>Thứ 5</th>
<th>Thứ 6</th>
<th>Thứ 7</th>
</tr>
</thead>
<tbody id="timetableBody">
<!-- Generated by JS -->
</tbody>
</table>
<div style="margin-top: 30px;">
<h3>Thêm môn học</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; background: var(--md-code-bg-color); padding: 20px; border-radius: 6px;">
<input type="text" id="className" placeholder="Tên môn học" style="padding: 10px; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px; background: var(--md-default-bg-color); color: var(--md-default-fg-color);">
<input type="text" id="classRoom" placeholder="Phòng học" style="padding: 10px; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px; background: var(--md-default-bg-color); color: var(--md-default-fg-color);">
<select id="classDay" style="padding: 10px; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px; background: var(--md-default-bg-color); color: var(--md-default-fg-color);">
<option value="1">Thứ 2</option>
<option value="2">Thứ 3</option>
<option value="3">Thứ 4</option>
<option value="4">Thứ 5</option>
<option value="5">Thứ 6</option>
<option value="6">Thứ 7</option>
</select>
<input type="number" id="classPeriod" placeholder="Tiết (1-12)" min="1" max="12" style="padding: 10px; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px; background: var(--md-default-bg-color); color: var(--md-default-fg-color);">
<button onclick="addClass()" style="padding: 10px 20px; border: none; border-radius: 4px; background: var(--md-primary-fg-color); color: white; cursor: pointer; font-weight: 600;">Thêm</button>
</div>
</div>
Task Management
<div class="stats-grid">
<div class="stat-card">
<div class="stat-number" id="totalTasks">0</div>
<div class="stat-label">Total Tasks</div>
</div>
<div class="stat-card">
<div class="stat-number" id="pendingTasks">0</div>
<div class="stat-label">Pending</div>
</div>
<div class="stat-card">
<div class="stat-number" id="completedTasks">0</div>
<div class="stat-label">Completed</div>
</div>
<div class="stat-card">
<div class="stat-number" id="highPriorityTasks">0</div>
<div class="stat-label">High Priority</div>
</div>
</div>
<div class="filter-bar">
<button class="filter-btn active" onclick="filterTasks('all')">All</button>
<button class="filter-btn" onclick="filterTasks('pending')">Pending</button>
<button class="filter-btn" onclick="filterTasks('completed')">Completed</button>
<button class="filter-btn" onclick="filterTasks('high')">High Priority</button>
</div>
<div class="task-section">
<div class="task-list" id="taskList">
<!-- Tasks will be generated here -->
</div>
<div class="task-input">
<h3>Add New Task</h3>
<input type="text" id="taskTitle" placeholder="Task title">
<textarea id="taskDesc" placeholder="Description (optional)"></textarea>
<select id="taskPriority">
<option value="low">Low Priority</option>
<option value="medium">Medium Priority</option>
<option value="high">High Priority</option>
</select>
<input type="date" id="taskDeadline">
<button class="add-task-btn" onclick="addTask()">Add Task</button>
</div>
</div>