-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdynamic.html
873 lines (754 loc) · 39.9 KB
/
dynamic.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Note Content | TaskMaster AI</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="theme.js"></script>
<style>
:root {
--primary-color: #6C63FF;
--secondary-color: #3F3D56;
--accent-color: #F50057;
--text-color: #F8F9FA;
--bg-color: #121212;
--card-bg: #1E1E1E;
--glass-bg: rgba(255, 255, 255, 0.1); /* Frosted Glass Effect */
--hover-bg: rgba(255, 255, 255, 0.1); /* Slightly Darker Hover Background */
--border-radius: 15px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--bg-color); /* Solid dark background */
backdrop-filter: blur(10px); /* Optional: keeps the frosted glass effect */
}
body.night-mode {
background-color: #333333;
primary-color: #121212; /* Darker background */
secondary-color: #1E1E1E; /* Darker grayish background */
accent-color: #009bf5; /* Adjust if necessary */
text-color: #e0e0e0; /* Lighter text color for dark mode */
--bg-color: rgba(18, 18, 18, 0.8); /* Darker background */
--card-bg: #1E1E1E;
--glass-bg: rgba(18, 18, 18, 0.8); /* Darker frosted glass effect */
--hover-bg: rgba(30, 30, 30, 0.9); /* Darker hover background */
}
}
.menu-item {
display: flex;
align-items: center;
cursor: pointer;
padding: 8px 16px;
border-radius: 4px;
transition: background-color 0.3s;
}
.menu-item:hover {
}
.theme-icon {
margin-right: 8px;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
}
.theme-icon.active {
animation: rotate 0.5s ease-in-out;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.container {
display: flex;
height: 100vh;
}
.sidebar {
width: 250px;
background: inherit;
padding: 20px;
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--border-radius);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
}
.sidebar h1 {
font-size: 24px;
margin-bottom: 20px;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar ul li {
margin-bottom: 20px;
}
.sidebar ul li a {
text-decoration: none;
color: var(--secondary-color);
font-size: 18px;
transition: color 0.3s ease;
}
.sidebar ul li a:hover {
color: var(--primary-color);
}
.logo {
font-size: 1.4rem;
font-weight: 700;
color: var(--primary-color);
display: flex;
align-items: center;
margin-bottom: 30px;
}
.logo svg {
width: 30px;
height: 30px;
margin-right: 10px;
}
.menu-item {
margin-bottom: 15px;
color: var(--text-color);
cursor: pointer;
transition: color 0.3s ease;
display: flex;
align-items: center;
transition: transform 0.3s ease;
}
.menu-item svg {
width: 20px;
height: 20px;
margin-right: 10px;
}
.menu-item:hover {
transform: scale(1.1);
}
.upgrade-btn {
background: linear-gradient(45deg, var(--accent-color), #FF1493);
color: var(--text-color);
border: none;
padding: 10px 20px;
border-radius: 50px;
cursor: pointer;
margin-top: 20px;
font-weight: 600;
display: flex;
align-items: center;
transition: background-color 0.3s ease, transform 0.3s ease;
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.1);
}
.upgrade-btn svg {
width: 20px;
height: 20px;
margin-right: 10px;
}
.upgrade-btn:hover {
transform: scale(1.05);
}
.main-content {
flex-grow: 1;
padding: 20px;
overflow-y: auto;
background: transparent;
}
.dashboard-header {
margin-bottom: 30px;
}
.dashboard-header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.create-new {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.item {
background-color: var(--glass-bg);
padding: 15px;
border-radius: var(--border-radius);
margin-bottom: 10px;
transition: background-color 0.3s ease, transform 0.3s ease;
display: flex;
justify-content: space-between;
align-items: center;
backdrop-filter: blur(10px);
}
.item:hover {
background-color: var(--hover-bg);
transform: scale(1.05);
backdrop-filter: blur(10px);
}
.user-profile {
display: flex;
align-items: center;
margin-top: auto;
padding-top: 20px;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--primary-color);
margin-right: 10px;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.user-avatar:hover {
transform: scale(1.1);
color: var(--text-color);
}
.account-button {
background: none;
border: none;
color: var(--text-color);
cursor: pointer;
display: flex;
align-items: center;
padding: 0;
transition: color 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}
.account-button:hover {
transform: scale(1.05);
}
.account-button:focus {
outline: none;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--accent-color); /* Initial color is accent color */
margin-right: 10px;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.user-avatar:hover {
transform: scale(1.1);
}
.main-content {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 0; /* Remove padding to let the chatbot take the full space */
overflow: hidden; /* Ensure the content fits within the container */
}
.dashboard-header {
margin-bottom: 30px;
}
.dashboard-header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.section {
margin-bottom: 30px;
}
.section h2 {
font-size: 2rem;
margin-bottom: 20px;
color: var(--primary-color);
}
/* Existing styles */
.sidebar-toggle {
display: none;
position: fixed;
top: 20px;
right: 20px;
background-color: var(--hover-bg);
color: var(--text-color);
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
z-index: 1000;
}
.sidebar-toggle svg {
width: 24px;
height: 24px;
}
/* Mobile styles */
@media (max-width: 768px) {
.sidebar {
display: none;
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 250px; /* Adjust width as needed */
background-color: #333; /* Solid color, adjust as needed */
color: var(--text-color);
padding: 20px; /* Adjust padding as needed */
z-index: 1000;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Optional shadow for better depth */
border-radius: 0; /* No rounded corners */
}
.sidebar.active {
display: flex;
}
.sidebar-toggle {
display: block;
}
.main-content {
padding-left: 20px;
margin-left: 0;
}
}
/* Animation for SVG */
@keyframes rotateIcon {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
.theme-icon {
display: inline-block;
transition: transform 0.5s;
}
.theme-icon svg {
transition: fill 0.5s;
}
.theme-icon.active svg {
animation: rotateIcon 0.5s;
}
.dev-tag {
background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
color: #ffffff;
padding: 2px 4px;
font-size: 0.75em;
border-radius: 3px;
margin-left: 5px;
}
.basic-tag {
background: var(--primary-color);
color: #ffffff;
padding: 2px 4px;
font-size: 0.75em;
border-radius: 3px;
margin-left: 5px;
font-weight: 600; /* Semi-bold */
}
/* Date styling */
#pdf-date {
font-size: 1em;
color: #888; /* Slightly gray color */
vertical-align: middle; /* Align date with title */
}
/* Overview styling */
#pdf-overview {
font-size: 1.8em;
color: var(--primary-color); /* Primary color */
margin-top: 15px;
display: block;
}
/* Key Points section heading */
#pdf-key-points-title {
font-size: 1.8em;
color: var(--primary-color); /* Primary color */
margin-top: 25px;
}
/* Key Points list styling */
#pdf-key-points {
list-style-type: disc;
padding-left: 20px;
font-size: 1.2em;
color: #555; /* Subtle color for readability */
margin-top: 10px;
}
</style>
</head>
<body>
<button class="sidebar-toggle">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div class="container">
<div class="sidebar">
<div class="logo" onclick="window.location.href='index.html'">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.19C2 19.83 4.17 22 7.81 22H16.19C19.83 22 22 19.83 22 16.19V7.81C22 4.17 19.83 2 16.19 2ZM9.97 14.9L7.72 17.15C7.57 17.3 7.38 17.37 7.19 17.37C7 17.37 6.8 17.3 6.66 17.15L5.91 16.4C5.61 16.11 5.61 15.63 5.91 15.34C6.2 15.05 6.67 15.05 6.97 15.34L7.19 15.56L8.91 13.84C9.2 13.55 9.67 13.55 9.97 13.84C10.26 14.13 10.26 14.61 9.97 14.9ZM9.97 7.9L7.72 10.15C7.57 10.3 7.38 10.37 7.19 10.37C7 10.37 6.8 10.3 6.66 10.15L5.91 9.4C5.61 9.11 5.61 8.63 5.91 8.34C6.2 8.05 6.67 8.05 6.97 8.34L7.19 8.56L8.91 6.84C9.2 6.55 9.67 6.55 9.97 6.84C10.26 7.13 10.26 7.61 9.97 7.9ZM17.56 16.62H12.31C11.9 16.62 11.56 16.28 11.56 15.87C11.56 15.46 11.9 15.12 12.31 15.12H17.56C17.98 15.12 18.31 15.46 18.31 15.87C18.31 16.28 17.98 16.62 17.56 16.62ZM17.56 9.62H12.31C11.9 9.62 11.56 9.28 11.56 8.87C11.56 8.46 11.9 8.12 12.31 8.12H17.56C17.98 8.12 18.31 8.46 18.31 8.87C18.31 9.28 17.98 9.62 17.56 9.62Z" fill="currentColor"></path>
</g>
</svg>
TaskMaster AI
</div>
<div class="menu-item" onclick="window.location.href='dashboard.html'">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 22V12H15V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Dashboard
</div>
<div class="menu-item" onclick="window.location.href='account.html'">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12.9046 3.06005C12.6988 3 12.4659 3 12 3C11.5341 3 11.3012 3 11.0954 3.06005C10.7942 3.14794 10.5281 3.32808 10.3346 3.57511C10.2024 3.74388 10.1159 3.96016 9.94291 4.39272C9.69419 5.01452 9.00393 5.33471 8.36857 5.123L7.79779 4.93281C7.3929 4.79785 7.19045 4.73036 6.99196 4.7188C6.70039 4.70181 6.4102 4.77032 6.15701 4.9159C5.98465 5.01501 5.83376 5.16591 5.53197 5.4677C5.21122 5.78845 5.05084 5.94882 4.94896 6.13189C4.79927 6.40084 4.73595 6.70934 4.76759 7.01551C4.78912 7.2239 4.87335 7.43449 5.04182 7.85566C5.30565 8.51523 5.05184 9.26878 4.44272 9.63433L4.16521 9.80087C3.74031 10.0558 3.52786 10.1833 3.37354 10.3588C3.23698 10.5141 3.13401 10.696 3.07109 10.893C3 11.1156 3 11.3658 3 11.8663C3 12.4589 3 12.7551 3.09462 13.0088C3.17823 13.2329 3.31422 13.4337 3.49124 13.5946C3.69158 13.7766 3.96395 13.8856 4.50866 14.1035C5.06534 14.3261 5.35196 14.9441 5.16236 15.5129L4.94721 16.1584C4.79819 16.6054 4.72367 16.829 4.7169 17.0486C4.70875 17.3127 4.77049 17.5742 4.89587 17.8067C5.00015 18.0002 5.16678 18.1668 5.5 18.5C5.83323 18.8332 5.99985 18.9998 6.19325 19.1041C6.4258 19.2295 6.68733 19.2913 6.9514 19.2831C7.17102 19.2763 7.39456 19.2018 7.84164 19.0528L8.36862 18.8771C9.00393 18.6654 9.6942 18.9855 9.94291 19.6073C10.1159 20.0398 10.2024 20.2561 10.3346 20.4249C10.5281 20.6719 10.7942 20.8521 11.0954 20.94C11.3012 21 11.5341 21 12 21C12.4659 21 12.6988 21 12.9046 20.94C13.2058 20.8521 13.4719 20.6719 13.6654 20.4249C13.7976 20.2561 13.8841 20.0398 14.0571 19.6073C14.3058 18.9855 14.9961 18.6654 15.6313 18.8773L16.1579 19.0529C16.605 19.2019 16.8286 19.2764 17.0482 19.2832C17.3123 19.2913 17.5738 19.2296 17.8063 19.1042C17.9997 18.9999 18.1664 18.8333 18.4996 18.5001C18.8328 18.1669 18.9994 18.0002 19.1037 17.8068C19.2291 17.5743 19.2908 17.3127 19.2827 17.0487C19.2759 16.8291 19.2014 16.6055 19.0524 16.1584L18.8374 15.5134C18.6477 14.9444 18.9344 14.3262 19.4913 14.1035C20.036 13.8856 20.3084 13.7766 20.5088 13.5946C20.6858 13.4337 20.8218 13.2329 20.9054 13.0088C21 12.7551 21 12.4589 21 11.8663C21 11.3658 21 11.1156 20.9289 10.893C20.866 10.696 20.763 10.5141 20.6265 10.3588C20.4721 10.1833 20.2597 10.0558 19.8348 9.80087L19.5569 9.63416C18.9478 9.26867 18.6939 8.51514 18.9578 7.85558C19.1262 7.43443 19.2105 7.22383 19.232 7.01543C19.2636 6.70926 19.2003 6.40077 19.0506 6.13181C18.9487 5.94875 18.7884 5.78837 18.4676 5.46762C18.1658 5.16584 18.0149 5.01494 17.8426 4.91583C17.5894 4.77024 17.2992 4.70174 17.0076 4.71872C16.8091 4.73029 16.6067 4.79777 16.2018 4.93273L15.6314 5.12287C14.9961 5.33464 14.3058 5.0145 14.0571 4.39272C13.8841 3.96016 13.7976 3.74388 13.6654 3.57511C13.4719 3.32808 13.2058 3.14794 12.9046 3.06005Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
Settings
</div>
<div class="menu-item toggle-night-mode" onclick="toggleNightMode()">
<div class="theme-icon">
<svg id="theme-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
</div>
Theme
</div>
<div class="menu-item" onclick="window.location.href='notes.html'">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M20 14V7C20 5.34315 18.6569 4 17 4H12M20 14L13.5 20M20 14H15.5C14.3954 14 13.5 14.8954 13.5 16V20M13.5 20H7C5.34315 20 4 18.6569 4 17V12" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M7 4V7M7 10V7M7 7H4M7 7H10" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
Notes
</div>
<div class="menu-item" onclick="window.location.href='calendar.html'">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M3 9H21M7 3V5M17 3V5M6 12H8M11 12H13M16 12H18M6 15H8M11 15H13M16 15H18M6 18H8M11 18H13M16 18H18M6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path> </g></svg>
Calendar
</div>
<div class="menu-item" onclick="window.location.href='friends.html'">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" stroke-width="4.672" stroke="#ffffff" fill="none"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><circle cx="29.22" cy="16.28" r="11.14"></circle><path d="M41.32,35.69c-2.69-1.95-8.34-3.25-12.1-3.25h0A22.55,22.55,0,0,0,6.67,55h29.9"></path><circle cx="45.38" cy="46.92" r="11.94"></circle><line x1="45.98" y1="39.8" x2="45.98" y2="53.8"></line><line x1="38.98" y1="46.8" x2="52.98" y2="46.8"></line></g></svg>
Friends
</div>
<div class="menu-item" onclick="window.location.href='coming-soon.html'">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 164 164" x="0px" y="0px" fill="#ffffff" width="74" height="74" style="margin-right: 8px;">
<g transform="scale(2.75)"> <!-- Scaling the actual SVG content -->
<path d="M11.63,37.02A20.1565,20.1565,0,0,1,11.04,32.82H22.59A56.55887,56.55887,0,0,0,22.97,38.8,25.89175,25.89175,0,0,0,18.58,40.53,6.1486,6.1486,0,0,0,11.63,37.02ZM19.11,42.45a5.88844,5.88844,0,0,1-.3,2.67A9.91165,9.91165,0,0,1,22.5,50.7a20.04038,20.04038,0,0,0,4.83,1.75c-1.85-2.58-3.3-6.68005-4.09-11.67A22.112,22.112,0,0,0,19.11,42.45Zm8.22-30.9a20.9854,20.9854,0,0,0-11.78,7.44,18.31507,18.31507,0,0,0,7.69,4.23C24.03,18.23,25.48,14.13,27.33,11.55ZM22.97,25.2a21.16733,21.16733,0,0,1-8.56-4.62A20.757,20.757,0,0,0,11.06,30.82H22.59C22.63,28.86,22.76,26.98,22.97,25.2ZM32,24.45a31.61622,31.61622,0,0,0,6.82-.73c-2.701-17.05245-10.94371-17.03506-13.64,0A31.61622,31.61622,0,0,0,32,24.45Zm9.28-1.39a9.848,9.848,0,0,1,3.91-6.95,5.00891,5.00891,0,0,1-.17-.55,20.71311,20.71311,0,0,0-8.35-4.01c1.85,2.58,3.3,6.68,4.09,11.67C40.94,23.17,41.11,23.11,41.28,23.06Zm-2.2,2.64a34.10132,34.10132,0,0,1-14.16,0c-.18,1.61-.29,3.32-.33,5.12H39.41C39.37,29.02,39.26,27.31,39.08,25.7Zm2.33,5.12H52.94A20.53863,20.53863,0,0,0,52.37,26.96H44.24A3.00339,3.00339,0,0,1,41.45,25.07c-.14.04-.28.09-.42.13C41.24,26.98,41.37,28.86,41.41,30.82ZM24.92,38.3a34.10132,34.10132,0,0,1,14.16,0c.19-1.71.31-3.55.33-5.48H24.59C24.61,34.75,24.73,36.59,24.92,38.3ZM32,39.55a31.62006,31.62006,0,0,0-6.82.73c2.70094,17.05249,10.94373,17.0351,13.64,0A31.62006,31.62006,0,0,0,32,39.55Zm4.67,12.9a20.9854,20.9854,0,0,0,11.78-7.44,18.31512,18.31512,0,0,0-7.69-4.23C39.97,45.77,38.52,49.87,36.67,52.45ZM41.03,38.8a21.16726,21.16726,0,0,1,8.56,4.62,20.8109,20.8109,0,0,0,3.37-10.6H41.41A56.55887,56.55887,0,0,1,41.03,38.8ZM58.77,23.96a1.00291,1.00291,0,0,1-1,1H52.04c-2.17352.001-5.73834-.01069-7.8,0a.99286.99286,0,0,1-.89015-.56c-.52331-3.122,1.75543-6.38334,4.60017-7.57C45.431,14.26381,47.58273,9.77221,51,9.89A4.17084,4.17084,0,0,1,54.07,16.83,7.77635,7.77635,0,0,1,58.77,23.96ZM50.99991,16.2c2.95419.00217,2.72218-4.65995-.24991-4.29A2.15468,2.15468,0,0,0,50.99991,16.2ZM56.69,22.96c-1.14169-6.4101-10.38395-6.08342-11.36,0Zm-35.92,30a1.00291,1.00291,0,0,1-1,1c-1.58735.00006-6.43744,0-7.94,0H6.24a1.00291,1.00291,0,0,1-1-1,7.76949,7.76949,0,0,1,4.71-7.13,4.17685,4.17685,0,0,1,2.24992-6.87986c3.75273-.81649,6.53182,3.9936,3.95009,6.77988C18.77011,47.238,20.85191,49.76531,20.77,52.96ZM13,45.2c2.76954-.0062,2.8617-4.28654,0-4.31A2.15516,2.15516,0,0,0,13,45.2Zm5.69,6.76c-1.15159-6.29025-10.24749-6.25506-11.36,0Z"></path>
</g>
</svg>
Community
</div>
<div class="menu-item" onclick="window.location.href='features.html'">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
</svg>
Distraction Control
</div>
<div class="menu-item" onclick="window.location.href='workschedule.html'">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 98" fill="white" stroke="white" stroke-width="-2" stroke-linecap="round" stroke-linejoin="round">
<path d="m90.137 60.492c-6.2344-1.7227-7.2422-2.7266-8.9609-8.9609-0.25-0.90234-1.0703-1.5273-2.0078-1.5273s-1.7578 0.625-2.0078 1.5273c-1.7227 6.2344-2.7266 7.2422-8.9609 8.9609-0.90234 0.25-1.5273 1.0703-1.5273 2.0078s0.625 1.7578 1.5273 2.0078c6.2344 1.7227 7.2422 2.7266 8.9609 8.9609 0.25 0.90234 1.0703 1.5273 2.0078 1.5273s1.7578-0.625 2.0078-1.5273c1.7227-6.2344 2.7266-7.2422 8.9609-8.9609 0.90234-0.25 1.5273-1.0703 1.5273-2.0078s-0.625-1.7578-1.5273-2.0078z"/>
<path d="m72.918 14.582h-54.168c-5.7422 0-10.418 4.6719-10.418 10.418v35.418c0 5.7422 4.6719 10.418 10.418 10.418h10.418v12.5c0 0.80078 0.46094 1.5312 1.1797 1.8789 0.28906 0.13672 0.59766 0.20703 0.90234 0.20703 0.46484 0 0.92578-0.15625 1.3008-0.45703l17.637-14.129h21.641c-0.73828-1.1875-1.8633-1.5117-4.7461-2.3086-2.6992-0.74219-4.5859-3.2227-4.5859-6.0234 0-2.8008 1.8867-5.2773 4.5859-6.0234 3.1641-0.875 5.1797-2.8906 6.0547-6.0547 0.74219-2.6992 3.2227-4.5859 6.0234-4.5859 1.582 0 3.0469 0.61328 4.168 1.6211v-22.457c0-5.7422-4.6719-10.418-10.418-10.418zm-16.668 41.668h-33.332c-1.1484 0-2.082-0.93359-2.082-2.082 0-1.1484 0.93359-2.082 2.082-2.082h33.332c1.1484 0 2.082 0.93359 2.082 2.082 0 1.1484-0.93359 2.082-2.082 2.082zm12.5-12.5h-45.832c-1.1484 0-2.082-0.93359-2.082-2.082 0-1.1484 0.93359-2.082 2.082-2.082h45.832c1.1484 0 2.082 0.93359 2.082 2.082 0 1.1484-0.93359 2.082-2.082 2.082zm0-12.5h-45.832c-1.1484 0-2.082-0.93359-2.082-2.082 0-1.1484 0.93359-2.082 2.082-2.082h45.832c1.1484 0 2.082 0.93359 2.082 2.082 0 1.1484-0.93359 2.082-2.082 2.082z"/>
</svg>
AI Chat Bot
</div>
<button class="upgrade-btn" onclick="window.location.href='pricing.html'">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M2 8l10 14L22 8l-4-6H6L2 8z"/>
<path d="M2 8h20"/>
<path d="M12 2v20"/>
</svg>
Upgrade to Premium
</button>
<div class="user-profile" onclick="window.location.href='account.html'">
<button class="account-button">
<div class="user-avatar" id="smallProfilePictureContainer">
<!-- SVG will be replaced with the profile picture -->
<svg id="defaultAvatar" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 4C14.21 4 16 5.79 16 8C16 10.21 14.21 12 12 12C9.79 12 8 10.21 8 8C8 5.79 9.79 4 12 4ZM12 20C9.33 20 6.34 18.87 4.63 16.74C5.91 15.43 8.39 14.5 12 14.5C15.61 14.5 18.09 15.43 19.37 16.74C17.66 18.87 14.67 20 12 20Z" fill="currentColor"/>
</svg>
</div>
<div id="username">User Name</div>
<div class="menu-dots">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
</div>
<div class="main-content">
<h1 id="pdf-title"></h1>
<p><strong>Overview:</strong> <span id="pdf-overview"></span></p>
<p><strong>Date Created:</strong> <span id="pdf-date"></span></p>
<h3>Key Points:</h3>
<ul id="pdf-key-points"></ul>
</div>
<script>
document.querySelector('.sidebar-toggle').addEventListener('click', () => {
document.querySelector('.sidebar').classList.toggle('active');
});
</script>
</script>
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-firestore.js"></script>
<script>
// Replace the following with your app's Firebase project configuration
var firebaseConfig = {
apiKey: "AIzaSyDaMAlQRMXiDsZ4P0b06P18id3y5xBiZ1k",
authDomain: "deepworkai-c3419.firebaseapp.com",
projectId: "deepworkai-c3419",
storageBucket: "deepworkai-c3419.appspot.com",
messagingSenderId: "367439182644",
appId: "1:367439182644:web:304216430df97eff68c361"
};
// Initialize Firebase
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
} else {
firebase.app(); // if already initialized, use that one
}
const db = firebase.firestore();
const firestore = firebase.firestore();
var auth = firebase.auth();
let inactivityTimeout;
let isUserOffline = false;
function setUserOnlineStatus(status) {
const currentUser = firebase.auth().currentUser;
if (currentUser) {
const currentUserUID = currentUser.uid;
db.collection('users').doc(currentUserUID).update({
online: status
}).then(() => {
isUserOffline = !status; // Update isUserOffline based on the new status
}).catch((error) => {
console.error('Error updating online status: ', error);
});
} else {
console.error('No current user is logged in.'); // Log if currentUser is null
}
}
function updateUserStatusOnInteraction() {
if (isUserOffline) {
setUserOnlineStatus(true); // Set status to true if user is offline
}
clearTimeout(inactivityTimeout); // Clear previous timeout
inactivityTimeout = setTimeout(() => {
setUserOnlineStatus(false); // Set status to false after 2 minutes of inactivity
}, 120000); // 2 minutes
}
// Bind the interaction function to all necessary events
window.addEventListener('click', updateUserStatusOnInteraction);
window.addEventListener('keydown', updateUserStatusOnInteraction);
window.addEventListener('scroll', updateUserStatusOnInteraction);
// Initialize user's online status to true when the page loads
function initializeUserStatus() {
if (firebase.auth().currentUser) {
setUserOnlineStatus(true); // Set status to true when the page loads or reloads
updateUserStatusOnInteraction(); // Set up inactivity timeout
}
}
// Call initializeUserStatus on page load
initializeUserStatus();
// Update status to offline when the page is unloaded
window.addEventListener('beforeunload', () => {
if (firebase.auth().currentUser) {
setUserOnlineStatus(true); // Set status to false when the user leaves
}
});
document.addEventListener('DOMContentLoaded', function() {
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
const username = user.displayName || user.email;
document.getElementById('username').textContent = username;
document.getElementById('displayName').textContent = username;
} else {
// No user is signed in.
window.location.href = "login.html"; // Redirect to login page
}
});
});
document.addEventListener('DOMContentLoaded', function() {
auth.onAuthStateChanged(function(user) {
if (user) {
const devEmails = ['srinibaj10@gmail.com', 'fugegate@gmail.com', 'draco77654@gmail.com', 'bajinsrinivasr@lexington1.net'];
// Fetch the current user's data from Firestore
db.collection('users').doc(user.uid).get()
.then((doc) => {
if (doc.exists) {
const userData = doc.data();
const userEmail = user.email;
const isDev = devEmails.includes(userEmail);
let displayName = user.displayName || user.email;
// Create the updated display name with "DEV" or "BASIC" tag if necessary
let newDisplayName = displayName;
let shouldUpdateFirestore = false;
if (isDev && !displayName.includes('<span class="dev-tag">DEV</span>')) {
newDisplayName += ' <span class="dev-tag">DEV</span>';
shouldUpdateFirestore = true; // Mark to update Firestore
} else if (!isDev && !displayName.includes('<span class="basic-tag">Basic</span>')) {
newDisplayName += ' <span class="basic-tag">Basic</span>';
}
// Update the UI with the user's display name (safely with innerHTML)
document.getElementById('username').innerHTML = newDisplayName;
// Optionally update the Firestore document if the "DEV" tag was added or updated
if (shouldUpdateFirestore) {
return db.collection('users').doc(user.uid).update({
displayName: newDisplayName
}).then(() => {
console.log("Display name updated to include 'DEV' tag successfully!");
});
}
}
})
.catch((error) => {
console.error("Error fetching user data:", error);
});
}
});
});
function toggleNightMode() {
document.body.classList.toggle('night-mode');
const isNightMode = document.body.classList.contains('night-mode');
// Update localStorage
localStorage.setItem('nightMode', isNightMode ? 'enabled' : 'disabled');
// Save the theme preference to Firestore
firebase.auth().onAuthStateChanged(async (user) => {
if (user) {
try {
await db.collection('users').doc(user.uid).set({
nightMode: isNightMode ? 'enabled' : 'disabled'
}, { merge: true });
} catch (error) {
console.error('Error updating Firestore:', error);
}
} else {
console.error('No user is signed in');
}
});
// Update theme icon
updateThemeIcon(isNightMode ? 'moon' : 'sun');
}
function updateThemeIcon(state) {
const themeIcon = document.getElementById('theme-icon');
const themeContainer = document.querySelector('.theme-icon');
// Animation effect
themeContainer.classList.add('active');
setTimeout(() => {
if (state === 'moon') {
themeIcon.innerHTML = `<path d="M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>`;
themeIcon.dataset.state = 'sun';
} else {
themeIcon.innerHTML = `<path d="M14.5739 1.11056L13.7826 2.69316C13.7632 2.73186 13.7319 2.76325 13.6932 2.7826L12.1106 3.5739C11.9631 3.64761 11.9631 3.85797 12.1106 3.93167L13.6932 4.72297C13.7319 4.74233 13.7632 4.77371 13.7826 4.81241L14.5739 6.39502C14.6476 6.54243 14.858 6.54243 14.9317 6.39502L15.723 4.81241C15.7423 4.77371 15.7737 4.74232 15.8124 4.72297L17.395 3.93167C17.5424 3.85797 17.5424 3.64761 17.395 3.5739L15.8124 2.7826C15.7737 2.76325 15.7423 2.73186 15.723 2.69316L14.9317 1.11056C14.858 0.963147 14.6476 0.963148 14.5739 1.11056Z" fill="#FFFFFF"></path> <path d="M19.2419 5.07223L18.4633 7.40815C18.4434 7.46787 18.3965 7.51474 18.3368 7.53464L16.0009 8.31328C15.8185 8.37406 15.8185 8.63198 16.0009 8.69276L18.3368 9.4714C18.3965 9.4913 18.4434 9.53817 18.4633 9.59789L19.2419 11.9338C19.3027 12.1161 19.5606 12.1161 19.6214 11.9338L20.4 9.59789C20.42 9.53817 20.4668 9.4913 20.5265 9.4714L22.8625 8.69276C23.0448 8.63198 23.0448 8.37406 22.8625 8.31328L20.5265 7.53464C20.4668 7.51474 20.42 7.46787 20.4 7.40815L19.6214 5.07223C19.5606 4.88989 19.3027 4.88989 19.2419 5.07223Z" fill="#FFFFFF"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M10.4075 13.6642C13.2348 16.4915 17.6517 16.7363 20.6641 14.3703C20.7014 14.341 20.7385 14.3113 20.7754 14.2812C20.9148 14.1674 21.051 14.0479 21.1837 13.9226C21.2376 13.8718 21.2909 13.8201 21.3436 13.7674C21.8557 13.2552 22.9064 13.5578 22.7517 14.2653C22.6983 14.5098 22.6365 14.7517 22.5667 14.9905C22.5253 15.1321 22.4811 15.2727 22.4341 15.4122C22.4213 15.4502 22.4082 15.4883 22.395 15.5262C20.8977 19.8142 16.7886 23.0003 12 23.0003C5.92487 23.0003 1 18.0754 1 12.0003C1 7.13315 4.29086 2.98258 8.66889 1.54252L8.72248 1.52504C8.8185 1.49401 8.91503 1.46428 9.01205 1.43587C9.26959 1.36046 9.5306 1.29438 9.79466 1.23801C10.5379 1.07934 10.8418 2.19074 10.3043 2.72815C10.251 2.78147 10.1987 2.83539 10.1473 2.88989C10.0456 2.99777 9.94766 3.10794 9.8535 3.22023C9.83286 3.24485 9.8124 3.26957 9.79212 3.29439C7.32966 6.30844 7.54457 10.8012 10.4075 13.6642ZM8.99331 15.0784C11.7248 17.8099 15.6724 18.6299 19.0872 17.4693C17.4281 19.6024 14.85 21.0003 12 21.0003C7.02944 21.0003 3 16.9709 3 12.0003C3 9.09163 4.45653 6.47161 6.66058 4.81846C5.41569 8.27071 6.2174 12.3025 8.99331 15.0784Z" fill="#FFFFFF"></path>`;
themeIcon.dataset.state = 'moon';
}
themeContainer.classList.remove('active');
}, 500); // Duration matches the CSS animation duration
}
document.addEventListener('DOMContentLoaded', async (event) => {
try {
firebase.auth().onAuthStateChanged(async (user) => {
if (user) {
const doc = await db.collection('users').doc(user.uid).get();
const nightMode = doc.exists ? doc.data().nightMode : null;
if (nightMode === 'enabled') {
document.body.classList.add('night-mode');
updateThemeIcon('moon');
} else {
updateThemeIcon('sun');
}
document.getElementById('toggleNightMode').addEventListener('click', toggleNightMode);
} else {
console.error('No user is signed in');
}
});
} catch (error) {
console.error('Error initializing Firebase Authentication:', error);
}
});
</script>
<script>
function loadSmallProfilePicture() {
const currentUser = firebase.auth().currentUser;
const avatarContainer = document.getElementById('smallProfilePictureContainer');
const defaultAvatar = document.getElementById('defaultAvatar');
if (currentUser) {
const uid = currentUser.uid;
const userDocRef = firestore.collection('users').doc(uid);
userDocRef.get().then(doc => {
if (doc.exists) {
const data = doc.data();
const profilePictureUrl = data.profilePicture;
if (profilePictureUrl) {
// Create and append the new profile picture
const img = document.createElement('img');
img.src = profilePictureUrl;
img.alt = 'Profile Picture';
img.style.width = '40px'; // Ensure the image has the same size as the SVG
img.style.height = '40px';
img.style.borderRadius = '50%';
// Replace the SVG with the new image
avatarContainer.innerHTML = ''; // Clear the current content
avatarContainer.appendChild(img);
} else {
console.log("No profile picture set for user.");
}
} else {
console.error("No user document found.");
}
}).catch(error => {
console.error("Error loading profile picture: ", error);
});
} else {
console.error("User is not authenticated.");
}
}
// Call the function when the page loads
document.addEventListener('DOMContentLoaded', function() {
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
loadSmallProfilePicture();
}
});
});
// Wait until the DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
const urlParams = new URLSearchParams(window.location.search);
const pdfId = urlParams.get('pdfId');
if (pdfId) {
loadPDFContent(pdfId);
} else {
console.error("PDF ID not found in URL.");
}
});
// Fetch the PDF content from Firestore based on the pdfId
function loadPDFContent(pdfId) {
// Access Firestore collection and document by pdfId
const pdfRef = firebase.firestore().collection('generatedpdfs').doc(pdfId);
pdfRef.get()
.then(doc => {
if (doc.exists) {
const pdfData = doc.data();
// Display the PDF data dynamically in the HTML
displayPDFContent(pdfData);
} else {
console.error("No PDF found with the specified ID.");
}
})
.catch(error => {
console.error("Error retrieving PDF data:", error);
});
}
function displayPDFContent(pdfData) {
const mainContent = document.querySelector('.main-content');
// Set the content within the main-content section
mainContent.querySelector('#pdf-title').innerText = pdfData.fileName || "Untitled PDF";
mainContent.querySelector('#pdf-overview').innerText = pdfData.overview || "No overview available.";
const timestamp = pdfData.timestamp?.toDate();
const dateCreated = timestamp ? timestamp.toLocaleDateString() + ' ' + timestamp.toLocaleTimeString() : "Unknown Date";
mainContent.querySelector('#pdf-date').innerText = dateCreated;
// Format and display key points
const keyPointsList = mainContent.querySelector('#pdf-key-points');
keyPointsList.innerHTML = pdfData.keyPoints && pdfData.keyPoints.length > 0
? pdfData.keyPoints.map(point => `<li>${point}</li>`).join('')
: "<li>No key points available.</li>";
}
</script>
</body>
</html>