Hugging Face's logo

Spaces:
britodeveloper
/
time-tracker-clockify
Running

App Files Community
britodeveloper commited on
Commit
42e7282
·
verified ·
1 Parent(s): 5fcf75f

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +397 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Time Tracker Clockify
3
- emoji: ⚡
4
- colorFrom: blue
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: time-tracker-clockify
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: pink
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,397 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TimeTrack - Time Tracking App</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
+ .timer-circle {
11
+ width: 300px;
12
+ height: 300px;
13
+ border: 8px solid #4f46e5;
14
+ border-radius: 50%;
15
+ position: relative;
16
+ box-shadow: 0 0 20px rgba(79, 70, 229, 0.3);
17
+ }
18
+ .pulse-animation {
19
+ animation: pulse 2s infinite;
20
+ }
21
+ @keyframes pulse {
22
+ 0% {
23
+ box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7);
24
+ }
25
+ 70% {
26
+ box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
27
+ }
28
+ 100% {
29
+ box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
30
+ }
31
+ }
32
+ .task-item:hover .task-actions {
33
+ opacity: 1;
34
+ }
35
+ .sidebar {
36
+ transition: all 0.3s ease;
37
+ }
38
+ @media (max-width: 768px) {
39
+ .sidebar {
40
+ transform: translateX(-100%);
41
+ }
42
+ .sidebar.open {
43
+ transform: translateX(0);
44
+ }
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="bg-gray-50 font-sans">
49
+ <div class="flex h-screen overflow-hidden">
50
+ <!-- Sidebar -->
51
+ <div class="sidebar bg-white w-64 border-r border-gray-200 fixed h-full z-10 md:relative md:translate-x-0">
52
+ <div class="p-4 border-b border-gray-200">
53
+ <h1 class="text-2xl font-bold text-indigo-600 flex items-center">
54
+ <i class="fas fa-clock mr-2"></i> TimeTrack
55
+ </h1>
56
+ </div>
57
+ <nav class="p-4">
58
+ <div class="mb-6">
59
+ <h3 class="text-xs uppercase font-semibold text-gray-500 mb-2">Tracking</h3>
60
+ <ul>
61
+ <li class="mb-1">
62
+ <a href="#" class="flex items-center px-3 py-2 rounded-md bg-indigo-50 text-indigo-700">
63
+ <i class="fas fa-play-circle mr-3 text-indigo-600"></i> Timer
64
+ </a>
65
+ </li>
66
+ <li class="mb-1">
67
+ <a href="#" class="flex items-center px-3 py-2 rounded-md text-gray-700 hover:bg-gray-100">
68
+ <i class="fas fa-list mr-3 text-gray-500"></i> Timesheet
69
+ </a>
70
+ </li>
71
+ <li class="mb-1">
72
+ <a href="#" class="flex items-center px-3 py-2 rounded-md text-gray-700 hover:bg-gray-100">
73
+ <i class="fas fa-chart-bar mr-3 text-gray-500"></i> Reports
74
+ </a>
75
+ </li>
76
+ </ul>
77
+ </div>
78
+ <div class="mb-6">
79
+ <h3 class="text-xs uppercase font-semibold text-gray-500 mb-2">Manage</h3>
80
+ <ul>
81
+ <li class="mb-1">
82
+ <a href="#" class="flex items-center px-3 py-2 rounded-md text-gray-700 hover:bg-gray-100">
83
+ <i class="fas fa-project-diagram mr-3 text-gray-500"></i> Projects
84
+ </a>
85
+ </li>
86
+ <li class="mb-1">
87
+ <a href="#" class="flex items-center px-3 py-2 rounded-md text-gray-700 hover:bg-gray-100">
88
+ <i class="fas fa-users mr-3 text-gray-500"></i> Team
89
+ </a>
90
+ </li>
91
+ <li class="mb-1">
92
+ <a href="#" class="flex items-center px-3 py-2 rounded-md text-gray-700 hover:bg-gray-100">
93
+ <i class="fas fa-cog mr-3 text-gray-500"></i> Settings
94
+ </a>
95
+ </li>
96
+ </ul>
97
+ </div>
98
+ <div class="mt-8">
99
+ <div class="flex items-center p-3 bg-gray-100 rounded-lg">
100
+ <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center text-white font-semibold">
101
+ JD
102
+ </div>
103
+ <div class="ml-3">
104
+ <p class="text-sm font-medium">John Doe</p>
105
+ <p class="text-xs text-gray-500">Free Plan</p>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </nav>
110
+ </div>
111
+
112
+ <!-- Main Content -->
113
+ <div class="flex-1 overflow-auto">
114
+ <!-- Mobile Header -->
115
+ <div class="md:hidden bg-white p-4 border-b border-gray-200 flex justify-between items-center">
116
+ <button id="menu-toggle" class="text-gray-600">
117
+ <i class="fas fa-bars text-xl"></i>
118
+ </button>
119
+ <h1 class="text-xl font-bold text-indigo-600">TimeTrack</h1>
120
+ <div class="w-8"></div> <!-- Spacer for balance -->
121
+ </div>
122
+
123
+ <!-- Content -->
124
+ <div class="p-6">
125
+ <div class="flex justify-between items-center mb-8">
126
+ <h2 class="text-2xl font-bold text-gray-800">Time Tracker</h2>
127
+ <div class="flex space-x-2">
128
+ <button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
129
+ <i class="fas fa-history mr-2"></i> History
130
+ </button>
131
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
132
+ <i class="fas fa-plus mr-2"></i> New Project
133
+ </button>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Timer Section -->
138
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
139
+ <div class="flex flex-col md:flex-row items-center justify-between">
140
+ <!-- Timer Circle -->
141
+ <div class="mb-8 md:mb-0">
142
+ <div class="timer-circle pulse-animation flex items-center justify-center mx-auto">
143
+ <div class="text-center">
144
+ <div id="timer-display" class="text-5xl font-bold text-gray-800">00:00:00</div>
145
+ <div class="text-gray-500 mt-2">Today: 3h 42m</div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Timer Controls -->
151
+ <div class="w-full md:w-1/2">
152
+ <div class="mb-6">
153
+ <label class="block text-sm font-medium text-gray-700 mb-1">Project</label>
154
+ <select class="w-full p-3 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
155
+ <option selected>Select a project</option>
156
+ <option>Website Redesign</option>
157
+ <option>Mobile App Development</option>
158
+ <option>Marketing Campaign</option>
159
+ <option>Client Meeting</option>
160
+ </select>
161
+ </div>
162
+
163
+ <div class="mb-6">
164
+ <label class="block text-sm font-medium text-gray-700 mb-1">Task</label>
165
+ <div class="flex">
166
+ <input type="text" placeholder="What are you working on?" class="flex-1 p-3 border border-gray-300 rounded-l-md focus:ring-indigo-500 focus:border-indigo-500">
167
+ <button class="px-4 bg-gray-100 border border-l-0 border-gray-300 rounded-r-md text-gray-500 hover:bg-gray-200">
168
+ <i class="fas fa-tags"></i>
169
+ </button>
170
+ </div>
171
+ </div>
172
+
173
+ <div class="flex space-x-3">
174
+ <button id="start-timer" class="flex-1 py-3 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 font-medium">
175
+ <i class="fas fa-play mr-2"></i> Start
176
+ </button>
177
+ <button id="stop-timer" class="flex-1 py-3 bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 font-medium" disabled>
178
+ <i class="fas fa-stop mr-2"></i> Stop
179
+ </button>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Recent Tasks -->
186
+ <div class="bg-white rounded-xl shadow-sm p-6">
187
+ <div class="flex justify-between items-center mb-6">
188
+ <h3 class="text-lg font-semibold text-gray-800">Recent Tasks</h3>
189
+ <button class="text-sm text-indigo-600 hover:text-indigo-800">
190
+ <i class="fas fa-sync-alt mr-1"></i> Refresh
191
+ </button>
192
+ </div>
193
+
194
+ <div class="overflow-x-auto">
195
+ <table class="min-w-full divide-y divide-gray-200">
196
+ <thead class="bg-gray-50">
197
+ <tr>
198
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Task</th>
199
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Project</th>
200
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
201
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
202
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
203
+ </tr>
204
+ </thead>
205
+ <tbody class="bg-white divide-y divide-gray-200">
206
+ <tr class="task-item hover:bg-gray-50">
207
+ <td class="px-6 py-4 whitespace-nowrap">
208
+ <div class="flex items-center">
209
+ <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center">
210
+ <i class="fas fa-code text-indigo-600"></i>
211
+ </div>
212
+ <div class="ml-4">
213
+ <div class="text-sm font-medium text-gray-900">Implement login page</div>
214
+ <div class="text-sm text-gray-500">Frontend development</div>
215
+ </div>
216
+ </div>
217
+ </td>
218
+ <td class="px-6 py-4 whitespace-nowrap">
219
+ <div class="text-sm text-gray-900">Website Redesign</div>
220
+ </td>
221
+ <td class="px-6 py-4 whitespace-nowrap">
222
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
223
+ 1h 23m
224
+ </span>
225
+ </td>
226
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
227
+ Today, 10:45 AM
228
+ </td>
229
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
230
+ <div class="task-actions opacity-0 md:opacity-100 flex justify-end space-x-2">
231
+ <button class="text-indigo-600 hover:text-indigo-900">
232
+ <i class="fas fa-edit"></i>
233
+ </button>
234
+ <button class="text-red-600 hover:text-red-900">
235
+ <i class="fas fa-trash"></i>
236
+ </button>
237
+ </div>
238
+ </td>
239
+ </tr>
240
+ <tr class="task-item hover:bg-gray-50">
241
+ <td class="px-6 py-4 whitespace-nowrap">
242
+ <div class="flex items-center">
243
+ <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
244
+ <i class="fas fa-comments text-blue-600"></i>
245
+ </div>
246
+ <div class="ml-4">
247
+ <div class="text-sm font-medium text-gray-900">Client meeting</div>
248
+ <div class="text-sm text-gray-500">Project discussion</div>
249
+ </div>
250
+ </div>
251
+ </td>
252
+ <td class="px-6 py-4 whitespace-nowrap">
253
+ <div class="text-sm text-gray-900">Client ABC</div>
254
+ </td>
255
+ <td class="px-6 py-4 whitespace-nowrap">
256
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
257
+ 45m
258
+ </span>
259
+ </td>
260
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
261
+ Today, 9:30 AM
262
+ </td>
263
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
264
+ <div class="task-actions opacity-0 md:opacity-100 flex justify-end space-x-2">
265
+ <button class="text-indigo-600 hover:text-indigo-900">
266
+ <i class="fas fa-edit"></i>
267
+ </button>
268
+ <button class="text-red-600 hover:text-red-900">
269
+ <i class="fas fa-trash"></i>
270
+ </button>
271
+ </div>
272
+ </td>
273
+ </tr>
274
+ <tr class="task-item hover:bg-gray-50">
275
+ <td class="px-6 py-4 whitespace-nowrap">
276
+ <div class="flex items-center">
277
+ <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center">
278
+ <i class="fas fa-paint-brush text-purple-600"></i>
279
+ </div>
280
+ <div class="ml-4">
281
+ <div class="text-sm font-medium text-gray-900">Design dashboard</div>
282
+ <div class="text-sm text-gray-500">UI/UX</div>
283
+ </div>
284
+ </div>
285
+ </td>
286
+ <td class="px-6 py-4 whitespace-nowrap">
287
+ <div class="text-sm text-gray-900">Mobile App</div>
288
+ </td>
289
+ <td class="px-6 py-4 whitespace-nowrap">
290
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
291
+ 1h 34m
292
+ </span>
293
+ </td>
294
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
295
+ Yesterday, 4:15 PM
296
+ </td>
297
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
298
+ <div class="task-actions opacity-0 md:opacity-100 flex justify-end space-x-2">
299
+ <button class="text-indigo-600 hover:text-indigo-900">
300
+ <i class="fas fa-edit"></i>
301
+ </button>
302
+ <button class="text-red-600 hover:text-red-900">
303
+ <i class="fas fa-trash"></i>
304
+ </button>
305
+ </div>
306
+ </td>
307
+ </tr>
308
+ </tbody>
309
+ </table>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <script>
317
+ // Timer functionality
318
+ let timerInterval;
319
+ let seconds = 0;
320
+ let isRunning = false;
321
+
322
+ const timerDisplay = document.getElementById('timer-display');
323
+ const startButton = document.getElementById('start-timer');
324
+ const stopButton = document.getElementById('stop-timer');
325
+ const menuToggle = document.getElementById('menu-toggle');
326
+
327
+ function formatTime(totalSeconds) {
328
+ const hours = Math.floor(totalSeconds / 3600);
329
+ const minutes = Math.floor((totalSeconds % 3600) / 60);
330
+ const seconds = totalSeconds % 60;
331
+
332
+ return [
333
+ hours.toString().padStart(2, '0'),
334
+ minutes.toString().padStart(2, '0'),
335
+ seconds.toString().padStart(2, '0')
336
+ ].join(':');
337
+ }
338
+
339
+ function startTimer() {
340
+ if (!isRunning) {
341
+ isRunning = true;
342
+ startButton.disabled = true;
343
+ stopButton.disabled = false;
344
+ startButton.innerHTML = '<i class="fas fa-pause mr-2"></i> Pause';
345
+ startButton.classList.remove('bg-indigo-600', 'hover:bg-indigo-700');
346
+ startButton.classList.add('bg-yellow-500', 'hover:bg-yellow-600');
347
+
348
+ timerInterval = setInterval(() => {
349
+ seconds++;
350
+ timerDisplay.textContent = formatTime(seconds);
351
+ }, 1000);
352
+ } else {
353
+ // Pause functionality
354
+ clearInterval(timerInterval);
355
+ isRunning = false;
356
+ startButton.innerHTML = '<i class="fas fa-play mr-2"></i> Resume';
357
+ startButton.classList.remove('bg-yellow-500', 'hover:bg-yellow-600');
358
+ startButton.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
359
+ }
360
+ }
361
+
362
+ function stopTimer() {
363
+ clearInterval(timerInterval);
364
+ isRunning = false;
365
+ seconds = 0;
366
+ timerDisplay.textContent = '00:00:00';
367
+ startButton.disabled = false;
368
+ stopButton.disabled = true;
369
+ startButton.innerHTML = '<i class="fas fa-play mr-2"></i> Start';
370
+ startButton.classList.remove('bg-yellow-500', 'hover:bg-yellow-600');
371
+ startButton.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
372
+
373
+ // Here you would typically save the time entry to your database
374
+ alert('Time entry saved!');
375
+ }
376
+
377
+ startButton.addEventListener('click', startTimer);
378
+ stopButton.addEventListener('click', stopTimer);
379
+
380
+ // Mobile menu toggle
381
+ menuToggle.addEventListener('click', () => {
382
+ document.querySelector('.sidebar').classList.toggle('open');
383
+ });
384
+
385
+ // Show actions on hover for task items
386
+ const taskItems = document.querySelectorAll('.task-item');
387
+ taskItems.forEach(item => {
388
+ item.addEventListener('mouseenter', () => {
389
+ item.querySelector('.task-actions').classList.remove('opacity-0');
390
+ });
391
+ item.addEventListener('mouseleave', () => {
392
+ item.querySelector('.task-actions').classList.add('opacity-0');
393
+ });
394
+ });
395
+ </script>
396
+ <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=britodeveloper/time-tracker-clockify" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
397
+ </html>