Hugging Face's logo

Spaces:
AliDu14
/
work-time
Running

App Files Community
AliDu14 commited on
Commit
512e8e4
·
verified ·
1 Parent(s): 1b7ac1e

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +485 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Work Time
3
- emoji: 📚
4
- colorFrom: green
5
  colorTo: red
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: work-time
3
+ emoji: 🐳
4
+ colorFrom: red
5
  colorTo: red
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,485 @@
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="ru">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Учет рабочего времени</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
+ .progress-bar {
11
+ height: 8px;
12
+ border-radius: 4px;
13
+ background-color: #e5e7eb;
14
+ overflow: hidden;
15
+ }
16
+
17
+ .progress-fill {
18
+ height: 100%;
19
+ border-radius: 4px;
20
+ background-color: #3b82f6;
21
+ transition: width 0.3s ease;
22
+ }
23
+
24
+ .floating-btn {
25
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
26
+ transition: all 0.3s ease;
27
+ }
28
+
29
+ .floating-btn:hover {
30
+ transform: translateY(-2px);
31
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
32
+ }
33
+
34
+ .floating-btn:active {
35
+ transform: translateY(0);
36
+ }
37
+
38
+ .pulse {
39
+ animation: pulse 2s infinite;
40
+ }
41
+
42
+ @keyframes pulse {
43
+ 0% {
44
+ box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
45
+ }
46
+ 70% {
47
+ box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
48
+ }
49
+ 100% {
50
+ box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
51
+ }
52
+ }
53
+
54
+ .fade-in {
55
+ animation: fadeIn 0.5s ease-in;
56
+ }
57
+
58
+ @keyframes fadeIn {
59
+ from { opacity: 0; transform: translateY(10px); }
60
+ to { opacity: 1; transform: translateY(0); }
61
+ }
62
+ </style>
63
+ </head>
64
+ <body class="bg-gray-50 min-h-screen">
65
+ <div class="container mx-auto px-4 py-8 max-w-3xl">
66
+ <header class="text-center mb-8">
67
+ <h1 class="text-3xl font-bold text-gray-800 mb-2">Учет рабочего времени</h1>
68
+ <p class="text-gray-600">Отслеживайте свои рабочие часы и дни</p>
69
+ </header>
70
+
71
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
72
+ <div class="flex justify-between items-center mb-6">
73
+ <div>
74
+ <h2 class="text-xl font-semibold text-gray-800">Текущий статус</h2>
75
+ <p class="text-gray-500 text-sm" id="current-date">Сегодня: </p>
76
+ </div>
77
+ <div class="bg-blue-50 text-blue-800 px-4 py-2 rounded-lg">
78
+ <span class="font-medium" id="current-status">Не начат</span>
79
+ </div>
80
+ </div>
81
+
82
+ <div class="grid grid-cols-2 gap-4 mb-6">
83
+ <button id="start-btn" class="floating-btn pulse bg-green-500 hover:bg-green-600 text-white py-4 px-6 rounded-lg font-medium flex items-center justify-center">
84
+ <i class="fas fa-play mr-2"></i> Начало дня
85
+ </button>
86
+ <button id="end-btn" class="floating-btn bg-red-500 hover:bg-red-600 text-white py-4 px-6 rounded-lg font-medium flex items-center justify-center" disabled>
87
+ <i class="fas fa-stop mr-2"></i> Конец дня
88
+ </button>
89
+ </div>
90
+
91
+ <div class="mb-6">
92
+ <div class="flex justify-between mb-2">
93
+ <span class="text-sm font-medium text-gray-700">Прогресс рабочего дня</span>
94
+ <span class="text-sm font-medium text-gray-700" id="work-progress">0%</span>
95
+ </div>
96
+ <div class="progress-bar">
97
+ <div class="progress-fill" id="progress-fill" style="width: 0%"></div>
98
+ </div>
99
+ </div>
100
+
101
+ <div class="grid grid-cols-3 gap-4 text-center">
102
+ <div class="bg-gray-50 p-4 rounded-lg">
103
+ <p class="text-sm text-gray-500">Отработано сегодня</p>
104
+ <p class="text-2xl font-bold text-gray-800" id="today-hours">0 ч</p>
105
+ </div>
106
+ <div class="bg-gray-50 p-4 rounded-lg">
107
+ <p class="text-sm text-gray-500">Отработано дней</p>
108
+ <p class="text-2xl font-bold text-gray-800" id="worked-days">0</p>
109
+ </div>
110
+ <div class="bg-gray-50 p-4 rounded-lg">
111
+ <p class="text-sm text-gray-500">Всего часов</p>
112
+ <p class="text-2xl font-bold text-gray-800" id="total-hours">0 ч</p>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
118
+ <div class="flex justify-between items-center mb-4">
119
+ <h2 class="text-xl font-semibold text-gray-800">Статистика за месяц</h2>
120
+ <div class="flex items-center">
121
+ <button id="prev-month" class="p-2 rounded-full hover:bg-gray-100">
122
+ <i class="fas fa-chevron-left text-gray-600"></i>
123
+ </button>
124
+ <span class="mx-4 font-medium" id="current-month">Июнь 2023</span>
125
+ <button id="next-month" class="p-2 rounded-full hover:bg-gray-100">
126
+ <i class="fas fa-chevron-right text-gray-600"></i>
127
+ </button>
128
+ </div>
129
+ </div>
130
+
131
+ <div class="overflow-x-auto">
132
+ <table class="min-w-full divide-y divide-gray-200">
133
+ <thead class="bg-gray-50">
134
+ <tr>
135
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Дата</th>
136
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Начало</th>
137
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Конец</th>
138
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Часы</th>
139
+ </tr>
140
+ </thead>
141
+ <tbody class="bg-white divide-y divide-gray-200" id="month-table-body">
142
+ <!-- Данные будут добавляться сюда -->
143
+ </tbody>
144
+ </table>
145
+ </div>
146
+
147
+ <div class="mt-4 text-right">
148
+ <p class="text-sm text-gray-500">Итого за месяц:</p>
149
+ <p class="text-lg font-semibold" id="month-total">0 рабочих дней, 0 часов</p>
150
+ </div>
151
+ </div>
152
+
153
+ <div class="bg-white rounded-xl shadow-md p-6">
154
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">История</h2>
155
+ <div class="space-y-4" id="history-list">
156
+ <!-- История будет добавляться сюда -->
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+ <script>
162
+ document.addEventListener('DOMContentLoaded', function() {
163
+ // Инициализация хранилища
164
+ if (!localStorage.getItem('workTimeTracker')) {
165
+ localStorage.setItem('workTimeTracker', JSON.stringify({
166
+ currentSession: null,
167
+ workDays: {},
168
+ monthlyStats: {}
169
+ }));
170
+ }
171
+
172
+ const appData = JSON.parse(localStorage.getItem('workTimeTracker'));
173
+
174
+ // Элементы интерфейса
175
+ const startBtn = document.getElementById('start-btn');
176
+ const endBtn = document.getElementById('end-btn');
177
+ const currentStatus = document.getElementById('current-status');
178
+ const todayHours = document.getElementById('today-hours');
179
+ const workedDays = document.getElementById('worked-days');
180
+ const totalHours = document.getElementById('total-hours');
181
+ const progressFill = document.getElementById('progress-fill');
182
+ const workProgress = document.getElementById('work-progress');
183
+ const currentDate = document.getElementById('current-date');
184
+ const currentMonth = document.getElementById('current-month');
185
+ const monthTableBody = document.getElementById('month-table-body');
186
+ const monthTotal = document.getElementById('month-total');
187
+ const historyList = document.getElementById('history-list');
188
+ const prevMonthBtn = document.getElementById('prev-month');
189
+ const nextMonthBtn = document.getElementById('next-month');
190
+
191
+ // Текущая дата и время
192
+ const now = new Date();
193
+ const today = formatDate(now);
194
+ currentDate.textContent = `Сегодня: ${formatDate(now, true)}`;
195
+
196
+ // Текущий месяц для статистики
197
+ let currentMonthView = new Date(now.getFullYear(), now.getMonth(), 1);
198
+ updateMonthView();
199
+
200
+ // Проверка активной сессии
201
+ if (appData.currentSession) {
202
+ const sessionStart = new Date(appData.currentSession.startTime);
203
+ if (formatDate(sessionStart) === today) {
204
+ // Сегодняшняя сессия активна
205
+ startBtn.disabled = true;
206
+ endBtn.disabled = false;
207
+ currentStatus.textContent = 'Работаю';
208
+ document.getElementById('start-btn').classList.remove('pulse');
209
+
210
+ // Обновление таймера
211
+ updateTimer();
212
+ const timerInterval = setInterval(updateTimer, 1000);
213
+
214
+ endBtn.addEventListener('click', function() {
215
+ clearInterval(timerInterval);
216
+ endWorkSession();
217
+ });
218
+ } else {
219
+ // Сессия из прошлого дня - завершаем ее
220
+ endWorkSession(appData.currentSession.startTime, new Date(appData.currentSession.startTime).setHours(23, 59, 59, 999));
221
+ }
222
+ }
223
+
224
+ // Обработчики кнопок
225
+ startBtn.addEventListener('click', startWorkSession);
226
+
227
+ // Навигация по месяцам
228
+ prevMonthBtn.addEventListener('click', function() {
229
+ currentMonthView.setMonth(currentMonthView.getMonth() - 1);
230
+ updateMonthView();
231
+ });
232
+
233
+ nextMonthBtn.addEventListener('click', function() {
234
+ currentMonthView.setMonth(currentMonthView.getMonth() + 1);
235
+ updateMonthView();
236
+ });
237
+
238
+ // Обновление статистики
239
+ updateStats();
240
+
241
+ // Функции
242
+ function formatDate(date, withWeekday = false) {
243
+ const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
244
+ if (withWeekday) {
245
+ options.weekday = 'long';
246
+ }
247
+ return date.toLocaleDateString('ru-RU', options);
248
+ }
249
+
250
+ function formatTime(date) {
251
+ return date.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });
252
+ }
253
+
254
+ function startWorkSession() {
255
+ const startTime = new Date();
256
+
257
+ appData.currentSession = {
258
+ startTime: startTime.toISOString()
259
+ };
260
+
261
+ localStorage.setItem('workTimeTracker', JSON.stringify(appData));
262
+
263
+ startBtn.disabled = true;
264
+ endBtn.disabled = false;
265
+ currentStatus.textContent = 'Работаю';
266
+ document.getElementById('start-btn').classList.remove('pulse');
267
+
268
+ // Добавление в историю
269
+ addHistoryEvent('Начало рабочего дня', startTime);
270
+
271
+ // Запуск таймера
272
+ updateTimer();
273
+ const timerInterval = setInterval(updateTimer, 1000);
274
+
275
+ endBtn.addEventListener('click', function() {
276
+ clearInterval(timerInterval);
277
+ endWorkSession();
278
+ });
279
+ }
280
+
281
+ function endWorkSession(customStartTime, customEndTime) {
282
+ const endTime = customEndTime ? new Date(customEndTime) : new Date();
283
+ const startTime = customStartTime ? new Date(customStartTime) : new Date(appData.currentSession.startTime);
284
+
285
+ const workDate = formatDate(startTime);
286
+ const durationMs = endTime - startTime;
287
+ const durationHours = (durationMs / (1000 * 60 * 60)).toFixed(2);
288
+
289
+ // Сохранение данных о рабочем дне
290
+ if (!appData.workDays[workDate]) {
291
+ appData.workDays[workDate] = {
292
+ startTime: startTime.toISOString(),
293
+ endTime: endTime.toISOString(),
294
+ duration: durationHours
295
+ };
296
+
297
+ // Обновление месячной статистики
298
+ const monthKey = `${startTime.getFullYear()}-${String(startTime.getMonth() + 1).padStart(2, '0')}`;
299
+ if (!appData.monthlyStats[monthKey]) {
300
+ appData.monthlyStats[monthKey] = {
301
+ days: 0,
302
+ hours: 0
303
+ };
304
+ }
305
+
306
+ appData.monthlyStats[monthKey].days += 1;
307
+ appData.monthlyStats[monthKey].hours += parseFloat(durationHours);
308
+ }
309
+
310
+ // Очистка текущей сессии
311
+ appData.currentSession = null;
312
+ localStorage.setItem('workTimeTracker', JSON.stringify(appData));
313
+
314
+ startBtn.disabled = false;
315
+ endBtn.disabled = true;
316
+ currentStatus.textContent = 'Не начат';
317
+ document.getElementById('start-btn').classList.add('pulse');
318
+
319
+ // Сброс прогресса
320
+ progressFill.style.width = '0%';
321
+ workProgress.textContent = '0%';
322
+ todayHours.textContent = '0 ч';
323
+
324
+ // Добавление в историю
325
+ addHistoryEvent('Конец рабочего дня', endTime, durationHours);
326
+
327
+ // Обновление статистики
328
+ updateStats();
329
+ updateMonthView();
330
+ }
331
+
332
+ function updateTimer() {
333
+ const startTime = new Date(appData.currentSession.startTime);
334
+ const now = new Date();
335
+ const durationMs = now - startTime;
336
+ const durationHours = (durationMs / (1000 * 60 * 60)).toFixed(2);
337
+
338
+ // Обновление отображаемого времени
339
+ todayHours.textContent = `${durationHours} ч`;
340
+
341
+ // Расчет прогресса (8-часовой рабочий день)
342
+ const progress = Math.min((durationMs / (8 * 60 * 60 * 1000)) * 100, 100);
343
+ progressFill.style.width = `${progress}%`;
344
+ workProgress.textContent = `${Math.round(progress)}%`;
345
+ }
346
+
347
+ function updateStats() {
348
+ // Подсчет общего количества рабочих дней и часов
349
+ let totalDays = 0;
350
+ let totalHours = 0;
351
+
352
+ for (const month in appData.monthlyStats) {
353
+ totalDays += appData.monthlyStats[month].days;
354
+ totalHours += appData.monthlyStats[month].hours;
355
+ }
356
+
357
+ workedDays.textContent = totalDays;
358
+ totalHours.textContent = `${totalHours.toFixed(1)} ч`;
359
+ }
360
+
361
+ function updateMonthView() {
362
+ const monthName = currentMonthView.toLocaleDateString('ru-RU', { month: 'long', year: 'numeric' });
363
+ currentMonth.textContent = monthName.charAt(0).toUpperCase() + monthName.slice(1);
364
+
365
+ const monthKey = `${currentMonthView.getFullYear()}-${String(currentMonthView.getMonth() + 1).padStart(2, '0')}`;
366
+ const monthStats = appData.monthlyStats[monthKey] || { days: 0, hours: 0 };
367
+
368
+ // Очистка таблицы
369
+ monthTableBody.innerHTML = '';
370
+
371
+ // Поиск всех рабочих дней в этом месяце
372
+ const monthWorkDays = [];
373
+ for (const date in appData.workDays) {
374
+ const workDay = appData.workDays[date];
375
+ const workDate = new Date(workDay.startTime);
376
+
377
+ if (workDate.getFullYear() === currentMonthView.getFullYear() &&
378
+ workDate.getMonth() === currentMonthView.getMonth()) {
379
+ monthWorkDays.push({
380
+ date: workDate,
381
+ startTime: new Date(workDay.startTime),
382
+ endTime: new Date(workDay.endTime),
383
+ duration: workDay.duration
384
+ });
385
+ }
386
+ }
387
+
388
+ // Сортировка по дате
389
+ monthWorkDays.sort((a, b) => b.date - a.date);
390
+
391
+ // Заполнение таблицы
392
+ monthWorkDays.forEach(day => {
393
+ const row = document.createElement('tr');
394
+ row.className = 'fade-in';
395
+
396
+ row.innerHTML = `
397
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${formatDate(day.date)}</td>
398
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${formatTime(day.startTime)}</td>
399
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${formatTime(day.endTime)}</td>
400
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${day.duration} ч</td>
401
+ `;
402
+
403
+ monthTableBody.appendChild(row);
404
+ });
405
+
406
+ // Итого за месяц
407
+ monthTotal.textContent = `${monthStats.days} рабочих дней, ${monthStats.hours.toFixed(1)} часов`;
408
+ }
409
+
410
+ function addHistoryEvent(event, time, duration = null) {
411
+ const eventElement = document.createElement('div');
412
+ eventElement.className = 'fade-in bg-gray-50 p-4 rounded-lg';
413
+
414
+ let eventText = `
415
+ <div class="flex justify-between items-center">
416
+ <div>
417
+ <p class="font-medium text-gray-800">${event}</p>
418
+ <p class="text-sm text-gray-500">${formatTime(time)}</p>
419
+ </div>
420
+ `;
421
+
422
+ if (duration) {
423
+ eventText += `
424
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
425
+ ${duration} ч
426
+ </span>
427
+ `;
428
+ }
429
+
430
+ eventText += `</div>`;
431
+ eventElement.innerHTML = eventText;
432
+
433
+ // Добавляем в начало списка
434
+ if (historyList.firstChild) {
435
+ historyList.insertBefore(eventElement, historyList.firstChild);
436
+ } else {
437
+ historyList.appendChild(eventElement);
438
+ }
439
+
440
+ // Ограничиваем историю 10 последними событиями
441
+ if (historyList.children.length > 10) {
442
+ historyList.removeChild(historyList.lastChild);
443
+ }
444
+ }
445
+
446
+ // Загрузка истории
447
+ function loadHistory() {
448
+ historyList.innerHTML = '';
449
+
450
+ // Собираем все события (начала и концы рабочих дней)
451
+ const events = [];
452
+
453
+ for (const date in appData.workDays) {
454
+ const workDay = appData.workDays[date];
455
+ events.push({
456
+ type: 'start',
457
+ time: new Date(workDay.startTime),
458
+ duration: null
459
+ });
460
+
461
+ events.push({
462
+ type: 'end',
463
+ time: new Date(workDay.endTime),
464
+ duration: workDay.duration
465
+ });
466
+ }
467
+
468
+ // Сортировка по времени (новые сначала)
469
+ events.sort((a, b) => b.time - a.time);
470
+
471
+ // Отображение
472
+ events.slice(0, 10).forEach(event => {
473
+ addHistoryEvent(
474
+ event.type === 'start' ? 'Начало рабочего дня' : 'Конец рабочего дня',
475
+ event.time,
476
+ event.duration
477
+ );
478
+ });
479
+ }
480
+
481
+ loadHistory();
482
+ });
483
+ </script>
484
+ <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=AliDu14/work-time" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
485
+ </html>