Hugging Face's logo

Spaces:
shubham6924
/
study-stopwatch
Running

App Files Community
shubham6924 commited on
Commit
dae6fa5
·
verified ·
1 Parent(s): 45c1954

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +450 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Study Stopwatch
3
- emoji: 🚀
4
  colorFrom: blue
5
- colorTo: pink
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: study-stopwatch
3
+ emoji: 🐳
4
  colorFrom: blue
5
+ colorTo: green
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,450 @@
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>Study Stopwatch</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
+ .glow {
11
+ text-shadow: 0 0 15px rgba(99, 102, 241, 0.8);
12
+ }
13
+ .progress-ring__circle {
14
+ transition: stroke-dashoffset 0.35s;
15
+ transform: rotate(-90deg);
16
+ transform-origin: 50% 50%;
17
+ }
18
+ .pulse {
19
+ animation: pulse 1.5s infinite cubic-bezier(0.4, 0, 0.6, 1);
20
+ }
21
+ @keyframes pulse {
22
+ 0%, 100% {
23
+ transform: scale(1);
24
+ box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
25
+ }
26
+ 50% {
27
+ transform: scale(1.05);
28
+ box-shadow: 0 0 0 12px rgba(99, 102, 241, 0);
29
+ }
30
+ }
31
+ .gradient-bg {
32
+ background: linear-gradient(135deg, rgba(17, 24, 39, 0.9) 0%, rgba(31, 41, 55, 0.9) 100%);
33
+ }
34
+ .gradient-header {
35
+ background: linear-gradient(90deg, rgba(55, 65, 81, 0.9) 0%, rgba(31, 41, 55, 0.9) 100%);
36
+ }
37
+ .gradient-button {
38
+ background: linear-gradient(135deg, rgba(79, 70, 229, 0.9) 0%, rgba(99, 102, 241, 0.9) 100%);
39
+ }
40
+ .gradient-button:hover {
41
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
42
+ }
43
+ .gradient-break {
44
+ background: linear-gradient(135deg, rgba(16, 185, 129, 0.9) 0%, rgba(5, 150, 105, 0.9) 100%);
45
+ }
46
+ .gradient-break:hover {
47
+ background: linear-gradient(135deg, rgba(5, 150, 105, 0.9) 0%, rgba(16, 185, 129, 0.9) 100%);
48
+ }
49
+ .fade-in {
50
+ animation: fadeIn 0.3s ease-in;
51
+ }
52
+ @keyframes fadeIn {
53
+ from { opacity: 0; transform: translateY(10px); }
54
+ to { opacity: 1; transform: translateY(0); }
55
+ }
56
+ .session-item {
57
+ transition: all 0.3s ease;
58
+ }
59
+ .session-item:hover {
60
+ transform: translateX(5px);
61
+ background: rgba(55, 65, 81, 0.7);
62
+ }
63
+ .landscape-container {
64
+ width: 90vw;
65
+ max-width: 1200px;
66
+ display: grid;
67
+ grid-template-columns: 1fr 1fr;
68
+ gap: 20px;
69
+ }
70
+ .timer-section {
71
+ grid-column: 1;
72
+ }
73
+ .data-section {
74
+ grid-column: 2;
75
+ display: flex;
76
+ flex-direction: column;
77
+ height: 100%;
78
+ }
79
+ .session-history {
80
+ flex: 1;
81
+ min-height: 200px;
82
+ }
83
+ .stats-container {
84
+ display: grid;
85
+ grid-template-columns: 1fr 1fr;
86
+ gap: 15px;
87
+ }
88
+ </style>
89
+ </head>
90
+ <body class="bg-gradient-to-br from-gray-900 to-gray-800 text-gray-100 min-h-screen flex items-center justify-center p-4">
91
+ <div class="landscape-container gradient-bg rounded-2xl shadow-2xl overflow-hidden border border-gray-700 p-6">
92
+ <!-- Left Column - Timer and Controls -->
93
+ <div class="timer-section">
94
+ <!-- Header -->
95
+ <div class="gradient-header p-4 rounded-lg flex justify-between items-center mb-6">
96
+ <h1 class="text-2xl font-bold text-indigo-400 glow">Study Stopwatch</h1>
97
+ <div class="flex space-x-2">
98
+ <button id="theme-toggle" class="text-gray-300 hover:text-blue-400 transition">
99
+ <i class="fas fa-moon"></i>
100
+ </button>
101
+ <button id="info-btn" class="text-gray-300 hover:text-blue-400 transition">
102
+ <i class="fas fa-info-circle"></i>
103
+ </button>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Timer Display -->
108
+ <div class="flex flex-col items-center mb-6">
109
+ <div class="relative w-64 h-64 mb-6">
110
+ <svg class="w-full h-full" viewBox="0 0 100 100">
111
+ <!-- Background circle -->
112
+ <circle class="text-gray-700" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
113
+ <!-- Progress circle -->
114
+ <circle id="progress-circle" class="progress-ring__circle text-blue-500" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" stroke-dasharray="251.2" stroke-dashoffset="0" />
115
+ </svg>
116
+ <div class="absolute inset-0 flex items-center justify-center flex-col">
117
+ <div id="display" class="text-5xl font-mono font-bold mb-2">00:00:00</div>
118
+ <div id="status" class="text-blue-400 text-sm uppercase tracking-wider">Ready</div>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Controls -->
123
+ <div class="flex space-x-4 mb-6">
124
+ <button id="startBtn" class="gradient-button text-white px-6 py-3 rounded-full font-bold uppercase tracking-wide transition-all duration-300 hover:shadow-lg pulse">
125
+ <i class="fas fa-play mr-2"></i>Start
126
+ </button>
127
+ <button id="pauseBtn" class="bg-gray-600 hover:bg-gray-500 text-white px-6 py-3 rounded-full font-bold uppercase tracking-wide transition-all duration-300 hover:shadow-lg hidden">
128
+ <i class="fas fa-pause mr-2"></i>Pause
129
+ </button>
130
+ <button id="resetBtn" class="bg-gradient-to-r from-rose-600 to-pink-600 hover:from-pink-600 hover:to-rose-600 text-white px-6 py-3 rounded-full font-bold uppercase tracking-wide transition-all duration-300 hover:shadow-lg">
131
+ <i class="fas fa-redo mr-2"></i>Reset
132
+ </button>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Pomodoro Settings -->
137
+ <div class="gradient-header p-4 rounded-lg">
138
+ <h2 class="text-lg font-semibold mb-4 text-blue-400">Study Settings</h2>
139
+ <div class="stats-container">
140
+ <div>
141
+ <label class="block text-sm text-gray-400 mb-1">Study Duration (min)</label>
142
+ <input id="study-time" type="number" min="1" max="120" value="25" class="w-full bg-gray-700 text-white rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
143
+ </div>
144
+ <div>
145
+ <label class="block text-sm text-gray-400 mb-1">Break Duration (min)</label>
146
+ <input id="break-time" type="number" min="1" max="30" value="5" class="w-full bg-gray-700 text-white rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Right Column - Data and History -->
153
+ <div class="data-section">
154
+ <!-- Session History -->
155
+ <div class="gradient-header p-4 rounded-lg mb-4 session-history">
156
+ <h2 class="text-lg font-semibold mb-4 text-indigo-400 flex items-center">
157
+ <i class="fas fa-history mr-2"></i>Session History
158
+ </h2>
159
+ <div id="session-list" class="space-y-3 h-64 overflow-y-auto pr-2">
160
+ <!-- Sessions will be added here -->
161
+ </div>
162
+ </div>
163
+
164
+ <!-- Session Statistics -->
165
+ <div class="gradient-header p-4 rounded-lg">
166
+ <h2 class="text-lg font-semibold mb-4 text-indigo-400 flex items-center">
167
+ <i class="fas fa-chart-bar mr-2"></i>Today's Stats
168
+ </h2>
169
+ <div class="stats-container">
170
+ <div class="bg-gray-700/30 p-3 rounded-lg border border-gray-600/50">
171
+ <div class="text-sm text-gray-400">Study Time</div>
172
+ <div id="total-study" class="text-xl font-bold text-indigo-400">0 min</div>
173
+ </div>
174
+ <div class="bg-gray-700/30 p-3 rounded-lg border border-gray-600/50">
175
+ <div class="text-sm text-gray-400">Sessions</div>
176
+ <div id="total-sessions" class="text-xl font-bold text-green-400">0</div>
177
+ </div>
178
+ <div class="bg-gray-700/30 p-3 rounded-lg border border-gray-600/50">
179
+ <div class="text-sm text-gray-400">Break Time</div>
180
+ <div id="total-break" class="text-xl font-bold text-green-400">0 min</div>
181
+ </div>
182
+ <div class="bg-gray-700/30 p-3 rounded-lg border border-gray-600/50">
183
+ <div class="text-sm text-gray-400">Productivity</div>
184
+ <div id="productivity" class="text-xl font-bold text-blue-400">100%</div>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Info Modal -->
192
+ <div id="info-modal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center hidden z-50">
193
+ <div class="bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4">
194
+ <div class="flex justify-between items-center mb-4">
195
+ <h3 class="text-xl font-bold text-blue-400">About Study Stopwatch</h3>
196
+ <button id="close-modal" class="text-gray-400 hover:text-white">
197
+ <i class="fas fa-times"></i>
198
+ </button>
199
+ </div>
200
+ <div class="space-y-3 text-gray-300">
201
+ <p>This stopwatch helps you track your study sessions using the Pomodoro technique.</p>
202
+ <p><span class="text-blue-400 font-semibold">How to use:</span></p>
203
+ <ul class="list-disc pl-5 space-y-1">
204
+ <li>Set your preferred study and break durations</li>
205
+ <li>Click Start to begin your study session</li>
206
+ <li>The timer will automatically switch between study and break periods</li>
207
+ <li>Completed sessions are recorded in the history panel</li>
208
+ <li>Track your productivity with the statistics panel</li>
209
+ </ul>
210
+ <p class="pt-2 text-sm text-gray-400">Stay focused and productive!</p>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <script>
216
+ // DOM Elements
217
+ const display = document.getElementById('display');
218
+ const startBtn = document.getElementById('startBtn');
219
+ const pauseBtn = document.getElementById('pauseBtn');
220
+ const resetBtn = document.getElementById('resetBtn');
221
+ const progressCircle = document.getElementById('progress-circle');
222
+ const statusText = document.getElementById('status');
223
+ const sessionList = document.getElementById('session-list');
224
+ const studyTimeInput = document.getElementById('study-time');
225
+ const breakTimeInput = document.getElementById('break-time');
226
+ const themeToggle = document.getElementById('theme-toggle');
227
+ const infoBtn = document.getElementById('info-btn');
228
+ const infoModal = document.getElementById('info-modal');
229
+ const closeModal = document.getElementById('close-modal');
230
+ const totalStudyElement = document.getElementById('total-study');
231
+ const totalSessionsElement = document.getElementById('total-sessions');
232
+ const totalBreakElement = document.getElementById('total-break');
233
+ const productivityElement = document.getElementById('productivity');
234
+
235
+ // Timer variables
236
+ let startTime;
237
+ let elapsedTime = 0;
238
+ let timerInterval;
239
+ let isRunning = false;
240
+ let isStudyTime = true;
241
+ let studyDuration = 25 * 60 * 1000; // 25 minutes in milliseconds
242
+ let breakDuration = 5 * 60 * 1000; // 5 minutes in milliseconds
243
+ let targetTime = studyDuration;
244
+
245
+ // Statistics variables
246
+ let totalStudyTime = 0;
247
+ let totalBreakTime = 0;
248
+ let sessionCount = 0;
249
+
250
+ // Initialize
251
+ updateDisplay(0);
252
+ updateProgressCircle(0);
253
+ updateStatistics();
254
+
255
+ // Event Listeners
256
+ startBtn.addEventListener('click', startTimer);
257
+ pauseBtn.addEventListener('click', pauseTimer);
258
+ resetBtn.addEventListener('click', resetTimer);
259
+ studyTimeInput.addEventListener('change', updateSettings);
260
+ breakTimeInput.addEventListener('change', updateSettings);
261
+ themeToggle.addEventListener('click', toggleTheme);
262
+ infoBtn.addEventListener('click', () => infoModal.classList.remove('hidden'));
263
+ closeModal.addEventListener('click', () => infoModal.classList.add('hidden'));
264
+
265
+ // Timer functions
266
+ function startTimer() {
267
+ if (!isRunning) {
268
+ startTime = Date.now() - elapsedTime;
269
+ timerInterval = setInterval(updateTimer, 10);
270
+ isRunning = true;
271
+ startBtn.classList.add('hidden');
272
+ pauseBtn.classList.remove('hidden');
273
+ statusText.textContent = isStudyTime ? 'Studying' : 'Break Time';
274
+ }
275
+ }
276
+
277
+ function pauseTimer() {
278
+ if (isRunning) {
279
+ clearInterval(timerInterval);
280
+ isRunning = false;
281
+ startBtn.classList.remove('hidden');
282
+ pauseBtn.classList.add('hidden');
283
+ statusText.textContent = 'Paused';
284
+ }
285
+ }
286
+
287
+ function resetTimer() {
288
+ clearInterval(timerInterval);
289
+ isRunning = false;
290
+ elapsedTime = 0;
291
+ updateDisplay(elapsedTime);
292
+ updateProgressCircle(0);
293
+ startBtn.classList.remove('hidden');
294
+ pauseBtn.classList.add('hidden');
295
+ statusText.textContent = 'Ready';
296
+ isStudyTime = true;
297
+ targetTime = studyDuration;
298
+ }
299
+
300
+ function updateTimer() {
301
+ elapsedTime = Date.now() - startTime;
302
+
303
+ if (elapsedTime >= targetTime) {
304
+ // Time's up - switch modes
305
+ clearInterval(timerInterval);
306
+ isRunning = false;
307
+
308
+ // Add to session history and statistics
309
+ if (isStudyTime) {
310
+ totalStudyTime += studyDuration;
311
+ sessionCount++;
312
+ } else {
313
+ totalBreakTime += breakDuration;
314
+ }
315
+ addSessionToHistory();
316
+ updateStatistics();
317
+
318
+ // Switch between study and break
319
+ isStudyTime = !isStudyTime;
320
+ elapsedTime = 0;
321
+ targetTime = isStudyTime ? studyDuration : breakDuration;
322
+
323
+ // Update UI
324
+ statusText.textContent = isStudyTime ? 'Study Time!' : 'Break Time!';
325
+ startBtn.classList.remove('hidden');
326
+ pauseBtn.classList.add('hidden');
327
+
328
+ // Show notification
329
+ showTimeUpNotification();
330
+
331
+ return;
332
+ }
333
+
334
+ updateDisplay(elapsedTime);
335
+ updateProgressCircle(elapsedTime / targetTime * 100);
336
+ }
337
+
338
+ function updateDisplay(time) {
339
+ const hours = Math.floor(time / 3600000);
340
+ const minutes = Math.floor((time % 3600000) / 60000);
341
+ const seconds = Math.floor((time % 60000) / 1000);
342
+
343
+ display.textContent =
344
+ `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
345
+ }
346
+
347
+ function updateProgressCircle(percent) {
348
+ const circumference = 251.2; // 2 * π * r (where r=40)
349
+ const offset = circumference - (percent / 100) * circumference;
350
+ progressCircle.style.strokeDashoffset = offset;
351
+
352
+ // Change color based on mode
353
+ progressCircle.classList.remove('text-blue-500', 'text-green-500');
354
+ progressCircle.classList.add(isStudyTime ? 'text-blue-500' : 'text-green-500');
355
+ }
356
+
357
+ function updateStatistics() {
358
+ totalStudyElement.textContent = `${Math.floor(totalStudyTime / 60000)} min`;
359
+ totalBreakElement.textContent = `${Math.floor(totalBreakTime / 60000)} min`;
360
+ totalSessionsElement.textContent = sessionCount;
361
+
362
+ // Calculate productivity percentage
363
+ const totalTime = totalStudyTime + totalBreakTime;
364
+ const productivity = totalTime > 0 ? Math.round((totalStudyTime / totalTime) * 100) : 100;
365
+ productivityElement.textContent = `${productivity}%`;
366
+ }
367
+
368
+ function addSessionToHistory() {
369
+ const sessionItem = document.createElement('div');
370
+ sessionItem.className = 'session-item bg-gray-700/50 p-3 rounded-lg flex justify-between items-center border border-gray-600/50 fade-in';
371
+
372
+ const sessionType = document.createElement('span');
373
+ sessionType.className = 'font-medium';
374
+ sessionType.textContent = isStudyTime ? 'Break' : 'Study';
375
+ sessionType.classList.add(isStudyTime ? 'text-green-400' : 'text-blue-400');
376
+
377
+ const sessionDuration = document.createElement('span');
378
+ sessionDuration.className = 'text-sm text-gray-300';
379
+
380
+ const duration = isStudyTime ? breakDuration : studyDuration;
381
+ const minutes = Math.floor(duration / 60000);
382
+ sessionDuration.textContent = `${minutes} min`;
383
+
384
+ const sessionTime = document.createElement('span');
385
+ sessionTime.className = 'text-xs text-gray-400';
386
+ sessionTime.textContent = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
387
+
388
+ sessionItem.appendChild(sessionType);
389
+ sessionItem.appendChild(sessionDuration);
390
+ sessionItem.appendChild(sessionTime);
391
+
392
+ sessionList.prepend(sessionItem);
393
+
394
+ // Limit to 15 sessions
395
+ if (sessionList.children.length > 15) {
396
+ sessionList.removeChild(sessionList.lastChild);
397
+ }
398
+ }
399
+
400
+ function updateSettings() {
401
+ studyDuration = parseInt(studyTimeInput.value) * 60 * 1000;
402
+ breakDuration = parseInt(breakTimeInput.value) * 60 * 1000;
403
+
404
+ if (!isRunning) {
405
+ targetTime = isStudyTime ? studyDuration : breakDuration;
406
+ updateDisplay(0);
407
+ updateProgressCircle(0);
408
+ }
409
+ }
410
+
411
+ function showTimeUpNotification() {
412
+ const notification = document.createElement('div');
413
+ notification.className = 'fixed bottom-4 right-4 bg-gray-800 border-l-4 border-blue-500 text-white px-4 py-3 rounded shadow-lg flex items-center';
414
+
415
+ const icon = document.createElement('i');
416
+ icon.className = 'fas fa-bell mr-3 text-blue-400';
417
+
418
+ const text = document.createElement('div');
419
+ text.textContent = isStudyTime ? 'Time for a break!' : 'Back to study!';
420
+
421
+ notification.appendChild(icon);
422
+ notification.appendChild(text);
423
+ document.body.appendChild(notification);
424
+
425
+ setTimeout(() => {
426
+ notification.classList.add('opacity-0', 'transition-opacity', 'duration-500');
427
+ setTimeout(() => notification.remove(), 500);
428
+ }, 3000);
429
+ }
430
+
431
+ function toggleTheme() {
432
+ const icon = themeToggle.querySelector('i');
433
+ if (document.documentElement.classList.contains('dark')) {
434
+ document.documentElement.classList.remove('dark');
435
+ document.body.classList.remove('bg-gray-900');
436
+ document.body.classList.add('bg-gray-100');
437
+ icon.classList.replace('fa-moon', 'fa-sun');
438
+ } else {
439
+ document.documentElement.classList.add('dark');
440
+ document.body.classList.remove('bg-gray-100');
441
+ document.body.classList.add('bg-gray-900');
442
+ icon.classList.replace('fa-sun', 'fa-moon');
443
+ }
444
+ }
445
+
446
+ // Initialize dark theme
447
+ document.documentElement.classList.add('dark');
448
+ </script>
449
+ <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=shubham6924/study-stopwatch" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
450
+ </html>