Hugging Face's logo

Spaces:
shubham6924
/
stopwatch
Running

App Files Community
shubham6924 commited on
Commit
4a375a0
·
verified ·
1 Parent(s): 191137b

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1718 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Stopwatch
3
- emoji: 📉
4
- colorFrom: yellow
5
- colorTo: yellow
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: stopwatch
3
+ emoji: 🐳
4
+ colorFrom: blue
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,1718 @@
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 Pro</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
14
+ }
15
+
16
+ body {
17
+ background: linear-gradient(135deg, #111827, #1f2937);
18
+ color: #e5e7eb;
19
+ min-height: 100vh;
20
+ padding: 16px;
21
+ }
22
+
23
+ .container {
24
+ max-width: 1600px;
25
+ height: 90vh;
26
+ margin: 0 auto;
27
+ background: linear-gradient(135deg, rgba(17, 24, 39, 0.9), rgba(31, 41, 55, 0.9));
28
+ border-radius: 16px;
29
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
30
+ overflow: hidden;
31
+ display: flex;
32
+ flex-direction: column;
33
+ border: 1px solid #374151;
34
+ }
35
+
36
+ .header {
37
+ background: linear-gradient(90deg, rgba(55, 65, 81, 0.9), rgba(31, 41, 55, 0.9));
38
+ padding: 16px 24px;
39
+ border-bottom: 1px solid #374151;
40
+ display: flex;
41
+ justify-content: space-between;
42
+ align-items: center;
43
+ }
44
+
45
+ .header h1 {
46
+ font-size: 24px;
47
+ font-weight: bold;
48
+ color: #818cf8;
49
+ text-shadow: 0 0 15px rgba(99, 102, 241, 0.8);
50
+ }
51
+
52
+ .header .icons {
53
+ display: flex;
54
+ gap: 16px;
55
+ }
56
+
57
+ .header .icons button {
58
+ background: none;
59
+ border: none;
60
+ color: #9ca3af;
61
+ font-size: 18px;
62
+ cursor: pointer;
63
+ transition: color 0.3s ease;
64
+ }
65
+
66
+ .header .icons button:hover {
67
+ color: #818cf8;
68
+ }
69
+
70
+ .main-content {
71
+ display: flex;
72
+ flex: 1;
73
+ }
74
+
75
+ .timer-panel {
76
+ width: 33.33%;
77
+ border-right: 1px solid #374151;
78
+ padding: 24px;
79
+ display: flex;
80
+ flex-direction: column;
81
+ align-items: center;
82
+ }
83
+
84
+ .timer-display {
85
+ position: relative;
86
+ width: 256px;
87
+ height: 256px;
88
+ margin-bottom: 32px;
89
+ }
90
+
91
+ .timer-svg {
92
+ width: 100%;
93
+ height: 100%;
94
+ }
95
+
96
+ .timer-bg {
97
+ stroke: #374151;
98
+ stroke-width: 8;
99
+ fill: transparent;
100
+ }
101
+
102
+ .timer-progress {
103
+ stroke-width: 8;
104
+ fill: transparent;
105
+ transition: stroke-dashoffset 0.35s, stroke 0.35s;
106
+ transform: rotate(-90deg);
107
+ transform-origin: 50% 50%;
108
+ }
109
+
110
+ .timer-info {
111
+ position: absolute;
112
+ inset: 0;
113
+ display: flex;
114
+ flex-direction: column;
115
+ align-items: center;
116
+ justify-content: center;
117
+ }
118
+
119
+ .timer-info .time {
120
+ font-size: 48px;
121
+ font-weight: bold;
122
+ font-family: 'Courier New', monospace;
123
+ margin-bottom: 8px;
124
+ }
125
+
126
+ .timer-info .status {
127
+ font-size: 16px;
128
+ text-transform: uppercase;
129
+ letter-spacing: 1px;
130
+ color: #818cf8;
131
+ }
132
+
133
+ .controls {
134
+ display: flex;
135
+ gap: 16px;
136
+ margin-bottom: 24px;
137
+ }
138
+
139
+ .btn {
140
+ padding: 12px 24px;
141
+ border: none;
142
+ border-radius: 50px;
143
+ font-weight: bold;
144
+ text-transform: uppercase;
145
+ letter-spacing: 1px;
146
+ cursor: pointer;
147
+ transition: all 0.3s ease;
148
+ display: flex;
149
+ align-items: center;
150
+ font-size: 14px;
151
+ }
152
+
153
+ .btn i {
154
+ margin-right: 8px;
155
+ }
156
+
157
+ .btn-start {
158
+ background: linear-gradient(135deg, rgba(79, 70, 229, 0.9), rgba(99, 102, 241, 0.9));
159
+ color: white;
160
+ box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
161
+ }
162
+
163
+ .btn-start:hover {
164
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.9), rgba(79, 70, 229, 0.9));
165
+ transform: translateY(-2px);
166
+ box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6);
167
+ }
168
+
169
+ .btn-pause {
170
+ background-color: #6b7280;
171
+ color: white;
172
+ box-shadow: 0 4px 15px rgba(107, 114, 128, 0.4);
173
+ }
174
+
175
+ .btn-pause:hover {
176
+ background-color: #4b5563;
177
+ transform: translateY(-2px);
178
+ box-shadow: 0 8px 25px rgba(107, 114, 128, 0.6);
179
+ }
180
+
181
+ .btn-reset {
182
+ background: linear-gradient(135deg, rgba(236, 72, 153, 0.9), rgba(239, 68, 68, 0.9));
183
+ color: white;
184
+ box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
185
+ }
186
+
187
+ .btn-reset:hover {
188
+ background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(236, 72, 153, 0.9));
189
+ transform: translateY(-2px);
190
+ box-shadow: 0 8px 25px rgba(236, 72, 153, 0.6);
191
+ }
192
+
193
+ .pulse {
194
+ animation: pulse 1.5s infinite cubic-bezier(0.4, 0, 0.6, 1);
195
+ }
196
+
197
+ @keyframes pulse {
198
+ 0%, 100% {
199
+ transform: scale(1);
200
+ box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
201
+ }
202
+ 50% {
203
+ transform: scale(1.05);
204
+ box-shadow: 0 0 0 12px rgba(99, 102, 241, 0);
205
+ }
206
+ }
207
+
208
+ .settings {
209
+ width: 100%;
210
+ padding: 16px;
211
+ background: linear-gradient(135deg, rgba(17, 24, 39, 0.9), rgba(31, 41, 55, 0.9));
212
+ border-radius: 12px;
213
+ border: 1px solid #374151;
214
+ }
215
+
216
+ .settings h2 {
217
+ font-size: 18px;
218
+ font-weight: 600;
219
+ color: #a5b4fc;
220
+ margin-bottom: 16px;
221
+ }
222
+
223
+ .settings-grid {
224
+ display: grid;
225
+ grid-template-columns: 1fr 1fr;
226
+ gap: 16px;
227
+ }
228
+
229
+ .form-group {
230
+ margin-bottom: 12px;
231
+ }
232
+
233
+ .form-group label {
234
+ display: block;
235
+ font-size: 14px;
236
+ color: #9ca3af;
237
+ margin-bottom: 6px;
238
+ }
239
+
240
+ .form-control {
241
+ width: 100%;
242
+ padding: 10px;
243
+ border: 1px solid #374151;
244
+ border-radius: 6px;
245
+ background-color: #374151;
246
+ color: white;
247
+ font-size: 14px;
248
+ }
249
+
250
+ .form-control:focus {
251
+ outline: none;
252
+ border-color: #818cf8;
253
+ box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
254
+ }
255
+
256
+ .auto-options {
257
+ margin-top: 16px;
258
+ }
259
+
260
+ .auto-options label {
261
+ display: flex;
262
+ align-items: center;
263
+ color: #9ca3af;
264
+ font-size: 14px;
265
+ cursor: pointer;
266
+ }
267
+
268
+ .auto-options input[type="checkbox"] {
269
+ margin-right: 8px;
270
+ accent-color: #818cf8;
271
+ }
272
+
273
+ .stats {
274
+ width: 100%;
275
+ padding: 16px;
276
+ background: linear-gradient(90deg, rgba(55, 65, 81, 0.9), rgba(31, 41, 55, 0.9));
277
+ border-radius: 12px;
278
+ border: 1px solid #374151;
279
+ margin-top: 24px;
280
+ }
281
+
282
+ .stats h2 {
283
+ font-size: 18px;
284
+ font-weight: 600;
285
+ color: #a5b4fc;
286
+ margin-bottom: 16px;
287
+ display: flex;
288
+ align-items: center;
289
+ }
290
+
291
+ .stats h2 i {
292
+ margin-right: 8px;
293
+ }
294
+
295
+ .stats-grid {
296
+ display: grid;
297
+ grid-template-columns: 1fr 1fr;
298
+ gap: 16px;
299
+ }
300
+
301
+ .stat-item {
302
+ background-color: rgba(55, 65, 81, 0.7);
303
+ padding: 12px;
304
+ border-radius: 8px;
305
+ border: 1px solid rgba(55, 65, 81, 0.5);
306
+ }
307
+
308
+ .stat-item .label {
309
+ font-size: 14px;
310
+ color: #9ca3af;
311
+ }
312
+
313
+ .stat-item .value {
314
+ font-size: 20px;
315
+ font-weight: bold;
316
+ margin-top: 4px;
317
+ }
318
+
319
+ .stat-item .value.study {
320
+ color: #818cf8;
321
+ }
322
+
323
+ .stat-item .value.sessions {
324
+ color: #10b981;
325
+ }
326
+
327
+ .stat-item .value.break {
328
+ color: #f59e0b;
329
+ }
330
+
331
+ .stat-item .value.rate {
332
+ color: #a855f7;
333
+ }
334
+
335
+ .history-panel {
336
+ width: 33.33%;
337
+ border-right: 1px solid #374151;
338
+ padding: 24px;
339
+ }
340
+
341
+ .history-header {
342
+ display: flex;
343
+ justify-content: space-between;
344
+ align-items: center;
345
+ margin-bottom: 16px;
346
+ }
347
+
348
+ .history-header h2 {
349
+ font-size: 18px;
350
+ font-weight: 600;
351
+ color: #a5b4fc;
352
+ display: flex;
353
+ align-items: center;
354
+ }
355
+
356
+ .history-header h2 i {
357
+ margin-right: 8px;
358
+ }
359
+
360
+ .history-actions {
361
+ display: flex;
362
+ gap: 8px;
363
+ }
364
+
365
+ .history-actions button {
366
+ background: none;
367
+ border: none;
368
+ color: #9ca3af;
369
+ font-size: 12px;
370
+ cursor: pointer;
371
+ display: flex;
372
+ align-items: center;
373
+ transition: color 0.3s ease;
374
+ }
375
+
376
+ .history-actions button:hover {
377
+ color: #818cf8;
378
+ }
379
+
380
+ .history-actions button i {
381
+ margin-right: 4px;
382
+ }
383
+
384
+ .session-list {
385
+ height: calc(100% - 40px);
386
+ overflow-y: auto;
387
+ padding-right: 8px;
388
+ }
389
+
390
+ .session-list::-webkit-scrollbar {
391
+ width: 6px;
392
+ }
393
+
394
+ .session-list::-webkit-scrollbar-track {
395
+ background: #1f2937;
396
+ border-radius: 3px;
397
+ }
398
+
399
+ .session-list::-webkit-scrollbar-thumb {
400
+ background: #374151;
401
+ border-radius: 3px;
402
+ }
403
+
404
+ .session-item {
405
+ background-color: rgba(55, 65, 81, 0.5);
406
+ padding: 12px;
407
+ border-radius: 8px;
408
+ border: 1px solid rgba(55, 65, 81, 0.3);
409
+ margin-bottom: 12px;
410
+ display: flex;
411
+ justify-content: space-between;
412
+ align-items: center;
413
+ transition: all 0.3s ease;
414
+ }
415
+
416
+ .session-item:hover {
417
+ transform: translateX(6px);
418
+ background-color: rgba(55, 65, 81, 0.7);
419
+ }
420
+
421
+ .session-type {
422
+ font-weight: 500;
423
+ }
424
+
425
+ .session-type.study {
426
+ color: #818cf8;
427
+ }
428
+
429
+ .session-type.break {
430
+ color: #10b981;
431
+ }
432
+
433
+ .session-duration {
434
+ font-size: 14px;
435
+ color: #9ca3af;
436
+ }
437
+
438
+ .session-time {
439
+ font-size: 12px;
440
+ color: #6b7280;
441
+ }
442
+
443
+ .notes-panel {
444
+ width: 33.33%;
445
+ padding: 24px;
446
+ display: flex;
447
+ flex-direction: column;
448
+ }
449
+
450
+ .tabs {
451
+ display: flex;
452
+ border-bottom: 1px solid #374151;
453
+ margin-bottom: 16px;
454
+ }
455
+
456
+ .tab {
457
+ padding: 8px 16px;
458
+ font-size: 14px;
459
+ font-weight: 500;
460
+ cursor: pointer;
461
+ border-bottom: 2px solid transparent;
462
+ transition: all 0.3s ease;
463
+ }
464
+
465
+ .tab.active {
466
+ color: #818cf8;
467
+ border-bottom-color: #818cf8;
468
+ }
469
+
470
+ .tab:hover {
471
+ color: #a5b4fc;
472
+ }
473
+
474
+ .notes-content, .checklist-content {
475
+ flex: 1;
476
+ overflow-y: auto;
477
+ padding-right: 8px;
478
+ }
479
+
480
+ .notes-content::-webkit-scrollbar, .checklist-content::-webkit-scrollbar {
481
+ width: 6px;
482
+ }
483
+
484
+ .notes-content::-webkit-scrollbar-track, .checklist-content::-webkit-scrollbar-track {
485
+ background: #1f2937;
486
+ border-radius: 3px;
487
+ }
488
+
489
+ .notes-content::-webkit-scrollbar-thumb, .checklist-content::-webkit-scrollbar-thumb {
490
+ background: #374151;
491
+ border-radius: 3px;
492
+ }
493
+
494
+ .note-form {
495
+ display: flex;
496
+ margin-bottom: 16px;
497
+ gap: 8px;
498
+ }
499
+
500
+ .note-title {
501
+ flex: 1;
502
+ padding: 10px;
503
+ border: 1px solid #374151;
504
+ border-radius: 6px 0 0 6px;
505
+ background-color: #374151;
506
+ color: white;
507
+ }
508
+
509
+ .note-title:focus {
510
+ outline: none;
511
+ border-color: #818cf8;
512
+ }
513
+
514
+ .add-note-btn {
515
+ background-color: #818cf8;
516
+ color: white;
517
+ border: none;
518
+ padding: 0 16px;
519
+ border-radius: 0 6px 6px 0;
520
+ cursor: pointer;
521
+ transition: background-color 0.3s ease;
522
+ }
523
+
524
+ .add-note-btn:hover {
525
+ background-color: #6366f1;
526
+ }
527
+
528
+ .note-item {
529
+ background-color: rgba(55, 65, 81, 0.5);
530
+ padding: 16px;
531
+ border-radius: 8px;
532
+ border: 1px solid rgba(55, 65, 81, 0.3);
533
+ margin-bottom: 12px;
534
+ transition: all 0.3s ease;
535
+ cursor: pointer;
536
+ }
537
+
538
+ .note-item:hover {
539
+ transform: translateY(-2px);
540
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
541
+ }
542
+
543
+ .note-title-text {
544
+ font-weight: 500;
545
+ margin-bottom: 8px;
546
+ color: white;
547
+ }
548
+
549
+ .note-content {
550
+ font-size: 14px;
551
+ color: #9ca3af;
552
+ margin-bottom: 8px;
553
+ display: -webkit-box;
554
+ -webkit-line-clamp: 2;
555
+ -webkit-box-orient: vertical;
556
+ overflow: hidden;
557
+ }
558
+
559
+ .note-empty {
560
+ color: #6b7280;
561
+ }
562
+
563
+ .note-time {
564
+ font-size: 12px;
565
+ color: #6b7280;
566
+ }
567
+
568
+ .checklist-form {
569
+ display: flex;
570
+ margin-bottom: 16px;
571
+ gap: 8px;
572
+ }
573
+
574
+ .task-input {
575
+ flex: 1;
576
+ padding: 10px;
577
+ border: 1px solid #374151;
578
+ border-radius: 6px 0 0 6px;
579
+ background-color: #374151;
580
+ color: white;
581
+ }
582
+
583
+ .task-input:focus {
584
+ outline: none;
585
+ border-color: #10b981;
586
+ }
587
+
588
+ .priority-select {
589
+ padding: 10px;
590
+ border: 1px solid #374151;
591
+ border-left: none;
592
+ background-color: #374151;
593
+ color: white;
594
+ border-radius: 0 6px 6px 0;
595
+ }
596
+
597
+ .priority-select:focus {
598
+ outline: none;
599
+ border-color: #10b981;
600
+ }
601
+
602
+ .add-task-btn {
603
+ background-color: #10b981;
604
+ color: white;
605
+ border: none;
606
+ padding: 0 16px;
607
+ border-radius: 6px;
608
+ cursor: pointer;
609
+ transition: background-color 0.3s ease;
610
+ }
611
+
612
+ .add-task-btn:hover {
613
+ background-color: #059669;
614
+ }
615
+
616
+ .check-item {
617
+ background-color: rgba(55, 65, 81, 0.5);
618
+ padding: 12px;
619
+ border-radius: 8px;
620
+ border: 1px solid rgba(55, 65, 81, 0.3);
621
+ margin-bottom: 12px;
622
+ cursor: pointer;
623
+ transition: all 0.3s ease;
624
+ position: relative;
625
+ border-left-width: 4px;
626
+ }
627
+
628
+ .check-item.high {
629
+ border-left-color: #ef4444;
630
+ }
631
+
632
+ .check-item.medium {
633
+ border-left-color: #f59e0b;
634
+ }
635
+
636
+ .check-item.low {
637
+ border-left-color: #10b981;
638
+ }
639
+
640
+ .check-item.completed {
641
+ opacity: 0.6;
642
+ text-decoration: line-through;
643
+ }
644
+
645
+ .check-item:hover {
646
+ transform: translateX(6px);
647
+ background-color: rgba(55, 65, 81, 0.7);
648
+ }
649
+
650
+ .check-content {
651
+ display: flex;
652
+ align-items: center;
653
+ }
654
+
655
+ .check-checkbox {
656
+ width: 20px;
657
+ height: 20px;
658
+ border: 2px solid #4b5563;
659
+ border-radius: 4px;
660
+ margin-right: 12px;
661
+ display: flex;
662
+ align-items: center;
663
+ justify-content: center;
664
+ flex-shrink: 0;
665
+ }
666
+
667
+ .check-item.completed .check-checkbox {
668
+ background-color: #10b981;
669
+ border-color: #10b981;
670
+ }
671
+
672
+ .check-checkbox i {
673
+ color: white;
674
+ font-size: 12px;
675
+ opacity: 0;
676
+ }
677
+
678
+ .check-item.completed .check-checkbox i {
679
+ opacity: 1;
680
+ }
681
+
682
+ .check-text {
683
+ flex: 1;
684
+ font-size: 14px;
685
+ }
686
+
687
+ .task-actions {
688
+ display: flex;
689
+ gap: 8px;
690
+ opacity: 0;
691
+ transition: opacity 0.3s ease;
692
+ }
693
+
694
+ .check-item:hover .task-actions {
695
+ opacity: 1;
696
+ }
697
+
698
+ .task-actions button {
699
+ background: none;
700
+ border: none;
701
+ color: #9ca3af;
702
+ font-size: 12px;
703
+ cursor: pointer;
704
+ transition: color 0.3s ease;
705
+ }
706
+
707
+ .task-actions button:hover {
708
+ color: #818cf8;
709
+ }
710
+
711
+ .task-actions .priority-icon {
712
+ font-size: 14px;
713
+ }
714
+
715
+ .task-actions .priority-icon.high {
716
+ color: #ef4444;
717
+ }
718
+
719
+ .task-actions .priority-icon.medium {
720
+ color: #f59e0b;
721
+ }
722
+
723
+ .task-actions .priority-icon.low {
724
+ color: #10b981;
725
+ }
726
+
727
+ .task-stats {
728
+ margin-top: 16px;
729
+ padding-top: 16px;
730
+ border-top: 1px solid #374151;
731
+ }
732
+
733
+ .task-counts {
734
+ display: flex;
735
+ justify-content: space-between;
736
+ font-size: 14px;
737
+ color: #9ca3af;
738
+ margin-bottom: 8px;
739
+ }
740
+
741
+ .progress-bar {
742
+ width: 100%;
743
+ height: 8px;
744
+ background-color: #374151;
745
+ border-radius: 4px;
746
+ overflow: hidden;
747
+ }
748
+
749
+ .progress-fill {
750
+ height: 100%;
751
+ background-color: #10b981;
752
+ border-radius: 4px;
753
+ width: 0%;
754
+ transition: width 0.5s ease;
755
+ }
756
+
757
+ .modal {
758
+ position: fixed;
759
+ inset: 0;
760
+ background-color: rgba(0, 0, 0, 0.7);
761
+ display: flex;
762
+ align-items: center;
763
+ justify-content: center;
764
+ z-index: 1000;
765
+ opacity: 0;
766
+ pointer-events: none;
767
+ transition: opacity 0.3s ease;
768
+ }
769
+
770
+ .modal.show {
771
+ opacity: 1;
772
+ pointer-events: auto;
773
+ }
774
+
775
+ .modal-content {
776
+ background-color: #1f2937;
777
+ padding: 24px;
778
+ border-radius: 12px;
779
+ max-width: 500px;
780
+ width: 100%;
781
+ margin: 20px;
782
+ border: 1px solid #374151;
783
+ }
784
+
785
+ .modal-header {
786
+ display: flex;
787
+ justify-content: space-between;
788
+ align-items: center;
789
+ margin-bottom: 16px;
790
+ }
791
+
792
+ .modal-header h3 {
793
+ font-size: 20px;
794
+ font-weight: 600;
795
+ color: #818cf8;
796
+ }
797
+
798
+ .modal-close {
799
+ background: none;
800
+ border: none;
801
+ color: #9ca3af;
802
+ font-size: 20px;
803
+ cursor: pointer;
804
+ transition: color 0.3s ease;
805
+ }
806
+
807
+ .modal-close:hover {
808
+ color: white;
809
+ }
810
+
811
+ .modal-body p {
812
+ margin-bottom: 16px;
813
+ color: #e5e7eb;
814
+ }
815
+
816
+ .modal-body .highlight {
817
+ color: #818cf8;
818
+ font-weight: 600;
819
+ }
820
+
821
+ .modal-body ul {
822
+ list-style-type: disc;
823
+ padding-left: 20px;
824
+ margin-bottom: 16px;
825
+ }
826
+
827
+ .modal-body li {
828
+ margin-bottom: 8px;
829
+ color: #e5e7eb;
830
+ }
831
+
832
+ .toast {
833
+ position: fixed;
834
+ bottom: 16px;
835
+ right: 16px;
836
+ background-color: #1f2937;
837
+ border-left: 4px solid #818cf8;
838
+ color: white;
839
+ padding: 16px 20px;
840
+ border-radius: 8px;
841
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
842
+ display: flex;
843
+ align-items: center;
844
+ z-index: 1000;
845
+ transform: translateY(100px);
846
+ opacity: 0;
847
+ transition: all 0.5s ease;
848
+ }
849
+
850
+ .toast.show {
851
+ transform: translateY(0);
852
+ opacity: 1;
853
+ }
854
+
855
+ .toast i {
856
+ margin-right: 12px;
857
+ color: #818cf8;
858
+ }
859
+
860
+ @media (max-width: 1200px) {
861
+ .container {
862
+ height: auto;
863
+ min-height: 90vh;
864
+ }
865
+
866
+ .main-content {
867
+ flex-direction: column;
868
+ }
869
+
870
+ .timer-panel, .history-panel, .notes-panel {
871
+ width: 100%;
872
+ border-right: none;
873
+ border-bottom: 1px solid #374151;
874
+ }
875
+
876
+ .timer-panel {
877
+ padding-bottom: 16px;
878
+ }
879
+
880
+ .history-panel {
881
+ max-height: 300px;
882
+ }
883
+
884
+ .notes-panel {
885
+ max-height: 300px;
886
+ }
887
+ }
888
+ </style>
889
+ </head>
890
+ <body>
891
+ <div class="container">
892
+ <!-- Header -->
893
+ <div class="header">
894
+ <h1>Study Stopwatch Pro</h1>
895
+ <div class="icons">
896
+ <button id="theme-toggle"><i class="fas fa-moon"></i></button>
897
+ <button id="info-btn"><i class="fas fa-info-circle"></i></button>
898
+ <button id="fullscreen-btn"><i class="fas fa-expand"></i></button>
899
+ </div>
900
+ </div>
901
+
902
+ <!-- Main Content -->
903
+ <div class="main-content">
904
+ <!-- Timer Panel -->
905
+ <div class="timer-panel">
906
+ <!-- Timer Display -->
907
+ <div class="timer-display">
908
+ <svg class="timer-svg" viewBox="0 0 100 100">
909
+ <circle class="timer-bg" r="40" cx="50" cy="50" />
910
+ <circle id="progress-circle" class="timer-progress" r="40" cx="50" cy="50"
911
+ stroke-dasharray="251.2" stroke-dashoffset="251.2" />
912
+ </svg>
913
+ <div class="timer-info">
914
+ <div id="display" class="time">00:00:00</div>
915
+ <div id="status" class="status">Ready</div>
916
+ </div>
917
+ </div>
918
+
919
+ <!-- Controls -->
920
+ <div class="controls">
921
+ <button id="startBtn" class="btn btn-start pulse">
922
+ <i class="fas fa-play"></i>Start
923
+ </button>
924
+ <button id="pauseBtn" class="btn btn-pause" style="display: none;">
925
+ <i class="fas fa-pause"></i>Pause
926
+ </button>
927
+ <button id="resetBtn" class="btn btn-reset">
928
+ <i class="fas fa-redo"></i>Reset
929
+ </button>
930
+ </div>
931
+
932
+ <!-- Settings -->
933
+ <div class="settings">
934
+ <h2>Study Settings</h2>
935
+ <div class="settings-grid">
936
+ <div class="form-group">
937
+ <label for="study-time">Study Duration (min)</label>
938
+ <input type="number" id="study-time" class="form-control" min="1" max="120" value="25">
939
+ </div>
940
+ <div class="form-group">
941
+ <label for="break-time">Break Duration (min)</label>
942
+ <input type="number" id="break-time" class="form-control" min="1" max="30" value="5">
943
+ </div>
944
+ </div>
945
+ <div class="auto-options">
946
+ <label>
947
+ <input type="checkbox" id="auto-start-break" checked>
948
+ Auto-start break after study
949
+ </label>
950
+ <label>
951
+ <input type="checkbox" id="auto-start-study" checked>
952
+ Auto-start study after break
953
+ </label>
954
+ </div>
955
+ </div>
956
+
957
+ <!-- Statistics -->
958
+ <div class="stats">
959
+ <h2><i class="fas fa-chart-bar"></i> Today's Stats</h2>
960
+ <div class="stats-grid">
961
+ <div class="stat-item">
962
+ <div class="label">Study Time</div>
963
+ <div id="total-study" class="value study">0 min</div>
964
+ </div>
965
+ <div class="stat-item">
966
+ <div class="label">Sessions</div>
967
+ <div id="total-sessions" class="value sessions">0</div>
968
+ </div>
969
+ <div class="stat-item">
970
+ <div class="label">Break Time</div>
971
+ <div id="total-break" class="value break">0 min</div>
972
+ </div>
973
+ <div class="stat-item">
974
+ <div class="label">Focus Rate</div>
975
+ <div id="focus-rate" class="value rate">0%</div>
976
+ </div>
977
+ </div>
978
+ </div>
979
+ </div>
980
+
981
+ <!-- History Panel -->
982
+ <div class="history-panel">
983
+ <div class="history-header">
984
+ <h2><i class="fas fa-history"></i> Session History</h2>
985
+ <div class="history-actions">
986
+ <button id="clear-sessions"><i class="fas fa-trash"></i> Clear</button>
987
+ <button id="export-sessions"><i class="fas fa-file-export"></i> Export</button>
988
+ </div>
989
+ </div>
990
+ <div id="session-list" class="session-list">
991
+ <!-- Sessions will be added here -->
992
+ </div>
993
+ </div>
994
+
995
+ <!-- Notes & Checklist Panel -->
996
+ <div class="notes-panel">
997
+ <div class="tabs">
998
+ <div id="notes-tab" class="tab active">Notes</div>
999
+ <div id="checklist-tab" class="tab">Checklist</div>
1000
+ </div>
1001
+
1002
+ <!-- Notes Content -->
1003
+ <div id="notes-content" class="notes-content">
1004
+ <div class="note-form">
1005
+ <input type="text" id="note-title" class="note-title" placeholder="Note title...">
1006
+ <button id="add-note" class="add-note-btn"><i class="fas fa-plus"></i></button>
1007
+ </div>
1008
+ <div id="notes-container">
1009
+ <!-- Notes will be added here -->
1010
+ </div>
1011
+ </div>
1012
+
1013
+ <!-- Checklist Content -->
1014
+ <div id="checklist-content" class="checklist-content" style="display: none;">
1015
+ <div class="checklist-form">
1016
+ <input type="text" id="task-input" class="task-input" placeholder="Add a task...">
1017
+ <select id="task-priority" class="priority-select">
1018
+ <option value="low">Low</option>
1019
+ <option value="medium">Medium</option>
1020
+ <option value="high">High</option>
1021
+ </select>
1022
+ <button id="add-task" class="add-task-btn"><i class="fas fa-plus"></i></button>
1023
+ </div>
1024
+ <div id="checklist-container">
1025
+ <!-- Tasks will be added here -->
1026
+ </div>
1027
+ <div class="task-stats">
1028
+ <div class="task-counts">
1029
+ <span id="task-count">0 tasks</span>
1030
+ <span id="completed-count">0 completed</span>
1031
+ </div>
1032
+ <div class="progress-bar">
1033
+ <div id="progress-bar" class="progress-fill"></div>
1034
+ </div>
1035
+ </div>
1036
+ </div>
1037
+ </div>
1038
+ </div>
1039
+ </div>
1040
+
1041
+ <!-- Info Modal -->
1042
+ <div id="info-modal" class="modal">
1043
+ <div class="modal-content">
1044
+ <div class="modal-header">
1045
+ <h3>About Study Stopwatch Pro</h3>
1046
+ <button id="close-modal" class="modal-close"><i class="fas fa-times"></i></button>
1047
+ </div>
1048
+ <div class="modal-body">
1049
+ <p>This advanced stopwatch helps you track your study sessions using the Pomodoro technique with enhanced features.</p>
1050
+ <p><span class="highlight">Features:</span></p>
1051
+ <ul>
1052
+ <li>Timer with visual progress indicator</li>
1053
+ <li>Customizable study and break durations</li>
1054
+ <li>Auto-start options for seamless transitions</li>
1055
+ <li>Session history with detailed statistics</li>
1056
+ <li>Notes system for capturing ideas</li>
1057
+ <li>Task checklist with priority levels</li>
1058
+ <li>Dark/light theme toggle</li>
1059
+ <li>Export session data</li>
1060
+ </ul>
1061
+ <p class="pt-2 text-sm text-gray-400">Stay focused and productive with all-in-one study tracking!</p>
1062
+ </div>
1063
+ </div>
1064
+ </div>
1065
+
1066
+ <!-- Toast Notification -->
1067
+ <div id="toast" class="toast">
1068
+ <i class="fas fa-bell"></i>
1069
+ <span id="toast-message"></span>
1070
+ </div>
1071
+
1072
+ <script>
1073
+ // DOM Elements
1074
+ const display = document.getElementById('display');
1075
+ const startBtn = document.getElementById('startBtn');
1076
+ const pauseBtn = document.getElementById('pauseBtn');
1077
+ const resetBtn = document.getElementById('resetBtn');
1078
+ const progressCircle = document.getElementById('progress-circle');
1079
+ const statusText = document.getElementById('status');
1080
+ const sessionList = document.getElementById('session-list');
1081
+ const studyTimeInput = document.getElementById('study-time');
1082
+ const breakTimeInput = document.getElementById('break-time');
1083
+ const themeToggle = document.getElementById('theme-toggle');
1084
+ const infoBtn = document.getElementById('info-btn');
1085
+ const closeModal = document.getElementById('close-modal');
1086
+ const infoModal = document.getElementById('info-modal');
1087
+ const notesTab = document.getElementById('notes-tab');
1088
+ const checklistTab = document.getElementById('checklist-tab');
1089
+ const notesContent = document.getElementById('notes-content');
1090
+ const checklistContent = document.getElementById('checklist-content');
1091
+ const noteTitle = document.getElementById('note-title');
1092
+ const addNoteBtn = document.getElementById('add-note');
1093
+ const notesContainer = document.getElementById('notes-container');
1094
+ const taskInput = document.getElementById('task-input');
1095
+ const taskPriority = document.getElementById('task-priority');
1096
+ const addTaskBtn = document.getElementById('add-task');
1097
+ const checklistContainer = document.getElementById('checklist-container');
1098
+ const taskCount = document.getElementById('task-count');
1099
+ const completedCount = document.getElementById('completed-count');
1100
+ const progressBar = document.getElementById('progress-bar');
1101
+ const totalStudy = document.getElementById('total-study');
1102
+ const totalSessions = document.getElementById('total-sessions');
1103
+ const totalBreak = document.getElementById('total-break');
1104
+ const focusRate = document.getElementById('focus-rate');
1105
+ const clearSessions = document.getElementById('clear-sessions');
1106
+ const exportSessions = document.getElementById('export-sessions');
1107
+ const autoStartBreak = document.getElementById('auto-start-break');
1108
+ const autoStartStudy = document.getElementById('auto-start-study');
1109
+ const toast = document.getElementById('toast');
1110
+ const toastMessage = document.getElementById('toast-message');
1111
+ const fullscreenBtn = document.getElementById('fullscreen-btn');
1112
+
1113
+ // Timer variables
1114
+ let startTime;
1115
+ let elapsedTime = 0;
1116
+ let timerInterval;
1117
+ let isRunning = false;
1118
+ let isStudyTime = true;
1119
+ let studyDuration = 25 * 60 * 1000; // 25 minutes in milliseconds
1120
+ let breakDuration = 5 * 60 * 1000; // 5 minutes in milliseconds
1121
+ let targetTime = studyDuration;
1122
+ let autoStartBreakEnabled = true;
1123
+ let autoStartStudyEnabled = true;
1124
+
1125
+ // Statistics variables
1126
+ let totalStudyTime = 0;
1127
+ let totalBreakTime = 0;
1128
+ let sessionCount = 0;
1129
+ let taskList = [];
1130
+ let notesList = [];
1131
+
1132
+ // Initialize
1133
+ updateDisplay(0);
1134
+ updateProgressCircle(0);
1135
+ updateStatistics();
1136
+ updateTaskStats();
1137
+ loadNotes();
1138
+ loadTasks();
1139
+
1140
+ // Event Listeners
1141
+ startBtn.addEventListener('click', startTimer);
1142
+ pauseBtn.addEventListener('click', pauseTimer);
1143
+ resetBtn.addEventListener('click', resetTimer);
1144
+ studyTimeInput.addEventListener('change', updateSettings);
1145
+ breakTimeInput.addEventListener('change', updateSettings);
1146
+ themeToggle.addEventListener('click', toggleTheme);
1147
+ infoBtn.addEventListener('click', () => infoModal.classList.add('show'));
1148
+ closeModal.addEventListener('click', () => infoModal.classList.remove('show'));
1149
+ notesTab.addEventListener('click', showNotes);
1150
+ checklistTab.addEventListener('click', showChecklist);
1151
+ addNoteBtn.addEventListener('click', addNote);
1152
+ addTaskBtn.addEventListener('click', addTask);
1153
+ clearSessions.addEventListener('click', clearSessionHistory);
1154
+ exportSessions.addEventListener('click', exportSessionData);
1155
+ autoStartBreak.addEventListener('change', () => autoStartBreakEnabled = autoStartBreak.checked);
1156
+ autoStartStudy.addEventListener('change', () => autoStartStudyEnabled = autoStartStudy.checked);
1157
+ fullscreenBtn.addEventListener('click', toggleFullscreen);
1158
+
1159
+ // Keyboard shortcuts
1160
+ document.addEventListener('keydown', (e) => {
1161
+ if (e.key === ' ') {
1162
+ e.preventDefault();
1163
+ if (isRunning) {
1164
+ pauseTimer();
1165
+ } else {
1166
+ startTimer();
1167
+ }
1168
+ } else if (e.key === 'r' || e.key === 'R') {
1169
+ resetTimer();
1170
+ }
1171
+ });
1172
+
1173
+ // Timer functions
1174
+ function startTimer() {
1175
+ if (!isRunning) {
1176
+ startTime = Date.now() - elapsedTime;
1177
+ timerInterval = setInterval(updateTimer, 10);
1178
+ isRunning = true;
1179
+ startBtn.classList.add('hidden');
1180
+ pauseBtn.style.display = 'flex';
1181
+ statusText.textContent = isStudyTime ? 'Studying' : 'On Break';
1182
+ statusText.className = 'status ' + (isStudyTime ? 'text-blue-400' : 'text-green-400');
1183
+ }
1184
+ }
1185
+
1186
+ function pauseTimer() {
1187
+ if (isRunning) {
1188
+ clearInterval(timerInterval);
1189
+ isRunning = false;
1190
+ startBtn.classList.remove('hidden');
1191
+ pauseBtn.style.display = 'none';
1192
+ statusText.textContent = 'Paused';
1193
+ }
1194
+ }
1195
+
1196
+ function resetTimer() {
1197
+ clearInterval(timerInterval);
1198
+ isRunning = false;
1199
+ elapsedTime = 0;
1200
+ updateDisplay(elapsedTime);
1201
+ updateProgressCircle(0);
1202
+ startBtn.classList.remove('hidden');
1203
+ pauseBtn.style.display = 'none';
1204
+ statusText.textContent = 'Ready';
1205
+ statusText.className = 'status text-blue-400';
1206
+ isStudyTime = true;
1207
+ targetTime = studyDuration;
1208
+ }
1209
+
1210
+ function updateTimer() {
1211
+ elapsedTime = Date.now() - startTime;
1212
+
1213
+ if (elapsedTime >= targetTime) {
1214
+ // Time's up - switch modes
1215
+ clearInterval(timerInterval);
1216
+ isRunning = false;
1217
+
1218
+ // Add to session history
1219
+ addSessionToHistory();
1220
+
1221
+ // Switch between study and break
1222
+ isStudyTime = !isStudyTime;
1223
+ elapsedTime = 0;
1224
+ targetTime = isStudyTime ? studyDuration : breakDuration;
1225
+
1226
+ // Update UI
1227
+ statusText.textContent = isStudyTime ? 'Study Time!' : 'Break Time!';
1228
+ statusText.className = 'status ' + (isStudyTime ? 'text-blue-400' : 'text-green-400');
1229
+
1230
+ // Auto-start next session if enabled
1231
+ if ((isStudyTime && autoStartStudyEnabled) || (!isStudyTime && autoStartBreakEnabled)) {
1232
+ setTimeout(() => {
1233
+ startTimer();
1234
+ }, 1500);
1235
+ } else {
1236
+ startBtn.classList.remove('hidden');
1237
+ pauseBtn.style.display = 'none';
1238
+ }
1239
+
1240
+ // Show notification
1241
+ showNotification(isStudyTime ? 'Back to study!' : 'Time for a break!');
1242
+
1243
+ return;
1244
+ }
1245
+
1246
+ updateDisplay(elapsedTime);
1247
+ updateProgressCircle(elapsedTime / targetTime * 100);
1248
+ }
1249
+
1250
+ function updateDisplay(time) {
1251
+ const hours = Math.floor(time / 3600000);
1252
+ const minutes = Math.floor((time % 3600000) / 60000);
1253
+ const seconds = Math.floor((time % 60000) / 1000);
1254
+
1255
+ display.textContent =
1256
+ `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
1257
+ }
1258
+
1259
+ function updateProgressCircle(percent) {
1260
+ const circumference = 251.2; // 2 * π * r (where r=40)
1261
+ const offset = circumference - (percent / 100) * circumference;
1262
+ progressCircle.style.strokeDashoffset = offset;
1263
+
1264
+ // Change color based on mode
1265
+ progressCircle.setAttribute('stroke', isStudyTime ? '#818cf8' : '#10b981');
1266
+ }
1267
+
1268
+ function updateSettings() {
1269
+ studyDuration = parseInt(studyTimeInput.value) * 60 * 1000;
1270
+ breakDuration = parseInt(breakTimeInput.value) * 60 * 1000;
1271
+
1272
+ if (!isRunning) {
1273
+ targetTime = isStudyTime ? studyDuration : breakDuration;
1274
+ updateDisplay(0);
1275
+ updateProgressCircle(0);
1276
+ }
1277
+ }
1278
+
1279
+ // Statistics functions
1280
+ function updateStatistics() {
1281
+ totalStudy.textContent = `${Math.floor(totalStudyTime / 60000)} min`;
1282
+ totalSessions.textContent = sessionCount;
1283
+ totalBreak.textContent = `${Math.floor(totalBreakTime / 60000)} min`;
1284
+
1285
+ // Calculate focus rate: study time / (study time + break time)
1286
+ const totalTime = totalStudyTime + totalBreakTime;
1287
+ const rate = totalTime > 0 ? Math.round((totalStudyTime / totalTime) * 100) : 0;
1288
+ focusRate.textContent = `${rate}%`;
1289
+ }
1290
+
1291
+ function addSessionToHistory() {
1292
+ const sessionDuration = isStudyTime ? studyDuration : breakDuration;
1293
+
1294
+ if (isStudyTime) {
1295
+ totalStudyTime += sessionDuration;
1296
+ } else {
1297
+ totalBreakTime += sessionDuration;
1298
+ sessionCount++;
1299
+ }
1300
+ updateStatistics();
1301
+
1302
+ const sessionItem = document.createElement('div');
1303
+ sessionItem.className = 'session-item';
1304
+
1305
+ const sessionType = document.createElement('span');
1306
+ sessionType.className = 'session-type ' + (isStudyTime ? 'study' : 'break');
1307
+ sessionType.textContent = isStudyTime ? 'Study' : 'Break';
1308
+
1309
+ const sessionDurationEl = document.createElement('span');
1310
+ sessionDurationEl.className = 'session-duration';
1311
+
1312
+ const minutes = Math.floor(sessionDuration / 60000);
1313
+ sessionDurationEl.textContent = `${minutes} min`;
1314
+
1315
+ const sessionTime = document.createElement('span');
1316
+ sessionTime.className = 'session-time';
1317
+ sessionTime.textContent = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
1318
+
1319
+ sessionItem.appendChild(sessionType);
1320
+ sessionItem.appendChild(sessionDurationEl);
1321
+ sessionItem.appendChild(sessionTime);
1322
+
1323
+ sessionList.prepend(sessionItem);
1324
+
1325
+ // Limit to 15 sessions
1326
+ if (sessionList.children.length > 15) {
1327
+ sessionList.removeChild(sessionList.lastChild);
1328
+ }
1329
+ }
1330
+
1331
+ function clearSessionHistory() {
1332
+ if (confirm('Are you sure you want to clear all session history?')) {
1333
+ sessionList.innerHTML = '';
1334
+ totalStudyTime = 0;
1335
+ totalBreakTime = 0;
1336
+ sessionCount = 0;
1337
+ updateStatistics();
1338
+ showNotification('Session history cleared');
1339
+ }
1340
+ }
1341
+
1342
+ function exportSessionData() {
1343
+ const sessions = [];
1344
+ for (let i = 0; i < sessionList.children.length; i++) {
1345
+ const item = sessionList.children[i];
1346
+ const type = item.children[0].textContent;
1347
+ const duration = item.children[1].textContent;
1348
+ const time = item.children[2].textContent;
1349
+ sessions.push({ type, duration, time });
1350
+ }
1351
+
1352
+ const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify({
1353
+ date: new Date().toISOString().split('T')[0],
1354
+ totalStudyTime: totalStudyTime,
1355
+ totalBreakTime: totalBreakTime,
1356
+ sessionCount: sessionCount,
1357
+ sessions: sessions
1358
+ }, null, 2));
1359
+
1360
+ const downloadAnchorNode = document.createElement('a');
1361
+ downloadAnchorNode.setAttribute("href", dataStr);
1362
+ downloadAnchorNode.setAttribute("download", "study_sessions_" + new Date().toISOString().split('T')[0] + ".json");
1363
+ document.body.appendChild(downloadAnchorNode);
1364
+ downloadAnchorNode.click();
1365
+ downloadAnchorNode.remove();
1366
+
1367
+ showNotification('Session data exported');
1368
+ }
1369
+
1370
+ // Notes functions
1371
+ function showNotes() {
1372
+ notesTab.classList.add('active');
1373
+ notesTab.classList.remove('text-gray-400');
1374
+ checklistTab.classList.remove('active');
1375
+ notesContent.style.display = 'block';
1376
+ checklistContent.style.display = 'none';
1377
+ }
1378
+
1379
+ function showChecklist() {
1380
+ checklistTab.classList.add('active');
1381
+ notesTab.classList.remove('active');
1382
+ notesContent.style.display = 'none';
1383
+ checklistContent.style.display = 'block';
1384
+ }
1385
+
1386
+ function addNote() {
1387
+ const title = noteTitle.value.trim();
1388
+ if (title === '') return;
1389
+
1390
+ const note = {
1391
+ id: Date.now(),
1392
+ title: title,
1393
+ content: '',
1394
+ createdAt: new Date().toISOString(),
1395
+ updatedAt: new Date().toISOString()
1396
+ };
1397
+
1398
+ notesList.unshift(note);
1399
+ saveNotes();
1400
+ renderNotes();
1401
+ noteTitle.value = '';
1402
+
1403
+ showNotification('Note added');
1404
+ }
1405
+
1406
+ function deleteNote(id) {
1407
+ notesList = notesList.filter(note => note.id !== id);
1408
+ saveNotes();
1409
+ renderNotes();
1410
+ showNotification('Note deleted');
1411
+ }
1412
+
1413
+ function editNote(id) {
1414
+ const note = notesList.find(n => n.id === id);
1415
+ if (!note) return;
1416
+
1417
+ const newContent = prompt('Edit note:', note.content);
1418
+ if (newContent !== null) {
1419
+ note.content = newContent;
1420
+ note.updatedAt = new Date().toISOString();
1421
+ saveNotes();
1422
+ renderNotes();
1423
+ showNotification('Note updated');
1424
+ }
1425
+ }
1426
+
1427
+ function renderNotes() {
1428
+ notesContainer.innerHTML = '';
1429
+
1430
+ if (notesList.length === 0) {
1431
+ notesContainer.innerHTML = '<div class="note-item text-center text-gray-500 py-4">No notes yet. Add one above!</div>';
1432
+ return;
1433
+ }
1434
+
1435
+ notesList.forEach(note => {
1436
+ const noteItem = document.createElement('div');
1437
+ noteItem.className = 'note-item';
1438
+ noteItem.setAttribute('data-id', note.id);
1439
+
1440
+ const titleEl = document.createElement('div');
1441
+ titleEl.className = 'note-title-text';
1442
+ titleEl.textContent = note.title;
1443
+
1444
+ const contentEl = document.createElement('div');
1445
+ contentEl.className = 'note-content';
1446
+ if (note.content && note.content.trim() !== '') {
1447
+ contentEl.textContent = note.content;
1448
+ } else {
1449
+ contentEl.textContent = 'No content';
1450
+ contentEl.className += ' note-empty';
1451
+ }
1452
+
1453
+ const timeEl = document.createElement('div');
1454
+ timeEl.className = 'note-time';
1455
+ const createdAt = new Date(note.createdAt);
1456
+ timeEl.textContent = `Created ${formatTimeAgo(createdAt)}`;
1457
+
1458
+ if (note.updatedAt !== note.createdAt) {
1459
+ const updatedAt = new Date(note.updatedAt);
1460
+ timeEl.textContent += ` • Updated ${formatTimeAgo(updatedAt)}`;
1461
+ }
1462
+
1463
+ noteItem.appendChild(titleEl);
1464
+ noteItem.appendChild(contentEl);
1465
+ noteItem.appendChild(timeEl);
1466
+
1467
+ // Add click event to edit
1468
+ noteItem.addEventListener('click', function(e) {
1469
+ // Only trigger edit if not clicking on a button
1470
+ if (!e.target.closest('button')) {
1471
+ editNote(note.id);
1472
+ }
1473
+ });
1474
+
1475
+ notesContainer.appendChild(noteItem);
1476
+ });
1477
+ }
1478
+
1479
+ function saveNotes() {
1480
+ localStorage.setItem('studyStopwatchNotes', JSON.stringify(notesList));
1481
+ }
1482
+
1483
+ function loadNotes() {
1484
+ const saved = localStorage.getItem('studyStopwatchNotes');
1485
+ if (saved) {
1486
+ try {
1487
+ notesList = JSON.parse(saved);
1488
+ renderNotes();
1489
+ } catch (e) {
1490
+ console.error('Error loading notes:', e);
1491
+ }
1492
+ }
1493
+ }
1494
+
1495
+ // Checklist functions
1496
+ function addTask() {
1497
+ const text = taskInput.value.trim();
1498
+ const priority = taskPriority.value;
1499
+
1500
+ if (text === '') return;
1501
+
1502
+ const task = {
1503
+ id: Date.now(),
1504
+ text: text,
1505
+ completed: false,
1506
+ priority: priority,
1507
+ createdAt: new Date().toISOString()
1508
+ };
1509
+
1510
+ taskList.unshift(task);
1511
+ saveTasks();
1512
+ renderTasks();
1513
+ taskInput.value = '';
1514
+
1515
+ showNotification('Task added');
1516
+ updateTaskStats();
1517
+ }
1518
+
1519
+ function toggleTask(id) {
1520
+ const task = taskList.find(t => t.id === id);
1521
+ if (task) {
1522
+ task.completed = !task.completed;
1523
+ saveTasks();
1524
+ renderTasks();
1525
+ updateTaskStats();
1526
+ showNotification(task.completed ? 'Task completed!' : 'Task marked incomplete');
1527
+ }
1528
+ }
1529
+
1530
+ function deleteTask(id) {
1531
+ taskList = taskList.filter(task => task.id !== id);
1532
+ saveTasks();
1533
+ renderTasks();
1534
+ updateTaskStats();
1535
+ showNotification('Task deleted');
1536
+ }
1537
+
1538
+ function editTask(id) {
1539
+ const task = taskList.find(t => t.id === id);
1540
+ if (!task) return;
1541
+
1542
+ const newText = prompt('Edit task:', task.text);
1543
+ if (newText !== null && newText.trim() !== '') {
1544
+ task.text = newText.trim();
1545
+ saveTasks();
1546
+ renderTasks();
1547
+ showNotification('Task updated');
1548
+ }
1549
+ }
1550
+
1551
+ function renderTasks() {
1552
+ checklistContainer.innerHTML = '';
1553
+
1554
+ if (taskList.length === 0) {
1555
+ checklistContainer.innerHTML = '<div class="check-item text-center text-gray-500 py-4">No tasks yet. Add one above!</div>';
1556
+ return;
1557
+ }
1558
+
1559
+ // Sort tasks: incomplete first, then by priority (high, medium, low), then by creation date
1560
+ const sortedTasks = [...taskList].sort((a, b) => {
1561
+ if (a.completed !== b.completed) {
1562
+ return a.completed ? 1 : -1;
1563
+ }
1564
+ if (a.priority !== b.priority) {
1565
+ const priorityOrder = { high: 0, medium: 1, low: 2 };
1566
+ return priorityOrder[a.priority] - priorityOrder[b.priority];
1567
+ }
1568
+ return new Date(b.createdAt) - new Date(a.createdAt);
1569
+ });
1570
+
1571
+ sortedTasks.forEach(task => {
1572
+ const taskItem = document.createElement('div');
1573
+ taskItem.className = `check-item ${task.priority} ${task.completed ? 'completed' : ''}`;
1574
+ taskItem.setAttribute('data-id', task.id);
1575
+
1576
+ const checkContent = document.createElement('div');
1577
+ checkContent.className = 'check-content';
1578
+
1579
+ const checkbox = document.createElement('div');
1580
+ checkbox.className = 'check-checkbox';
1581
+ if (task.completed) {
1582
+ checkbox.innerHTML = '<i class="fas fa-check"></i>';
1583
+ }
1584
+
1585
+ const textSpan = document.createElement('div');
1586
+ textSpan.className = 'check-text';
1587
+ textSpan.textContent = task.text;
1588
+
1589
+ checkContent.appendChild(checkbox);
1590
+ checkContent.appendChild(textSpan);
1591
+
1592
+ // Right side actions
1593
+ const actions = document.createElement('div');
1594
+ actions.className = 'task-actions';
1595
+
1596
+ const priorityIcon = document.createElement('i');
1597
+ priorityIcon.className = `fas fa-flag priority-icon ${task.priority}`;
1598
+
1599
+ const editBtn = document.createElement('button');
1600
+ editBtn.innerHTML = '<i class="fas fa-edit"></i>';
1601
+ editBtn.addEventListener('click', (e) => {
1602
+ e.stopPropagation();
1603
+ editTask(task.id);
1604
+ });
1605
+
1606
+ const deleteBtn = document.createElement('button');
1607
+ deleteBtn.innerHTML = '<i class="fas fa-trash"></i>';
1608
+ deleteBtn.addEventListener('click', (e) => {
1609
+ e.stopPropagation();
1610
+ deleteTask(task.id);
1611
+ });
1612
+
1613
+ actions.appendChild(priorityIcon);
1614
+ actions.appendChild(editBtn);
1615
+ actions.appendChild(deleteBtn);
1616
+
1617
+ taskItem.appendChild(checkContent);
1618
+ taskItem.appendChild(actions);
1619
+
1620
+ // Click to toggle completion
1621
+ taskItem.addEventListener('click', () => toggleTask(task.id));
1622
+
1623
+ checklistContainer.appendChild(taskItem);
1624
+ });
1625
+ }
1626
+
1627
+ function updateTaskStats() {
1628
+ const total = taskList.length;
1629
+ const completed = taskList.filter(t => t.completed).length;
1630
+ const percent = total > 0 ? Math.round((completed / total) * 100) : 0;
1631
+
1632
+ taskCount.textContent = `${total} tasks`;
1633
+ completedCount.textContent = `${completed} completed`;
1634
+ progressBar.style.width = `${percent}%`;
1635
+ }
1636
+
1637
+ function saveTasks() {
1638
+ localStorage.setItem('studyStopwatchTasks', JSON.stringify(taskList));
1639
+ }
1640
+
1641
+ function loadTasks() {
1642
+ const saved = localStorage.getItem('studyStopwatchTasks');
1643
+ if (saved) {
1644
+ try {
1645
+ taskList = JSON.parse(saved);
1646
+ renderTasks();
1647
+ updateTaskStats();
1648
+ } catch (e) {
1649
+ console.error('Error loading tasks:', e);
1650
+ }
1651
+ }
1652
+ }
1653
+
1654
+ // Utility functions
1655
+ function showNotification(message) {
1656
+ toastMessage.textContent = message;
1657
+ toast.classList.add('show');
1658
+
1659
+ setTimeout(() => {
1660
+ toast.classList.remove('show');
1661
+ }, 3000);
1662
+ }
1663
+
1664
+ function toggleTheme() {
1665
+ const icon = themeToggle.querySelector('i');
1666
+ const body = document.body;
1667
+
1668
+ if (body.classList.contains('dark')) {
1669
+ body.classList.remove('dark');
1670
+ body.style.background = 'linear-gradient(135deg, #f3f4f6, #e5e7eb)';
1671
+ icon.classList.replace('fa-moon', 'fa-sun');
1672
+ } else {
1673
+ body.classList.add('dark');
1674
+ body.style.background = 'linear-gradient(135deg, #111827, #1f2937)';
1675
+ icon.classList.replace('fa-sun', 'fa-moon');
1676
+ }
1677
+ }
1678
+
1679
+ function toggleFullscreen() {
1680
+ if (!document.fullscreenElement) {
1681
+ document.documentElement.requestFullscreen().catch(err => {
1682
+ console.log(`Error attempting to enable full-screen mode: ${err.message}`);
1683
+ });
1684
+ fullscreenBtn.innerHTML = '<i class="fas fa-compress"></i>';
1685
+ } else {
1686
+ if (document.exitFullscreen) {
1687
+ document.exitFullscreen();
1688
+ }
1689
+ fullscreenBtn.innerHTML = '<i class="fas fa-expand"></i>';
1690
+ }
1691
+ }
1692
+
1693
+ function formatTimeAgo(date) {
1694
+ const now = new Date();
1695
+ const diff = now - date;
1696
+ const seconds = Math.floor(diff / 1000);
1697
+ const minutes = Math.floor(seconds / 60);
1698
+ const hours = Math.floor(minutes / 60);
1699
+ const days = Math.floor(hours / 24);
1700
+
1701
+ if (days > 0) {
1702
+ return `${days}d ago`;
1703
+ } else if (hours > 0) {
1704
+ return `${hours}h ago`;
1705
+ } else if (minutes > 0) {
1706
+ return `${minutes}m ago`;
1707
+ } else {
1708
+ return `${seconds}s ago`;
1709
+ }
1710
+ }
1711
+
1712
+ // Initialize
1713
+ document.body.classList.add('dark');
1714
+ autoStartBreak.checked = true;
1715
+ autoStartStudy.checked = true;
1716
+ </script>
1717
+ <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/stopwatch" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1718
+ </html>