Hugging Face's logo

Spaces:
TheLoop404
/
pomo
Running

App Files Community
TheLoop404 commited on
Commit
90670f0
·
verified ·
1 Parent(s): 9e317a9

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +463 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pomo
3
- emoji: 🚀
4
  colorFrom: green
5
- colorTo: indigo
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: pomo
3
+ emoji: 🐳
4
  colorFrom: green
5
+ colorTo: blue
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,463 @@
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="ar" dir="rtl">
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
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');
11
+
12
+ body {
13
+ font-family: 'Tajawal', sans-serif;
14
+ background-color: #f8fafc;
15
+ }
16
+
17
+ .progress-ring__circle {
18
+ transition: stroke-dashoffset 0.35s;
19
+ transform: rotate(-90deg);
20
+ transform-origin: 50% 50%;
21
+ }
22
+
23
+ .flip-animation {
24
+ animation: flip 0.5s ease;
25
+ }
26
+
27
+ @keyframes flip {
28
+ 0% { transform: rotateX(0deg); }
29
+ 50% { transform: rotateX(90deg); }
30
+ 100% { transform: rotateX(0deg); }
31
+ }
32
+
33
+ .pulse-animation {
34
+ animation: pulse 1.5s infinite;
35
+ }
36
+
37
+ @keyframes pulse {
38
+ 0% { transform: scale(1); }
39
+ 50% { transform: scale(1.05); }
40
+ 100% { transform: scale(1); }
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="min-h-screen bg-gray-50">
45
+ <div class="container mx-auto px-4 py-8">
46
+ <header class="text-center mb-12">
47
+ <h1 class="text-4xl font-bold text-indigo-800 mb-2">تقنية بومودورو</h1>
48
+ <p class="text-lg text-gray-600">طريقة فعالة لزيادة الإنتاجية وإدارة الوقت</p>
49
+ </header>
50
+
51
+ <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
52
+ <!-- Timer Section -->
53
+ <div class="p-8 bg-gradient-to-r from-indigo-500 to-purple-600 text-white">
54
+ <div class="flex justify-between items-center mb-6">
55
+ <h2 class="text-2xl font-semibold">عداد بومودورو</h2>
56
+ <div id="session-count" class="bg-white text-indigo-600 px-3 py-1 rounded-full text-sm font-bold">
57
+ جلسة: 0
58
+ </div>
59
+ </div>
60
+
61
+ <div class="flex flex-col items-center">
62
+ <!-- Timer Circle -->
63
+ <div class="relative w-64 h-64 mb-8">
64
+ <svg class="w-full h-full" viewBox="0 0 100 100">
65
+ <circle cx="50" cy="50" r="45" fill="none" stroke="#ffffff20" stroke-width="8"/>
66
+ <circle id="progress-circle" cx="50" cy="50" r="45" fill="none" stroke="#ffffff" stroke-width="8" stroke-dasharray="283" stroke-dashoffset="0" class="progress-ring__circle"/>
67
+ </svg>
68
+ <div class="absolute inset-0 flex flex-col items-center justify-center">
69
+ <div id="timer-display" class="text-5xl font-bold mb-2">25:00</div>
70
+ <div id="timer-state" class="text-lg">جاهز للبدء</div>
71
+ </div>
72
+ </div>
73
+
74
+ <!-- Timer Controls -->
75
+ <div class="flex space-x-4 space-x-reverse">
76
+ <button id="start-btn" class="bg-white text-indigo-600 px-6 py-2 rounded-full font-bold hover:bg-gray-100 transition">
77
+ <i class="fas fa-play mr-2"></i> بدء
78
+ </button>
79
+ <button id="pause-btn" class="bg-white text-indigo-600 px-6 py-2 rounded-full font-bold hover:bg-gray-100 transition hidden">
80
+ <i class="fas fa-pause mr-2"></i> إيقاف مؤقت
81
+ </button>
82
+ <button id="reset-btn" class="bg-indigo-800 text-white px-6 py-2 rounded-full font-bold hover:bg-indigo-900 transition">
83
+ <i class="fas fa-redo mr-2"></i> إعادة تعيين
84
+ </button>
85
+ </div>
86
+ </div>
87
+ </div>
88
+
89
+ <!-- Settings Section -->
90
+ <div class="p-8">
91
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">إعدادات التوقيت</h2>
92
+
93
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
94
+ <div class="bg-gray-50 p-4 rounded-lg">
95
+ <label for="work-duration" class="block text-gray-700 font-medium mb-2">مدة العمل (دقائق)</label>
96
+ <div class="flex items-center">
97
+ <button id="work-decrement" class="bg-gray-200 text-gray-700 px-3 py-1 rounded-r-lg hover:bg-gray-300">
98
+ <i class="fas fa-minus"></i>
99
+ </button>
100
+ <input type="number" id="work-duration" min="1" max="60" value="25" class="w-full text-center bg-white border-t border-b border-gray-200 py-1 px-2">
101
+ <button id="work-increment" class="bg-gray-200 text-gray-700 px-3 py-1 rounded-l-lg hover:bg-gray-300">
102
+ <i class="fas fa-plus"></i>
103
+ </button>
104
+ </div>
105
+ </div>
106
+
107
+ <div class="bg-gray-50 p-4 rounded-lg">
108
+ <label for="break-duration" class="block text-gray-700 font-medium mb-2">مدة الراحة (دقائق)</label>
109
+ <div class="flex items-center">
110
+ <button id="break-decrement" class="bg-gray-200 text-gray-700 px-3 py-1 rounded-r-lg hover:bg-gray-300">
111
+ <i class="fas fa-minus"></i>
112
+ </button>
113
+ <input type="number" id="break-duration" min="1" max="30" value="5" class="w-full text-center bg-white border-t border-b border-gray-200 py-1 px-2">
114
+ <button id="break-increment" class="bg-gray-200 text-gray-700 px-3 py-1 rounded-l-lg hover:bg-gray-300">
115
+ <i class="fas fa-plus"></i>
116
+ </button>
117
+ </div>
118
+ </div>
119
+
120
+ <div class="bg-gray-50 p-4 rounded-lg">
121
+ <label for="long-break-duration" class="block text-gray-700 font-medium mb-2">مدة الراحة الطويلة (دقائق)</label>
122
+ <div class="flex items-center">
123
+ <button id="long-break-decrement" class="bg-gray-200 text-gray-700 px-3 py-1 rounded-r-lg hover:bg-gray-300">
124
+ <i class="fas fa-minus"></i>
125
+ </button>
126
+ <input type="number" id="long-break-duration" min="1" max="60" value="15" class="w-full text-center bg-white border-t border-b border-gray-200 py-1 px-2">
127
+ <button id="long-break-increment" class="bg-gray-200 text-gray-700 px-3 py-1 rounded-l-lg hover:bg-gray-300">
128
+ <i class="fas fa-plus"></i>
129
+ </button>
130
+ </div>
131
+ </div>
132
+
133
+ <div class="bg-gray-50 p-4 rounded-lg">
134
+ <label for="sessions-before-long-break" class="block text-gray-700 font-medium mb-2">عدد الجلسات قبل الراحة الطويلة</label>
135
+ <div class="flex items-center">
136
+ <button id="sessions-decrement" class="bg-gray-200 text-gray-700 px-3 py-1 rounded-r-lg hover:bg-gray-300">
137
+ <i class="fas fa-minus"></i>
138
+ </button>
139
+ <input type="number" id="sessions-before-long-break" min="1" max="10" value="4" class="w-full text-center bg-white border-t border-b border-gray-200 py-1 px-2">
140
+ <button id="sessions-increment" class="bg-gray-200 text-gray-700 px-3 py-1 rounded-l-lg hover:bg-gray-300">
141
+ <i class="fas fa-plus"></i>
142
+ </button>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <div class="flex justify-center">
148
+ <button id="save-settings" class="bg-indigo-600 text-white px-6 py-2 rounded-full font-bold hover:bg-indigo-700 transition">
149
+ <i class="fas fa-save mr-2"></i> حفظ الإعدادات
150
+ </button>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Task List Section -->
155
+ <div class="p-8 border-t border-gray-200">
156
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">قائمة المهام</h2>
157
+
158
+ <div class="mb-6 flex">
159
+ <input type="text" id="task-input" placeholder="أضف مهمة جديدة..." class="flex-1 border border-gray-300 rounded-r-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
160
+ <button id="add-task" class="bg-indigo-600 text-white px-4 py-2 rounded-l-lg hover:bg-indigo-700 transition">
161
+ <i class="fas fa-plus"></i>
162
+ </button>
163
+ </div>
164
+
165
+ <ul id="task-list" class="divide-y divide-gray-200">
166
+ <!-- Tasks will be added here dynamically -->
167
+ </ul>
168
+ </div>
169
+ </div>
170
+
171
+ <!-- Info Section -->
172
+ <div class="max-w-3xl mx-auto mt-12 bg-white rounded-xl shadow-lg overflow-hidden p-8">
173
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4">ما هي تقنية بومودورو؟</h2>
174
+ <p class="text-gray-600 mb-4">
175
+ تقنية بومودورو هي طريقة لإدارة الوقت طورها فرانشيسكو سيريلو في أواخر الثمانينيات. تعتمد هذه التقنية على تقسيم العمل إلى فترات زمنية مدتها 25 دقيقة (تسمى "بومودورو") تفصل بينها فترات راحة قصيرة.
176
+ </p>
177
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">كيف تعمل:</h3>
178
+ <ol class="list-decimal list-inside text-gray-600 space-y-2">
179
+ <li>اختر المهمة التي تريد إنجازها</li>
180
+ <li>اضبط المؤقت على 25 دقيقة</li>
181
+ <li>اعمل على المهمة حتى يرن المؤقت</li>
182
+ <li>خذ استراحة قصيرة (5 دقائق)</li>
183
+ <li>بعد كل 4 جلسات عمل، خذ استراحة أطول (15-30 دقيقة)</li>
184
+ </ol>
185
+ </div>
186
+ </div>
187
+
188
+ <!-- Audio for alerts -->
189
+ <audio id="timer-end-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3"></audio>
190
+ <audio id="break-end-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-positive-interface-beep-221.mp3"></audio>
191
+
192
+ <script>
193
+ document.addEventListener('DOMContentLoaded', function() {
194
+ // DOM Elements
195
+ const timerDisplay = document.getElementById('timer-display');
196
+ const timerState = document.getElementById('timer-state');
197
+ const sessionCount = document.getElementById('session-count');
198
+ const progressCircle = document.getElementById('progress-circle');
199
+ const startBtn = document.getElementById('start-btn');
200
+ const pauseBtn = document.getElementById('pause-btn');
201
+ const resetBtn = document.getElementById('reset-btn');
202
+
203
+ // Timer Settings Elements
204
+ const workDurationInput = document.getElementById('work-duration');
205
+ const breakDurationInput = document.getElementById('break-duration');
206
+ const longBreakDurationInput = document.getElementById('long-break-duration');
207
+ const sessionsBeforeLongBreakInput = document.getElementById('sessions-before-long-break');
208
+
209
+ // Task List Elements
210
+ const taskInput = document.getElementById('task-input');
211
+ const addTaskBtn = document.getElementById('add-task');
212
+ const taskList = document.getElementById('task-list');
213
+
214
+ // Audio Elements
215
+ const timerEndSound = document.getElementById('timer-end-sound');
216
+ const breakEndSound = document.getElementById('break-end-sound');
217
+
218
+ // Timer Variables
219
+ let timer;
220
+ let timeLeft = 25 * 60; // 25 minutes in seconds
221
+ let isRunning = false;
222
+ let isWorkTime = true;
223
+ let sessionsCompleted = 0;
224
+ let totalSeconds;
225
+ let circumference = 2 * Math.PI * 45;
226
+
227
+ // Initialize timer display
228
+ updateTimerDisplay();
229
+
230
+ // Event Listeners
231
+ startBtn.addEventListener('click', startTimer);
232
+ pauseBtn.addEventListener('click', pauseTimer);
233
+ resetBtn.addEventListener('click', resetTimer);
234
+
235
+ // Settings increment/decrement buttons
236
+ document.getElementById('work-increment').addEventListener('click', () => adjustValue(workDurationInput, 1));
237
+ document.getElementById('work-decrement').addEventListener('click', () => adjustValue(workDurationInput, -1));
238
+ document.getElementById('break-increment').addEventListener('click', () => adjustValue(breakDurationInput, 1));
239
+ document.getElementById('break-decrement').addEventListener('click', () => adjustValue(breakDurationInput, -1));
240
+ document.getElementById('long-break-increment').addEventListener('click', () => adjustValue(longBreakDurationInput, 1));
241
+ document.getElementById('long-break-decrement').addEventListener('click', () => adjustValue(longBreakDurationInput, -1));
242
+ document.getElementById('sessions-increment').addEventListener('click', () => adjustValue(sessionsBeforeLongBreakInput, 1));
243
+ document.getElementById('sessions-decrement').addEventListener('click', () => adjustValue(sessionsBeforeLongBreakInput, -1));
244
+
245
+ // Save settings
246
+ document.getElementById('save-settings').addEventListener('click', saveSettings);
247
+
248
+ // Task list functionality
249
+ addTaskBtn.addEventListener('click', addTask);
250
+ taskInput.addEventListener('keypress', function(e) {
251
+ if (e.key === 'Enter') {
252
+ addTask();
253
+ }
254
+ });
255
+
256
+ // Functions
257
+ function startTimer() {
258
+ if (!isRunning) {
259
+ isRunning = true;
260
+ startBtn.classList.add('hidden');
261
+ pauseBtn.classList.remove('hidden');
262
+
263
+ if (timeLeft === totalSeconds || timeLeft === 0) {
264
+ // Starting fresh
265
+ timeLeft = isWorkTime ? parseInt(workDurationInput.value) * 60 :
266
+ (sessionsCompleted % parseInt(sessionsBeforeLongBreakInput.value) === 0 ?
267
+ parseInt(longBreakDurationInput.value) * 60 :
268
+ parseInt(breakDurationInput.value) * 60);
269
+ totalSeconds = timeLeft;
270
+ updateProgressCircle();
271
+ }
272
+
273
+ timer = setInterval(() => {
274
+ timeLeft--;
275
+ updateTimerDisplay();
276
+ updateProgressCircle();
277
+
278
+ if (timeLeft <= 0) {
279
+ clearInterval(timer);
280
+ timerComplete();
281
+ }
282
+ }, 1000);
283
+ }
284
+ }
285
+
286
+ function pauseTimer() {
287
+ if (isRunning) {
288
+ clearInterval(timer);
289
+ isRunning = false;
290
+ startBtn.classList.remove('hidden');
291
+ pauseBtn.classList.add('hidden');
292
+ }
293
+ }
294
+
295
+ function resetTimer() {
296
+ clearInterval(timer);
297
+ isRunning = false;
298
+ startBtn.classList.remove('hidden');
299
+ pauseBtn.classList.add('hidden');
300
+
301
+ isWorkTime = true;
302
+ timeLeft = parseInt(workDurationInput.value) * 60;
303
+ totalSeconds = timeLeft;
304
+ updateTimerDisplay();
305
+ updateProgressCircle();
306
+ timerState.textContent = 'جاهز للبدء';
307
+
308
+ // Reset session count if it's a fresh start
309
+ if (timeLeft === parseInt(workDurationInput.value) * 60) {
310
+ sessionsCompleted = 0;
311
+ updateSessionCount();
312
+ }
313
+ }
314
+
315
+ function timerComplete() {
316
+ if (isWorkTime) {
317
+ // Work session completed
318
+ timerEndSound.play();
319
+ sessionsCompleted++;
320
+ updateSessionCount();
321
+ isWorkTime = false;
322
+
323
+ // Determine break type
324
+ const isLongBreak = sessionsCompleted % parseInt(sessionsBeforeLongBreakInput.value) === 0;
325
+ timeLeft = isLongBreak ? parseInt(longBreakDurationInput.value) * 60 : parseInt(breakDurationInput.value) * 60;
326
+ totalSeconds = timeLeft;
327
+
328
+ timerState.textContent = isLongBreak ? 'وقت الراحة الطويلة!' : 'وقت الراحة!';
329
+ timerState.classList.add('text-green-500', 'flip-animation');
330
+ setTimeout(() => timerState.classList.remove('flip-animation'), 500);
331
+ } else {
332
+ // Break completed
333
+ breakEndSound.play();
334
+ isWorkTime = true;
335
+ timeLeft = parseInt(workDurationInput.value) * 60;
336
+ totalSeconds = timeLeft;
337
+
338
+ timerState.textContent = 'وقت العمل!';
339
+ timerState.classList.add('text-indigo-500', 'flip-animation');
340
+ setTimeout(() => timerState.classList.remove('flip-animation'), 500);
341
+ }
342
+
343
+ updateTimerDisplay();
344
+ updateProgressCircle();
345
+
346
+ // Auto-start next session if enabled
347
+ startTimer();
348
+ }
349
+
350
+ function updateTimerDisplay() {
351
+ const minutes = Math.floor(timeLeft / 60);
352
+ const seconds = timeLeft % 60;
353
+ timerDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
354
+
355
+ // Add pulse animation when time is running low
356
+ if (timeLeft <= 10 && isRunning) {
357
+ timerDisplay.classList.add('pulse-animation', 'text-red-500');
358
+ } else {
359
+ timerDisplay.classList.remove('pulse-animation', 'text-red-500');
360
+ }
361
+ }
362
+
363
+ function updateProgressCircle() {
364
+ const offset = circumference - (timeLeft / totalSeconds) * circumference;
365
+ progressCircle.style.strokeDashoffset = offset;
366
+ }
367
+
368
+ function updateSessionCount() {
369
+ sessionCount.textContent = `جلسة: ${sessionsCompleted}`;
370
+ sessionCount.classList.add('flip-animation');
371
+ setTimeout(() => sessionCount.classList.remove('flip-animation'), 500);
372
+ }
373
+
374
+ function adjustValue(input, change) {
375
+ let value = parseInt(input.value) + change;
376
+ const min = parseInt(input.min);
377
+ const max = parseInt(input.max);
378
+
379
+ if (value < min) value = min;
380
+ if (value > max) value = max;
381
+
382
+ input.value = value;
383
+ }
384
+
385
+ function saveSettings() {
386
+ // Just update the timer if it's not running
387
+ if (!isRunning) {
388
+ if (isWorkTime) {
389
+ timeLeft = parseInt(workDurationInput.value) * 60;
390
+ totalSeconds = timeLeft;
391
+ } else {
392
+ timeLeft = (sessionsCompleted % parseInt(sessionsBeforeLongBreakInput.value) === 0 ?
393
+ parseInt(longBreakDurationInput.value) * 60 :
394
+ parseInt(breakDurationInput.value) * 60);
395
+ totalSeconds = timeLeft;
396
+ }
397
+ updateTimerDisplay();
398
+ updateProgressCircle();
399
+ }
400
+
401
+ // Show confirmation
402
+ const saveBtn = document.getElementById('save-settings');
403
+ saveBtn.innerHTML = '<i class="fas fa-check mr-2"></i> تم الحفظ!';
404
+ saveBtn.classList.remove('bg-indigo-600', 'hover:bg-indigo-700');
405
+ saveBtn.classList.add('bg-green-500', 'hover:bg-green-600');
406
+
407
+ setTimeout(() => {
408
+ saveBtn.innerHTML = '<i class="fas fa-save mr-2"></i> حفظ الإعدادات';
409
+ saveBtn.classList.remove('bg-green-500', 'hover:bg-green-600');
410
+ saveBtn.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
411
+ }, 2000);
412
+ }
413
+
414
+ function addTask() {
415
+ const taskText = taskInput.value.trim();
416
+ if (taskText) {
417
+ const taskItem = document.createElement('li');
418
+ taskItem.className = 'py-3 flex items-center justify-between';
419
+
420
+ taskItem.innerHTML = `
421
+ <div class="flex items-center">
422
+ <input type="checkbox" class="mr-3 h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500">
423
+ <span class="text-gray-800">${taskText}</span>
424
+ </div>
425
+ <button class="text-red-500 hover:text-red-700">
426
+ <i class="fas fa-trash"></i>
427
+ </button>
428
+ `;
429
+
430
+ // Add event listeners for the new task
431
+ const checkbox = taskItem.querySelector('input[type="checkbox"]');
432
+ const deleteBtn = taskItem.querySelector('button');
433
+
434
+ checkbox.addEventListener('change', function() {
435
+ const taskTextElement = this.nextElementSibling;
436
+ if (this.checked) {
437
+ taskTextElement.classList.add('line-through', 'text-gray-400');
438
+ } else {
439
+ taskTextElement.classList.remove('line-through', 'text-gray-400');
440
+ }
441
+ });
442
+
443
+ deleteBtn.addEventListener('click', function() {
444
+ taskItem.remove();
445
+ });
446
+
447
+ taskList.appendChild(taskItem);
448
+ taskInput.value = '';
449
+
450
+ // Add animation
451
+ taskItem.classList.add('animate-fade-in');
452
+ }
453
+ }
454
+
455
+ // Initialize with work duration
456
+ timeLeft = parseInt(workDurationInput.value) * 60;
457
+ totalSeconds = timeLeft;
458
+ updateTimerDisplay();
459
+ updateProgressCircle();
460
+ });
461
+ </script>
462
+ <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=TheLoop404/pomo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
463
+ </html>