Hugging Face's logo

Spaces:
valentinabmt85
/
test
Running

App Files Community
valentinabmt85 commited on
Commit
98288c5
·
verified ·
1 Parent(s): 6b55cbd

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +363 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test
3
- emoji: 😻
4
- colorFrom: yellow
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: test
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,363 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="vi">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Quản Lý Công Việc | Ví dụ về khả năng của tôi</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .task-item:hover .task-actions {
11
+ opacity: 1;
12
+ }
13
+
14
+ @keyframes fadeIn {
15
+ from { opacity: 0; transform: translateY(10px); }
16
+ to { opacity: 1; transform: translateY(0); }
17
+ }
18
+
19
+ .fade-in {
20
+ animation: fadeIn 0.3s ease-out forwards;
21
+ }
22
+
23
+ .priority-high {
24
+ border-left: 4px solid #ef4444;
25
+ }
26
+
27
+ .priority-medium {
28
+ border-left: 4px solid #f59e0b;
29
+ }
30
+
31
+ .priority-low {
32
+ border-left: 4px solid #10b981;
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="bg-gray-100 min-h-screen">
37
+ <div class="container mx-auto px-4 py-8 max-w-4xl">
38
+ <!-- Header -->
39
+ <header class="mb-8 text-center">
40
+ <h1 class="text-4xl font-bold text-indigo-700 mb-2">Quản Lý Công Việc</h1>
41
+ <p class="text-gray-600">Một ví dụ về những gì tôi có thể tạo ra với HTML, CSS và JavaScript</p>
42
+ </header>
43
+
44
+ <!-- Thống kê -->
45
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
46
+ <div class="bg-white rounded-lg shadow p-4 flex items-center">
47
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
48
+ <i class="fas fa-tasks text-indigo-600 text-xl"></i>
49
+ </div>
50
+ <div>
51
+ <p class="text-gray-500 text-sm">Tổng công việc</p>
52
+ <h3 class="text-2xl font-bold" id="total-tasks">0</h3>
53
+ </div>
54
+ </div>
55
+ <div class="bg-white rounded-lg shadow p-4 flex items-center">
56
+ <div class="bg-green-100 p-3 rounded-full mr-4">
57
+ <i class="fas fa-check-circle text-green-600 text-xl"></i>
58
+ </div>
59
+ <div>
60
+ <p class="text-gray-500 text-sm">Đã hoàn thành</p>
61
+ <h3 class="text-2xl font-bold" id="completed-tasks">0</h3>
62
+ </div>
63
+ </div>
64
+ <div class="bg-white rounded-lg shadow p-4 flex items-center">
65
+ <div class="bg-red-100 p-3 rounded-full mr-4">
66
+ <i class="fas fa-exclamation-circle text-red-600 text-xl"></i>
67
+ </div>
68
+ <div>
69
+ <p class="text-gray-500 text-sm">Cần làm</p>
70
+ <h3 class="text-2xl font-bold" id="pending-tasks">0</h3>
71
+ </div>
72
+ </div>
73
+ </div>
74
+
75
+ <!-- Form thêm công việc -->
76
+ <div class="bg-white rounded-lg shadow p-6 mb-8">
77
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Thêm công việc mới</h2>
78
+ <div class="flex flex-col md:flex-row gap-4">
79
+ <div class="flex-grow">
80
+ <input type="text" id="task-input" placeholder="Nhập công việc..."
81
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
82
+ </div>
83
+ <div class="w-full md:w-48">
84
+ <select id="priority-select" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
85
+ <option value="low">Ưu tiên thấp</option>
86
+ <option value="medium">Ưu tiên trung bình</option>
87
+ <option value="high">Ưu tiên cao</option>
88
+ </select>
89
+ </div>
90
+ <button id="add-task-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg transition duration-200 flex items-center justify-center">
91
+ <i class="fas fa-plus mr-2"></i> Thêm
92
+ </button>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- Bộ lọc và tìm kiếm -->
97
+ <div class="flex flex-col md:flex-row justify-between items-center mb-6">
98
+ <div class="flex space-x-2 mb-4 md:mb-0">
99
+ <button class="filter-btn px-4 py-1 rounded-full bg-indigo-600 text-white" data-filter="all">Tất cả</button>
100
+ <button class="filter-btn px-4 py-1 rounded-full bg-gray-200 hover:bg-gray-300" data-filter="pending">Cần làm</button>
101
+ <button class="filter-btn px-4 py-1 rounded-full bg-gray-200 hover:bg-gray-300" data-filter="completed">Hoàn thành</button>
102
+ </div>
103
+ <div class="relative w-full md:w-64">
104
+ <input type="text" id="search-input" placeholder="Tìm kiếm..."
105
+ class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
106
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Danh sách công việc -->
111
+ <div class="bg-white rounded-lg shadow overflow-hidden">
112
+ <ul id="task-list" class="divide-y divide-gray-200">
113
+ <!-- Các công việc sẽ được thêm vào đây bằng JavaScript -->
114
+ <li class="p-4 text-center text-gray-500">Chưa có công việc nào. Hãy thêm công việc đầu tiên!</li>
115
+ </ul>
116
+ </div>
117
+ </div>
118
+
119
+ <script>
120
+ document.addEventListener('DOMContentLoaded', function() {
121
+ // Biến lưu trữ danh sách công việc
122
+ let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
123
+ let currentFilter = 'all';
124
+ let currentSearch = '';
125
+
126
+ // Các phần tử DOM
127
+ const taskInput = document.getElementById('task-input');
128
+ const prioritySelect = document.getElementById('priority-select');
129
+ const addTaskBtn = document.getElementById('add-task-btn');
130
+ const taskList = document.getElementById('task-list');
131
+ const filterButtons = document.querySelectorAll('.filter-btn');
132
+ const searchInput = document.getElementById('search-input');
133
+ const totalTasksEl = document.getElementById('total-tasks');
134
+ const completedTasksEl = document.getElementById('completed-tasks');
135
+ const pendingTasksEl = document.getElementById('pending-tasks');
136
+
137
+ // Hiển thị danh sách công việc ban đầu
138
+ renderTasks();
139
+ updateStats();
140
+
141
+ // Thêm công việc mới
142
+ addTaskBtn.addEventListener('click', addTask);
143
+ taskInput.addEventListener('keypress', function(e) {
144
+ if (e.key === 'Enter') addTask();
145
+ });
146
+
147
+ // Bộ lọc công việc
148
+ filterButtons.forEach(button => {
149
+ button.addEventListener('click', function() {
150
+ filterButtons.forEach(btn => {
151
+ btn.classList.remove('bg-indigo-600', 'text-white');
152
+ btn.classList.add('bg-gray-200', 'hover:bg-gray-300');
153
+ });
154
+
155
+ this.classList.remove('bg-gray-200', 'hover:bg-gray-300');
156
+ this.classList.add('bg-indigo-600', 'text-white');
157
+
158
+ currentFilter = this.dataset.filter;
159
+ renderTasks();
160
+ });
161
+ });
162
+
163
+ // Tìm kiếm công việc
164
+ searchInput.addEventListener('input', function() {
165
+ currentSearch = this.value.toLowerCase();
166
+ renderTasks();
167
+ });
168
+
169
+ // Hàm thêm công việc
170
+ function addTask() {
171
+ const taskText = taskInput.value.trim();
172
+ if (!taskText) return;
173
+
174
+ const newTask = {
175
+ id: Date.now(),
176
+ text: taskText,
177
+ priority: prioritySelect.value,
178
+ completed: false,
179
+ createdAt: new Date().toISOString()
180
+ };
181
+
182
+ tasks.unshift(newTask);
183
+ saveTasks();
184
+ taskInput.value = '';
185
+ renderTasks();
186
+ updateStats();
187
+
188
+ // Hiệu ứng thêm mới
189
+ const taskElements = document.querySelectorAll('.task-item');
190
+ if (taskElements.length > 0) {
191
+ taskElements[0].classList.add('fade-in');
192
+ }
193
+ }
194
+
195
+ // Hàm hiển thị danh sách công việc
196
+ function renderTasks() {
197
+ // Lọc công việc theo bộ lọc và tìm kiếm
198
+ let filteredTasks = tasks.filter(task => {
199
+ const matchesFilter = currentFilter === 'all' ||
200
+ (currentFilter === 'completed' && task.completed) ||
201
+ (currentFilter === 'pending' && !task.completed);
202
+
203
+ const matchesSearch = task.text.toLowerCase().includes(currentSearch);
204
+
205
+ return matchesFilter && matchesSearch;
206
+ });
207
+
208
+ if (filteredTasks.length === 0) {
209
+ taskList.innerHTML = '<li class="p-4 text-center text-gray-500">Không tìm thấy công việc nào phù hợp</li>';
210
+ return;
211
+ }
212
+
213
+ taskList.innerHTML = '';
214
+
215
+ filteredTasks.forEach(task => {
216
+ const taskElement = document.createElement('li');
217
+ taskElement.className = `task-item p-4 hover:bg-gray-50 transition duration-150 ease-in-out priority-${task.priority}`;
218
+ taskElement.dataset.id = task.id;
219
+
220
+ taskElement.innerHTML = `
221
+ <div class="flex items-center">
222
+ <div class="flex items-center mr-4">
223
+ <input type="checkbox" ${task.completed ? 'checked' : ''}
224
+ class="complete-checkbox w-5 h-5 text-indigo-600 rounded focus:ring-indigo-500">
225
+ </div>
226
+ <div class="flex-grow">
227
+ <p class="${task.completed ? 'line-through text-gray-400' : 'text-gray-800'}">${task.text}</p>
228
+ <div class="flex items-center mt-1 text-sm text-gray-500">
229
+ <span class="priority-badge mr-2 ${getPriorityBadgeClass(task.priority)}">
230
+ ${getPriorityText(task.priority)}
231
+ </span>
232
+ <span>${formatDate(task.createdAt)}</span>
233
+ </div>
234
+ </div>
235
+ <div class="task-actions opacity-0 transition-opacity duration-200 flex space-x-2">
236
+ <button class="edit-btn p-1 text-gray-400 hover:text-indigo-600">
237
+ <i class="fas fa-edit"></i>
238
+ </button>
239
+ <button class="delete-btn p-1 text-gray-400 hover:text-red-600">
240
+ <i class="fas fa-trash"></i>
241
+ </button>
242
+ </div>
243
+ </div>
244
+ `;
245
+
246
+ taskList.appendChild(taskElement);
247
+
248
+ // Thêm sự kiện cho các nút
249
+ const completeCheckbox = taskElement.querySelector('.complete-checkbox');
250
+ const editBtn = taskElement.querySelector('.edit-btn');
251
+ const deleteBtn = taskElement.querySelector('.delete-btn');
252
+
253
+ completeCheckbox.addEventListener('change', function() {
254
+ toggleTaskComplete(task.id, this.checked);
255
+ });
256
+
257
+ editBtn.addEventListener('click', function() {
258
+ editTask(task.id);
259
+ });
260
+
261
+ deleteBtn.addEventListener('click', function() {
262
+ deleteTask(task.id);
263
+ });
264
+ });
265
+ }
266
+
267
+ // Hàm chuyển đổi trạng thái hoàn thành
268
+ function toggleTaskComplete(id, completed) {
269
+ const taskIndex = tasks.findIndex(task => task.id === id);
270
+ if (taskIndex !== -1) {
271
+ tasks[taskIndex].completed = completed;
272
+ saveTasks();
273
+ updateStats();
274
+
275
+ // Cập nhật giao diện
276
+ const taskElement = document.querySelector(`.task-item[data-id="${id}"]`);
277
+ if (taskElement) {
278
+ const taskText = taskElement.querySelector('p');
279
+ if (completed) {
280
+ taskText.classList.add('line-through', 'text-gray-400');
281
+ taskText.classList.remove('text-gray-800');
282
+ } else {
283
+ taskText.classList.remove('line-through', 'text-gray-400');
284
+ taskText.classList.add('text-gray-800');
285
+ }
286
+ }
287
+ }
288
+ }
289
+
290
+ // Hàm chỉnh sửa công việc
291
+ function editTask(id) {
292
+ const task = tasks.find(task => task.id === id);
293
+ if (!task) return;
294
+
295
+ const newText = prompt('Chỉnh sửa công việc:', task.text);
296
+ if (newText !== null && newText.trim() !== '') {
297
+ task.text = newText.trim();
298
+ saveTasks();
299
+ renderTasks();
300
+ }
301
+ }
302
+
303
+ // Hàm xóa công việc
304
+ function deleteTask(id) {
305
+ if (confirm('Bạn có chắc chắn muốn xóa công việc này?')) {
306
+ tasks = tasks.filter(task => task.id !== id);
307
+ saveTasks();
308
+ renderTasks();
309
+ updateStats();
310
+ }
311
+ }
312
+
313
+ // Hàm lưu công việc vào localStorage
314
+ function saveTasks() {
315
+ localStorage.setItem('tasks', JSON.stringify(tasks));
316
+ }
317
+
318
+ // Hàm cập nhật thống kê
319
+ function updateStats() {
320
+ const total = tasks.length;
321
+ const completed = tasks.filter(task => task.completed).length;
322
+ const pending = total - completed;
323
+
324
+ totalTasksEl.textContent = total;
325
+ completedTasksEl.textContent = completed;
326
+ pendingTasksEl.textContent = pending;
327
+ }
328
+
329
+ // Hàm trợ giúp - lấy văn bản ưu tiên
330
+ function getPriorityText(priority) {
331
+ switch(priority) {
332
+ case 'high': return 'Ưu tiên cao';
333
+ case 'medium': return 'Ưu tiên trung bình';
334
+ case 'low': return 'Ưu tiên thấp';
335
+ default: return '';
336
+ }
337
+ }
338
+
339
+ // Hàm trợ giúp - lấy class badge ưu tiên
340
+ function getPriorityBadgeClass(priority) {
341
+ switch(priority) {
342
+ case 'high': return 'bg-red-100 text-red-800 px-2 py-0.5 rounded-full text-xs';
343
+ case 'medium': return 'bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded-full text-xs';
344
+ case 'low': return 'bg-green-100 text-green-800 px-2 py-0.5 rounded-full text-xs';
345
+ default: return '';
346
+ }
347
+ }
348
+
349
+ // Hàm định dạng ngày tháng
350
+ function formatDate(isoString) {
351
+ const date = new Date(isoString);
352
+ return date.toLocaleDateString('vi-VN', {
353
+ day: '2-digit',
354
+ month: '2-digit',
355
+ year: 'numeric',
356
+ hour: '2-digit',
357
+ minute: '2-digit'
358
+ });
359
+ }
360
+ });
361
+ </script>
362
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=valentinabmt85/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
363
+ </html>