-
-
Notifications
You must be signed in to change notification settings - Fork 67
/
Copy pathindex.html
1013 lines (943 loc) · 94.3 KB
/
index.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
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<html lang="en">
<head>
<title>Notepad - Offline capable</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#4d4d4d">
<meta name="description"
content="An offline capable notepad powered by ServiceWorker. It's quick, distraction-free, dark mode enabled, mobile compatible(Android, iOS) and minimalist in nature.">
<meta name="keywords" content="note,offline,mobile,web,notepad,android,ios,desktop" />
<meta name="author" content="Amit Merchant">
<meta name="application-name" content="Notepad" />
<meta name="google-site-verification" content="ulSTJh7j6NN54_KiZAJePCb_lYYbyvN28efzvScizHw" />
<meta name="google-adsense-account" content="ca-pub-2699562972292476">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="icon" href="favicon.ico">
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" href="img/notepad-apple-icon.png">
<link rel="mask-icon" href="img/icon-mask.svg" color="black">
<!-- for Facebook -->
<meta property="og:title" content="Notepad - Offline capable" />
<meta property="og:type" content="appliction" />
<meta property="og:image" content="https://notepad.js.org/art/cover.png" />
<meta property="og:url" content="https://www.amitmerchant.com/notepad" />
<meta property="og:description"
content="An offline capable notepad powered by ServiceWorker. It's quick, distraction-free, dark mode enabled, mobile compatible(Android, iOS) and minimalist in nature." />
<!-- for Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="Notepad - Offline capable" />
<meta property="twitter:image" content="https://notepad.js.org/art/cover.png" />
<meta property="twitter:description"
content="An offline capable notepad powered by ServiceWorker. It's quick, distraction-free, dark mode enabled, mobile compatible(Android, iOS) and minimalist in nature." />
<!-- Beta: Ad Sense -->
<!-- <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2699562972292476"
crossorigin="anonymous"></script> -->
</head>
<body>
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<span>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</span>
<span><a class="navbar-brand app-heading glow-text" href="#">Notepad</a></span>
<span class="icon-container">
<span class="more-tools-container">
<a id="moreTools" class="dropdown-icon" title="More Tools">
<img src="img/navbar/dropdown.svg" alt="More Tools" />
</a>
<!-- Dropdown Menu -->
<div id="moreToolsDropdown" class="dropdown-menu">
<li><a class="dropdown-item" href="/rich-text-notes/"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="16" height="14" viewBox="0 0 52 52" enable-background="new 0 0 52 52" xml:space="preserve"><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="M4.1,43.1h43.9c0.9,0,1.6,0.7,1.6,1.6v3.1c0,0.9-0.7,1.6-1.6,1.6H4.1c-0.9,0-1.6-0.7-1.6-1.6v-3.1 C2.5,43.8,3.2,43.1,4.1,43.1z"></path> <path d="M4.1,29h43.9c0.9,0,1.6,0.7,1.6,1.6v3.1c0,0.9-0.7,1.6-1.6,1.6H4.1c-0.9,0-1.6-0.7-1.6-1.6v-3.1 C2.5,29.7,3.2,29,4.1,29z"></path> <path d="M32,14.9h16c0.9,0,1.6,0.7,1.6,1.6v3.1c0,0.9-0.7,1.6-1.6,1.6H32c-0.9,0-1.6-0.7-1.6-1.6v-3.1 C30.4,15.6,31.1,14.9,32,14.9z"></path> <path d="M24.1,21.6L16.7,3.3c-0.2-0.3-0.5-0.6-0.9-0.6h-5.7c-0.3,0-0.7,0.2-0.8,0.6L2.5,21.6 c-0.1,0.3,0.1,0.8,0.5,0.8h3.6c0.3,0,0.7-0.3,0.8-0.6l1.4-3.9l8.7,0l1.5,3.9c0.1,0.3,0.5,0.6,0.8,0.6h3.6 C23.9,22.4,24.2,22,24.1,21.6z M10.5,13.1l2.3-5.8h0.5l2.5,5.8H10.5z"></path> </g></svg>Rich Text Notes</a></li>
<li><a class="dropdown-item" href="/markdown-editor"><svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-markdown"><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="M14 3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12zM2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2z"></path> <path fill-rule="evenodd" d="M9.146 8.146a.5.5 0 0 1 .708 0L11.5 9.793l1.646-1.647a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 0-.708z"></path> <path fill-rule="evenodd" d="M11.5 5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 1 .5-.5z"></path> <path d="M3.56 11V7.01h.056l1.428 3.239h.774l1.42-3.24h.056V11h1.073V5.001h-1.2l-1.71 3.894h-.039l-1.71-3.894H2.5V11h1.06z"></path> </g></svg>Markdown Editor</a></li>
<li><a class="dropdown-item" href="/pomodoro-timer/"><svg height="16" width="16" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="currentColor"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" fill="currentColor"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M505.038,228.923c-4.596-16.219-11.413-31.43-20.408-44.915c-7.467-11.208-16.39-20.831-26.175-28.908 c-14.69-12.128-31.291-20.806-48.226-26.484c-3.269-1.089-6.563-2.05-9.866-2.928c28.737-26.841,36.049-76.336,31.445-67.112 c-3.92,7.834-56.002,36.692-92.872,52.146c13.64-16.504,29.42-44.622,40.335-78.231c0,0-56.619,52.3-91.798,73.196 c-11.119-19.326-31.478-84.055-31.478-84.055s-17.236,49.64-18.895,79.248c-28.054-15.714-58.832-51.454-67.307-72.862 c-9.996-25.296-12.819,53.675,14.494,86.861c-0.391,0.114-0.765,0.228-1.13,0.333c-0.334-0.081-0.651-0.171-0.984-0.244 c-1.065-0.252-2.132-0.48-3.214-0.699c-36.366-15.17-91.294-47.405-95.369-53.749c-4.506-7.012,0.732,42.028,27.427,65.323 c-14.446,3.912-28.81,9.899-42.206,18.269c-15.779,9.858-30.241,23.076-41.442,39.896c-8.995,13.486-15.812,28.696-20.4,44.915 C2.367,245.141,0,262.386,0,280.036c0,24.71,4.652,50.218,14.568,74.7c7.434,18.342,17.846,36.098,31.445,52.366 c20.392,24.409,47.982,45.402,82.933,60.092c34.951,14.714,77.174,23.181,127.05,23.173c44.345,0,82.623-6.678,115.142-18.505 c24.377-8.865,45.492-20.618,63.379-34.487c26.833-20.806,46.314-46.33,58.945-73.521c12.649-27.2,18.529-56.026,18.537-83.819 C512,262.386,509.633,245.141,505.038,228.923z M463.538,340.991c-6.059,14.966-14.518,29.387-25.614,42.654 c-16.65,19.895-39.205,37.261-69.056,49.844c-29.851,12.558-67.088,20.302-112.872,20.31c-40.686,0-74.637-6.124-102.633-16.308 c-21.01-7.638-38.684-17.552-53.463-29.013c-22.165-17.203-37.888-37.904-48.202-60.052c-10.306-22.14-15.129-45.752-15.129-68.389 c0-14.356,1.944-28.306,5.58-41.149c3.644-12.852,8.971-24.589,15.649-34.602c5.377-8.052,11.81-15.023,19.033-20.986 c10.818-8.939,23.45-15.609,36.562-20c13.103-4.409,26.679-6.508,39.042-6.499c7.759-0.008,15.047,0.83,21.384,2.318 c6.336,1.472,11.688,3.628,15.689,6.035l3.758-6.247c3.799-1.139,9.785-2.814,17.13-4.474c12.762-2.895,29.647-5.686,45.598-5.661 c8.101,0,16.455,0.7,24.376,1.782c11.884,1.635,22.783,4.115,30.608,6.182c3.132,0.821,5.734,1.57,7.76,2.18l3.75,6.238 c4.001-2.407,9.362-4.563,15.69-6.035c6.336-1.488,13.624-2.326,21.383-2.318c8.24,0,17.025,0.92,25.842,2.855 c13.233,2.888,26.524,8.036,38.392,15.462c11.883,7.434,22.344,17.09,30.404,29.168c6.678,10.012,12.005,21.75,15.649,34.602 c3.636,12.843,5.58,26.793,5.58,41.149C475.43,300.15,471.624,321.054,463.538,340.991z"></path> <path d="M108.692,280.19c-0.008-15.56,3.229-30.153,8.126-41.573l-24.011-10.273 c-6.369,14.893-10.224,32.706-10.241,51.846c0,11.753,1.48,23.986,4.824,36.236s8.565,24.516,16.016,36.228l22.042-14.022 c-5.986-9.411-10.167-19.213-12.851-29.087C109.897,299.687,108.692,289.756,108.692,280.19z"></path> </g> </g></svg>Pomodoro Timer</a></li>
<li><a class="dropdown-item" href="/voice-notes/"><svg width="16" height="16" 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 fill-rule="evenodd" clip-rule="evenodd" d="M8.29455 5.32435C8.46362 3.40732 10.0991 2 12 2C13.9009 2 15.5364 3.40732 15.7054 5.32435C15.794 6.3283 15.871 7.46841 15.871 8.41026C15.871 9.3521 15.794 10.4922 15.7054 11.4962C15.5364 13.4132 13.9009 14.8205 12 14.8205C10.0991 14.8205 8.46362 13.4132 8.29455 11.4962C8.20602 10.4922 8.12903 9.3521 8.12903 8.41026C8.12903 7.46841 8.20602 6.3283 8.29455 5.32435ZM12 3.53846C10.8657 3.53846 9.93291 4.37146 9.83703 5.45864C9.74967 6.44919 9.67742 7.53634 9.67742 8.41026C9.67742 9.28417 9.74967 10.3713 9.83703 11.3619C9.93291 12.4491 10.8657 13.2821 12 13.2821C13.1343 13.2821 14.0671 12.4491 14.163 11.3619C14.2503 10.3713 14.3226 9.28417 14.3226 8.41026C14.3226 7.53634 14.2503 6.44919 14.163 5.45865C14.0671 4.37146 13.1343 3.53846 12 3.53846Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.77419 8.15385C5.20177 8.15385 5.54839 8.49824 5.54839 8.92308C5.54839 9.84241 5.61777 10.9078 5.7222 11.9868C6.02346 15.0996 8.76916 17.3846 12 17.3846C15.2308 17.3846 17.9765 15.0996 18.2778 11.9868C18.3822 10.9078 18.4516 9.84241 18.4516 8.92308C18.4516 8.49824 18.7982 8.15385 19.2258 8.15385C19.6534 8.15385 20 8.49824 20 8.92308C20 9.91081 19.9259 11.0299 19.8191 12.134C19.459 15.8542 16.3909 18.5475 12.7742 18.8869V21.2308C12.7742 21.6556 12.4276 22 12 22C11.5724 22 11.2258 21.6556 11.2258 21.2308V18.8869C7.60911 18.5475 4.54095 15.8542 4.18092 12.134C4.07407 11.0299 4 9.91081 4 8.92308C4 8.49824 4.34662 8.15385 4.77419 8.15385Z" fill="currentColor"></path> </g></svg>Voice Notes</a></li>
<li><a class="dropdown-item" href="/kanban/"><svg width="16" height="16" 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="M9.6 4H4.4C3.6268 4 3 4.6268 3 5.4V19.6C3 20.3732 3.6268 21 4.4 21H9.6C10.3732 21 11 20.3732 11 19.6V5.4C11 4.6268 10.3732 4 9.6 4Z" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path> <path d="M19.6 4H15.4C14.6268 4 14 4.6268 14 5.4V14.6C14 15.3732 14.6268 16 15.4 16H19.6C20.3732 16 21 15.3732 21 14.6V5.4C21 4.6268 20.3732 4 19.6 4Z" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path> </g></svg>Simple Kanban</a></li>
<li><a class="dropdown-item" href="/case-converter/"><svg width="16" height="16" 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="M12.0051 21.9843C17.5165 21.9843 21.9843 17.5165 21.9843 12.0051C21.9843 6.49372 17.5165 2.02588 12.0051 2.02588C6.49372 2.02588 2.02588 6.49372 2.02588 12.0051C2.02588 17.5165 6.49372 21.9843 12.0051 21.9843Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M6.13721 4.02173L14.3002 12.2047L14.3202 7.66414" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M17.8629 19.9784L9.69989 11.8054L9.67993 16.336" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>Case Converter</a></li>
<li><a class="dropdown-item" href="/tabbypad/"><svg width="16" height="16" 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="M17 14V20M14 17H20M15.6 10H18.4C18.9601 10 19.2401 10 19.454 9.89101C19.6422 9.79513 19.7951 9.64215 19.891 9.45399C20 9.24008 20 8.96005 20 8.4V5.6C20 5.03995 20 4.75992 19.891 4.54601C19.7951 4.35785 19.6422 4.20487 19.454 4.10899C19.2401 4 18.9601 4 18.4 4H15.6C15.0399 4 14.7599 4 14.546 4.10899C14.3578 4.20487 14.2049 4.35785 14.109 4.54601C14 4.75992 14 5.03995 14 5.6V8.4C14 8.96005 14 9.24008 14.109 9.45399C14.2049 9.64215 14.3578 9.79513 14.546 9.89101C14.7599 10 15.0399 10 15.6 10ZM5.6 10H8.4C8.96005 10 9.24008 10 9.45399 9.89101C9.64215 9.79513 9.79513 9.64215 9.89101 9.45399C10 9.24008 10 8.96005 10 8.4V5.6C10 5.03995 10 4.75992 9.89101 4.54601C9.79513 4.35785 9.64215 4.20487 9.45399 4.10899C9.24008 4 8.96005 4 8.4 4H5.6C5.03995 4 4.75992 4 4.54601 4.10899C4.35785 4.20487 4.20487 4.35785 4.10899 4.54601C4 4.75992 4 5.03995 4 5.6V8.4C4 8.96005 4 9.24008 4.10899 9.45399C4.20487 9.64215 4.35785 9.79513 4.54601 9.89101C4.75992 10 5.03995 10 5.6 10ZM5.6 20H8.4C8.96005 20 9.24008 20 9.45399 19.891C9.64215 19.7951 9.79513 19.6422 9.89101 19.454C10 19.2401 10 18.9601 10 18.4V15.6C10 15.0399 10 14.7599 9.89101 14.546C9.79513 14.3578 9.64215 14.2049 9.45399 14.109C9.24008 14 8.96005 14 8.4 14H5.6C5.03995 14 4.75992 14 4.54601 14.109C4.35785 14.2049 4.20487 14.3578 4.10899 14.546C4 14.7599 4 15.0399 4 15.6V18.4C4 18.9601 4 19.2401 4.10899 19.454C4.20487 19.6422 4.35785 19.7951 4.54601 19.891C4.75992 20 5.03995 20 5.6 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>Tabbypad</a></li>
<!-- <li><a href="#new-feature-modal" data-toggle="modal" data-target="#newFeatureModal" class="dropdown-item"><svg width="16" height="16" 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="M14.5 4.5C14.5 5.88071 13.3807 7 12 7C10.6193 7 9.5 5.88071 9.5 4.5C9.5 3.11929 10.6193 2 12 2C13.3807 2 14.5 3.11929 14.5 4.5Z" stroke="currentColor" stroke-width="1.5"></path> <path d="M21 17L19.8423 16.61C19.6151 16.5335 19.399 16.4267 19.1998 16.2925L19.0985 16.2243C18.4122 15.762 18 14.9837 18 14.1502C18 13.7872 17.9613 13.4321 17.8876 13.0894M3 17L4.1577 16.61C4.38488 16.5335 4.60096 16.4267 4.80022 16.2925L4.90145 16.2243C5.58776 15.762 6 14.9837 6 14.1502C6 11.713 7.74373 9.63312 10.1228 9.23246L11.0136 9.08245C11.5 9 12.5 8.99986 12.9864 9.08245L13.8772 9.23246C14.2705 9.2987 14.6464 9.41083 15 9.56289" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M9.5 16L8.57549 17.2327C8.42794 17.4294 8.35416 17.5278 8.27135 17.6144C8.06638 17.8287 7.81632 17.9947 7.53929 18.1004C7.42736 18.1432 7.30805 18.173 7.06948 18.2326L5.27607 18.681C4.52611 18.8685 4 19.5423 4 20.3153C4 21.2458 4.75425 22 5.68466 22H6.36842C8.07661 22 9.73871 21.446 11.1053 20.4211L13 19M14.5 16L15.2267 16.9689C15.5701 17.4269 15.7419 17.6558 15.9648 17.825C16.0318 17.8759 16.102 17.9225 16.1749 17.9645C16.4174 18.1043 16.695 18.1738 17.2503 18.3126L18.7239 18.681C19.4739 18.8685 20 19.5423 20 20.3153C20 21.2458 19.2458 22 18.3153 22H17.3776C16.8153 22 16.5342 22 16.2554 21.9844C15.4319 21.9384 14.6172 21.7907 13.83 21.5446C13.5635 21.4613 13.3003 21.3626 12.7738 21.1652L11 20.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg> Deep Breath</a></li> -->
<li><a class="dropdown-item" href="/deep-breath/"><svg width="16" height="16" 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="M14.5 4.5C14.5 5.88071 13.3807 7 12 7C10.6193 7 9.5 5.88071 9.5 4.5C9.5 3.11929 10.6193 2 12 2C13.3807 2 14.5 3.11929 14.5 4.5Z" stroke="currentColor" stroke-width="1.5"></path> <path d="M21 17L19.8423 16.61C19.6151 16.5335 19.399 16.4267 19.1998 16.2925L19.0985 16.2243C18.4122 15.762 18 14.9837 18 14.1502C18 13.7872 17.9613 13.4321 17.8876 13.0894M3 17L4.1577 16.61C4.38488 16.5335 4.60096 16.4267 4.80022 16.2925L4.90145 16.2243C5.58776 15.762 6 14.9837 6 14.1502C6 11.713 7.74373 9.63312 10.1228 9.23246L11.0136 9.08245C11.5 9 12.5 8.99986 12.9864 9.08245L13.8772 9.23246C14.2705 9.2987 14.6464 9.41083 15 9.56289" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M9.5 16L8.57549 17.2327C8.42794 17.4294 8.35416 17.5278 8.27135 17.6144C8.06638 17.8287 7.81632 17.9947 7.53929 18.1004C7.42736 18.1432 7.30805 18.173 7.06948 18.2326L5.27607 18.681C4.52611 18.8685 4 19.5423 4 20.3153C4 21.2458 4.75425 22 5.68466 22H6.36842C8.07661 22 9.73871 21.446 11.1053 20.4211L13 19M14.5 16L15.2267 16.9689C15.5701 17.4269 15.7419 17.6558 15.9648 17.825C16.0318 17.8759 16.102 17.9225 16.1749 17.9645C16.4174 18.1043 16.695 18.1738 17.2503 18.3126L18.7239 18.681C19.4739 18.8685 20 19.5423 20 20.3153C20 21.2458 19.2458 22 18.3153 22H17.3776C16.8153 22 16.5342 22 16.2554 21.9844C15.4319 21.9384 14.6172 21.7907 13.83 21.5446C13.5635 21.4613 13.3003 21.3626 12.7738 21.1652L11 20.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg> Deep Breath <span class="new-tag">NEW</span></a></li>
<li><a class="dropdown-item" href="/drawingpad/"><svg width="16" height="16" viewBox="0 0 15 15" 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="M1.5 4.99998C3 1.99999 7.3 0.499944 6.5 2.49994C5.5 4.99994 -0.5 9.49995 3 10.9999C4.34326 11.5756 6.05476 11.4496 7.65399 10.9493M7.65399 10.9493C10.2217 10.146 12.5 8.37782 12.5 6.99995C12.5 4.5 9 5.5 8 9C7.79358 9.72248 7.67238 10.381 7.65399 10.9493ZM7.65399 10.9493C7.58329 13.1339 9.03211 13.9839 13 12" stroke="currentColor"></path> </g></svg> Drawingpad <span>BETA</span></a></li>
<li><a class="dropdown-item" href="/tasks/"><svg fill="currentColor" width="16" height="16" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><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="M0 0h192v192H0z" style="fill:none"></path><path d="m67.033 149.837-.002-.002s-.072-.065.002.002c4.696 4.475 12.141 4.404 16.753-.208l80.702-80.702c4.68-4.683 4.68-12.287 0-16.97l-9.58-9.586c-4.689-4.683-12.293-4.683-16.976 0L75.3 105.003 54.044 83.746c-4.683-4.683-12.287-4.683-16.971 0l-9.585 9.586c-4.683 4.683-4.683 12.287 0 16.97l39.545 39.535Zm-31.06-48.02 9.586-9.585 25.499 25.499a6 6 0 0 0 8.485 0l66.874-66.875 9.581 9.586L74.3 141.144l-38.327-39.327Z"></path></g></svg>Tasks</a></li>
</div>
</span>
<span>
<a id="clearNotes" class="trash-icon" title="Delete Notes [Ctrl/Cmd + Delete]">
<img src="img/navbar/delete.svg" alt="Delete Icon" />
</a>
</span>
<span class="downaload-notes-container">
<a id="downloadNotes" class="download-icon" title="Download Notes">
<img src="img/navbar/download.svg" alt="Download Icon" />
</a>
<!-- Dropdown Menu -->
<div id="iconDropdown" class="dropdown-menu">
<li><a class="dropdown-item" id="downloadNotesPlain">Download as plain text</a></li>
<li><a class="dropdown-item" id="downloadNotesPdf">Download as PDF</a></li>
<li><a class="dropdown-item" id="downloadNotesDocx">Download as DOCX</a></li>
<li><a class="dropdown-item" id="downloadNotesHtml">Download as HTML</a></li>
</div>
</span>
<span>
<a href="javascript:void(0);" id="copyToClipboard" class="" title="Copy notes to clipboard [alt/Option + C]">
<img src="img/navbar/copy.svg" alt="Copy Icon" />
</a>
</span>
<span title="Preferences [Ctrl/Cmd + ,]">
<a href="#preferences" data-toggle="modal" data-target="#preferencesModal" id="preferences" class="preference-icon">
<img
src="img/navbar/preferences.svg"
alt="Preferences"
id="Preferences"
/>
</a>
</span>
<span title="Play Ambient Noise">
<a href="#white-noise" data-toggle="modal" data-target="#whiteNoiseModal" title="Play Ambient Noise">
<span class="ambient-noise-icon">
<img
src="img/navbar/music.svg"
alt="Play Ambient Noise"
/>
<div class="floating-notes"></div>
</span>
</a>
</span>
<span title="Share Notes across system apps" id="shareNotesContainer">
<a id="shareNotes" title="Share Notes across system apps">
<span>
<img
src="img/navbar/share.svg"
alt="Share Notes across system apps"
/>
</span>
</a>
</span>
</span>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-flex">
<li class="keyboard-icon" id="pipContainer" title="Activate Floating Window">
<a id="pip" class="pip-icon">
<img
src="img/navbar/pip.svg"
alt="Activate Floating Window"
/>
</a>
</li>
<li class="keyboard-icon">
<a href="#keyboard-shortcuts" data-toggle="modal" data-target="#keyboardShortcutsModal" title="Keyboard Shortcuts [Ctrl/Cmd + K]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" stroke="#fff" fill="#fff" stroke-width="0" class="h-8 w-8"><path d="M14 5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h12zM2 4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H2z"></path><path d="M13 10.25a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm0-2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm-5 0A.25.25 0 0 1 8.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 8 8.75v-.5zm2 0a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-.5zm1 2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm-5-2A.25.25 0 0 1 6.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 6 8.75v-.5zm-2 0A.25.25 0 0 1 4.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 4 8.75v-.5zm-2 0A.25.25 0 0 1 2.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 2 8.75v-.5zm11-2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm-2 0a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm-2 0A.25.25 0 0 1 9.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 9 6.75v-.5zm-2 0A.25.25 0 0 1 7.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 7 6.75v-.5zm-2 0A.25.25 0 0 1 5.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 5 6.75v-.5zm-3 0A.25.25 0 0 1 2.25 6h1.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-1.5A.25.25 0 0 1 2 6.75v-.5zm0 4a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm2 0a.25.25 0 0 1 .25-.25h5.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-5.5a.25.25 0 0 1-.25-.25v-.5z"></path></svg>
</a>
</li>
<li class="fullscreen-icon">
<a href="javascript:void(0);" id="fullScreenButton" title="Toggle Full Screen">
<svg xmlns="http://www.w3.org/2000/svg" id="arrowPointsOut" height="18px" width="18px" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="#fff" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" id="arrowPointsIn" height="18px" width="18px" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="#fff" class="size-6" style="display: none;">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25" />
</svg>
</a>
</li>
<li><a href="#about" data-toggle="modal" data-target="#aboutModal" class="about-link">About</a></li>
</ul>
</div>
</div>
<div class="overlay"></div>
</nav>
<div id="mainContainer">
<div class="container" id="textareaContainer">
<div class="starter-template">
<textarea id="note" placeholder="Type your notes here and when you come back all your notes will be right here..."
spellcheck="true" autofocus></textarea>
</div>
<div class="word-count-container">
<p id="wordCount">0 character, 0 word</p>
</div>
</div>
</div>
<div class="sticky-notice make-hidden">
<p>
Enjoy using this app? If yes, consider <a href="https://www.paypal.com/paypalme/AmitMerchant" target="_blank">donating</a> so that the experience remains ad-free! :)
</p>
<a href="javascript:void(0);" id="closeDonationPopup">
<svg width="25" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</a>
</div>
<div id="aboutModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="brand-container">
<h4 class="modal-title custom-modal-title">Notepad — Offline capable</h4>
<span class="install-app-btn-container">
<a id="installApp" class="install-app-btn" href="javascript:void(0);">Install</a>
</span>
</div>
</div>
<div class="modal-body modal-container">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item active">
<a class="nav-link active" data-toggle="tab" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#supporters">Supporters</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#changelog">Changelog</a>
</li>
</ul>
<div class="tab-content">
<div id="about" class="about-modal container tab-pane active in">
<img class="about-modal-logo" src="img/icon-196.png" alt="Notepad logo" width="160" height="160">
<p>This is an offline-capable Notepad which is a <a href="https://www.amitmerchant.com/Building-Simple-Offline-Notepad-Using-Service-Worker/" target="_blank">Progressive Web App</a> as well.</p>
<p>The app serves the following features:</p>
<ul>
<li>Lets you <b>write notes in plain text</b> which are autosaved <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" target="_blank">locally</a>.</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Developer_guide/Installing" target="_blank">Installable</a> on supported browsers for offline usage.</li>
<li><b>Dark mode</b>.</li>
<li><b>Privacy-focused</b> — Never collects your precious data.</li>
<li><b>Light-weight</b> — Loads almost instantly.</li>
<li><b>Full-screen mode</b> for a distraction-free writing experience.</li>
<li><b>Optimal line length</b> for better reading experience.</li>
<li>Supports <b>monospaced</b> and <b>dyslexic fonts</b>.</li>
<li><b>Floating window</b> (in supported browsers) to effectively take notes across other apps.</li>
<li>Download notes as <b>plain text</b>, <b>PDF</b>, and <b>DOCX</b>.</li>
<li>Ability to play <b>ambient noise</b>—coffee shop, rain, fireside, etc.— in the background to help you stay focused.</li>
<li>It's proudly <a href="https://github.com/amitmerchant1990/notepad" target="_blank">open-source</a>!</li>
</ul>
<p>
<b>CAUTION:</b> Take a backup of your notes more often since it's all stored on your browser.
</p>
<p class="about-notice">Enjoy using this app? If so, consider <a href="https://buymeacoffee.com/amitmerchant" target="_blank">buying me a coffee</a> so that I keep working on improving it further and the experience remains <b>ad-free</b>. Icons from <a href="https://heroicons.com/" target="_blank">heroicons</a>, <a href="https://www.flaticon.com/" target="_blank">Flaticon</a>, <a href="https://www.svgrepo.com">SVGRepo</a> and <a href="https://iconduck.com" target="_blank">Iconduck</a>. Sounds from <a href="https://pixabay.com" target="_blank">Pixabay</a>.</p>
<p style="text-align:center; margin: 10px 0 0 0;">
<b class="about-author-container">
Brought to you by
<a href="https://www.amitmerchant.com/" target="_blank" class="about-author-link">
<img src="img/amitmerchant-icon.svg" alt="Amit Merchant" width="15px" height="15px">
Amit Merchant
</a>
</b>
</p>
</div>
<div id="supporters" class="container tab-pane fade">
<p>This is a list of supporters who were gracious enough to <a href="https://buymeacoffee.com/amitmerchant"
target="_blank">donate</a> to this project. Donations like these keeps me motivated to continue working on this little project.</p>
<p>I'm very grateful to them for their support. 🙏</p>
<ul>
<li><b><a href="https://buymeacoffee.com/amitmerchant/c/13372743" target="_blank">Julie Scott </a></b></li>
<li><b><a href="https://buymeacoffee.com/amitmerchant/c/13315688" target="_blank">Alen Vican</a></b></li>
<li><b><a href="https://buymeacoffee.com/amitmerchant/c/13284566" target="_blank">Jeffery C Reed</a></b></li>
<li><b><a href="https://buymeacoffee.com/amitmerchant/c/13274768" target="_blank">M J Whitehouse</a></b></li>
<li><b><a href="https://buymeacoffee.com/amitmerchant/c/13221745" target="_blank">Lisa Margle</a></b></li>
<li><b><a href="https://buymeacoffee.com/amitmerchant/c/12963224" target="_blank">Abd alrhman</a></b></li>
<li><b><a href="https://buymeacoffee.com/amitmerchant/c/12736796" target="_blank">Arturo Menchaca</a></b></li>
<li><b><a href="https://buymeacoffee.com/amitmerchant/c/12602949" target="_blank">Smiley</a></b></li>
<li><b><a href="https://buymeacoffee.com/amitmerchant/c/12226594" target="_blank">Lisa Daniels</a></b></li>
<li><b><a href="https://buymeacoffee.com/amitmerchant/c/12041654" target="_blank">Wonda Esco</a></b></li>
<li><b><a href="https://buymeacoffee.com/amitmerchant/c/12025491" target="_blank">Tre Reinhart</a></b></li>
<li><b><a href="https://mermory.com" target="_blank">Mermory</a></b> — Make waves for the future of flashcards</li>
<li><b>Will Hoogervorst</b></li>
<li><b>Joseph Gasz</b> </li>
<li><b>Michael Gosuico</b></li>
<li><b>James Johnson</b></li>
<li><b>Nicole Canada</b></li>
<li><b>Preston Bowman</b></li>
<li><b>Afterift</b></li>
<li><b>Cristina Gonzalez</b></li>
<li><b>Arikel Enterprises, LLC</b></li>
<li><b>Gavin and Sons Cupcakes</b></li>
<li><b>John D Fearnley</b></li>
<li><b>Bruno de Medeiroa Bastos</b></li>
<li><b>Oleksandr Lyvynenko</b></li>
<li><b>James W Friedman</b></li>
<li><b>Lark Publishing</b></li>
<li><b>Charles Turner </b></li>
<li><b>Richard Gricius</b></li>
<li><b>Danilo Trinidad</b></li>
<li><b>Milan Kovacevic</b></li>
<li><b>iChase Ministries</b></li>
<li><b>Марія Фетіщева</b></li>
</ul>
</div>
<div id="changelog" class="container tab-pane fade">
<h4>1st Apr, 2025</h3>
<ul>
<li>Implemented an ability to toggle tab indentation from preferences for structured writing like lists, tables, code, etc.</li>
</ul>
<h4>25th Mar, 2025</h3>
<ul>
<li>Implemented an ability to toggle spellcheck from Preferences.</li>
</ul>
<h4>22th Mar, 2025</h3>
<ul>
<li>Three new ambient sounds: <b>Rain on Leaves</b>, <b>Ceiling Fan</b>, and <b>Tuning Radio</b>.</li>
<li>Added an ability to <b>download the notes as HTML</b>.</li>
</ul>
<h4>26th Feb, 2025</h3>
<ul>
<li>Introduced <a href="/deep-breath/">Deep Breath</a> app to help you unwind and relax.</li>
</ul>
<h4>10th Feb, 2025</h3>
<ul>
<li>Added subtle floating notes animation around the music icon in the header to indicate when ambient noise is playing.</li>
</ul>
<h4>1st Feb, 2025</h3>
<ul>
<li><b>Simple Kanban:</b> The Kanban board can now be downloaded as a CSV file.</li>
<li><b>Tabbypad:</b> All the notes can now be downloaded as a ZIP bundle of plain text files.</li>
<li><b>Tasks:</b> Sprays confetti 🎉 when the task is completed.</li>
</ul>
<h4>23rd Jan, 2025</h3>
<ul>
<li>Implemented <a href="/tabbypad/">Tabbypad</a> to take multiple notes.</li>
</ul>
<h4>22nd Jan, 2025</h3>
<ul>
<li>Moved theme switcher to Preferences for easier theme selection.</li>
</ul>
<h4>18th Jan, 2025</h3>
<ul>
<li>Added new ambient sounds: <b>Airport</b>, <b>Winter Morning</b>, and <b>Suburban Street</b>.</li>
</ul>
<h4>15th Jan, 2025</h3>
<ul>
<li>Implemented a <a href="/case-converter/">Case Converter</a> tool to convert text between various letter cases.</li>
</ul>
<h4>6th Jan, 2025</h3>
<ul>
<li>Implemented a <a href="/kanban/">Simple Kanban</a> board to manage your tasks at a glance.</li>
</ul>
<h4>1st Jan, 2025</h3>
<ul>
<li>Added support for <a href="https://en.wikipedia.org/wiki/OpenDyslexic" target="_blank">dyslexic fonts</a> for people with dyslexia read easily.</li>
</ul>
<h4>31st Dec, 2024</h3>
<ul>
<li>Added three more ambient sounds: <b>Clock</b>, <b>Wind Chimes</b> and <b>Keyboard</b>.</li>
</ul>
<h4>16th Dec, 2024</h3>
<ul>
<li>Implemented a feature that allows you to invoke the OS's <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share" target="_blank">native share menu</a> to share data across apps.</li>
</ul>
<h4>6th Dec, 2024</h3>
<ul>
<li>Implemented a simple <a href="/voice-notes/">Voice Notes</a> tool to record and manage your voice notes directly in your browser.</li>
</ul>
<h4>2nd Dec, 2024</h3>
<ul>
<li>Implemented an ability to download the notes as a <b>DOCX</b> file.</li>
</ul>
<h4>1st Dec, 2024</h3>
<ul>
<li>Implemented a ambient noise player to help you focus. You can mix and match the following noises currently: <b>Coffee Shop</b>, <b>Rain</b>, <b>Fireside</b> and <b>White Noise</b>.</li>
</ul>
<h4>15th Nov, 2024</h3>
<ul>
<li>Added support for toggling <a href="https://fonts.google.com/knowledge/glossary/monospaced" target="_blank">monospaced fonts</a> through preferences.</li>
</ul>
<h4>8th Nov, 2024</h3>
<ul>
<li>Implemented a simple <a href="/tasks/">Tasks/Todos Manager</a> to conveniently manage your tasks at a glance.</li>
</ul>
<h4>7th Nov, 2024</h3>
<ul>
<li>Implemented <a href="/rich-text-notes/">Rich Text Notes</a> to write notes with formatting and download them as PDF (at the moment).</li>
</ul>
<h4>28th Oct, 2024</h3>
<ul>
<li>Implemented a simple <a href="/pomodoro-timer/">Pomodoro timer</a>.</li>
</ul>
<h4>22nd Oct, 2024</h3>
<ul>
<li>Implemented a simple <a href="/markdown-editor">Markdown editor</a> with a preview window.</li>
</ul>
<h4>14th Oct, 2024</h3>
<ul>
<li>Implemented the ability to download the notes as a PDF file.</li>
</ul>
<h4>6th Oct, 2024</h3>
<ul>
<li>Implemented floating window to take notes using <a href="https://developer.chrome.com/docs/web-platform/document-picture-in-picture" target="_blank">Picture-in-Picture API</a>.</li>
<li>Deprecated the dictation feature.</li>
</ul>
<h4>22nd Sep, 2024</h3>
<ul>
<li>Implemented dictation of the notes using <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition" target="_blank">speech recognition</a> in supported browsers.</li>
</ul>
<h4>17th Sep, 2024</h3>
<ul>
<li>Added a <b>"Donors"</b> section to list the donors who've supported this project.</li>
</ul>
<h4>27th Aug, 2024</h3>
<ul>
<li>Added support to display rich screenshots when installing the app on the desktop.</li>
</ul>
<h4>24th Jul, 2024</h3>
<ul>
<li>Implemented <a href="https://baymard.com/blog/line-length-readability" target="_blank">optimal line length</a> feature for better readability.</li>
<li>Implemented a toggle to go fullscreen.</li>
<li>Swithced to using muted menubar icons.</li>
<li>Added a <b>"Changelog"</b> section to list the latest changes.</li>
</ul>
<h4>3rd Jul, 2024</h3>
<ul>
<li>Implemented a switch to go fullscreen.</li>
</ul>
<h4>21st Jun, 2024</h3>
<ul>
<li>Replaced colored menubar icons with monochrome ones for a consitent look.</li>
</ul>
</div>
</div>
</div>
<div class="modal-footer">
<div class="about-icon-container">
<a href="https://github.com/amitmerchant1990/notepad" target="_blank" class="github-icon" title="Notepad on GitHub" aria-label="Notepad on GitHub">
<svg width="30" height="30" viewBox="-4.32 -4.32 56.64 56.64" 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"> <rect width="48" height="48" fill="white" fill-opacity="0.01"></rect> <path fill-rule="evenodd" clip-rule="evenodd" d="M24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4ZM0 24C0 10.7452 10.7452 0 24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24Z" fill="#000000"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M19.183 45.4715C18.9896 45.2218 18.9896 42.9972 19.183 38.798C17.1112 38.8695 15.8022 38.7257 15.256 38.3666C14.4368 37.8279 13.6166 36.1666 12.8889 34.9958C12.1612 33.825 10.546 33.6399 9.8938 33.3782C9.24158 33.1164 9.07785 32.0495 11.691 32.8564C14.3042 33.6633 14.4316 35.8606 15.256 36.3744C16.0804 36.8882 18.0512 36.6634 18.9446 36.2518C19.8379 35.8402 19.7722 34.3077 19.9315 33.7006C20.1329 33.1339 19.423 33.0082 19.4074 33.0036C18.5353 33.0036 13.9537 32.0072 12.6952 27.5705C11.4368 23.1339 13.0579 20.234 13.9227 18.9874C14.4992 18.1563 14.4482 16.3851 13.7697 13.6736C16.2333 13.3588 18.1344 14.1342 19.4732 16C19.4745 16.0107 21.2283 14.9571 24 14.9571C26.7718 14.9571 27.7551 15.8153 28.514 16C29.2728 16.1847 29.8798 12.734 34.5666 13.6736C33.5881 15.5968 32.7686 18 33.3941 18.9874C34.0195 19.9748 36.4742 23.1146 34.9664 27.5705C33.9611 30.5412 31.9851 32.3522 29.0382 33.0036C28.7002 33.1114 28.5313 33.2854 28.5313 33.5254C28.5313 33.8855 28.9881 33.9248 29.6463 35.6116C30.085 36.7361 30.1167 39.9479 29.7413 45.2469C28.7904 45.489 28.0506 45.6515 27.5219 45.7346C26.5845 45.8819 25.5667 45.9645 24.5666 45.9964C23.5666 46.0283 23.2193 46.0247 21.8368 45.896C20.9151 45.8102 20.0305 45.6687 19.183 45.4715Z" fill="#000000"></path> </g></svg>
</a>
<a href="https://www.paypal.com/paypalme/AmitMerchant" target="_blank" class="donate-icon" title="Donate to the creator of Notepad" aria-label="Donate to the creator of Notepad">
<svg fill="#000000" width="30" height="30" viewBox="0 0 32 32" id="icon" 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"> <defs> <style> .cls-donation { fill: none; } </style> </defs> <path d="M16.5,14H20V12H18V11H16v1.0508A2.5,2.5,0,0,0,16.5,17h1a.5.5,0,0,1,0,1H14v2h2v1h2V19.9492A2.5,2.5,0,0,0,17.5,15h-1a.5.5,0,0,1,0-1Z"></path> <path d="M29,13H26.98A5.7789,5.7789,0,0,0,25,8.8525V5a1,1,0,0,0-1.6-.8L19.6665,7H15c-5.5095,0-9.4634,3.2412-9.9485,8H5a1.0009,1.0009,0,0,1-1-1V12H2v2a3.0033,3.0033,0,0,0,3,3h.07A9.1733,9.1733,0,0,0,9,23.5566V27a1,1,0,0,0,1,1h4a1,1,0,0,0,1-1V25h3v2a1,1,0,0,0,1,1h4a1,1,0,0,0,1-1V23.6372A5.0926,5.0926,0,0,0,26.8188,20H29a1,1,0,0,0,1-1V14A1,1,0,0,0,29,13Zm-1,5H25.124c-.3052,2.7529-.8235,3.4854-3.124,4.3154V26H20V23H13v3H11V22.3779A7.013,7.013,0,0,1,7,16c0-4.8354,4.0181-7,8-7h5.3335L23,7V9.7764c2.4182,1.8593,1.9126,3.186,2.0183,5.2236H28Z"></path> <rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" class="cls-donation" width="32" height="32"></rect> </g></svg>
</a>
<a href="https://buymeacoffee.com/amitmerchant" target="_blank" class="donate-icon" title="Buy me a coffee">
<svg fill="#000000" width="27" height="27" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" stroke="#000000" stroke-width="1.05"><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.427734 3C14.062745 3 12.859456 3.9323872 12.521484 5.2558594L12.074219 7L12 7C11.133553 7 10.343298 7.2932543 9.7636719 7.7890625C9.1840453 8.2848707 8.8153921 8.9380401 8.5664062 9.625C8.0684347 10.99892 8 12.57785 8 14 A 1.0001 1.0001 0 0 0 9 15L10.119141 15L13.970703 45.017578 A 1.0001 1.0001 0 0 0 13.974609 45.042969C14.160517 46.237774 15.204427 47 16.367188 47L33.630859 47C34.794193 47 35.83786 46.235688 36.023438 45.042969 A 1.0001 1.0001 0 0 0 36.027344 45.017578L39.880859 15L41 15 A 1.0001 1.0001 0 0 0 42 14C42 12.57785 41.931565 10.99892 41.433594 9.625C41.184608 8.9380401 40.815955 8.2848707 40.236328 7.7890625C39.656702 7.2932543 38.866447 7 38 7L37.90625 7L37.474609 5.2734375 A 1.0001 1.0001 0 0 0 37.474609 5.2714844C37.141393 3.9416023 35.934385 3 34.5625 3L15.427734 3 z M 15.427734 5L34.5625 5C35.026615 5 35.42042 5.3076915 35.533203 5.7578125L35.84375 7L14.138672 7L14.458984 5.7519531C14.573013 5.3054253 14.966724 5 15.427734 5 z M 12.912109 8.9960938 A 1.0001 1.0001 0 0 0 13 9L37 9 A 1.0001 1.0001 0 0 0 37.064453 8.9980469 A 1.0001 1.0001 0 0 0 37.125 9L38 9C38.459053 9 38.706095 9.1106518 38.9375 9.3085938C39.168905 9.5065356 39.385047 9.8386001 39.554688 10.306641C39.802098 10.989256 39.830025 12.022136 39.878906 13L11.166016 13 A 1.0001 1.0001 0 0 0 10.955078 12.986328 A 1.0001 1.0001 0 0 0 10.835938 13L10.121094 13C10.169974 12.022136 10.197905 10.989256 10.445312 10.306641C10.614953 9.8386001 10.831095 9.5065355 11.0625 9.3085938C11.293905 9.1106518 11.540947 9 12 9L12.849609 9 A 1.0001 1.0001 0 0 0 12.912109 8.9960938 z M 12.136719 15L37.863281 15L36.708984 24L31.984375 24C30.659565 21.085293 28.095496 19.012008 24.992188 19.003906C24.945978 19.002306 24.902818 19.004791 24.857422 19.007812C21.786193 19.059813 19.278095 21.123031 17.988281 24L13.291016 24L12.136719 15 z M 24.945312 20.998047C24.966323 20.999147 24.947809 21 24.974609 21C27.392834 21 29.474358 22.682557 30.451172 25.34375 A 1.0001 1.0001 0 0 0 31.388672 26L31.490234 26L36.451172 26L35.810547 31L31.527344 31L31.388672 31 A 1.0001 1.0001 0 0 0 30.447266 31.660156C30.227471 32.270178 29.97672 32.828834 29.671875 33.296875C28.538498 35.034193 26.884731 35.976012 25.087891 35.998047L25.021484 35.998047C23.246013 35.998047 21.592289 35.09639 20.431641 33.398438 A 1.0001 1.0001 0 0 0 20.431641 33.396484C20.091871 32.900328 19.8123 32.306572 19.574219 31.65625 A 1.0001 1.0001 0 0 0 18.634766 31L18.521484 31L14.189453 31L13.548828 26L18.484375 26L18.589844 26 A 1.0001 1.0001 0 0 0 19.529297 25.339844C20.477663 22.708373 22.511851 21.026828 24.917969 21 A 1.0001 1.0001 0 0 0 24.945312 20.998047 z M 24.939453 23C23.705063 23.01347 22.665152 23.777929 22.001953 24.794922C21.338753 25.811913 20.978618 27.119966 20.994141 28.542969C21.009661 29.965972 21.398756 31.267249 22.083984 32.269531C22.769211 33.271814 23.826157 34.013466 25.060547 34C26.294937 33.98654 27.334848 33.22207 27.998047 32.205078C28.661247 31.188086 29.021382 29.880035 29.005859 28.457031C28.990339 27.034028 28.601244 25.732752 27.916016 24.730469C27.230789 23.728186 26.173843 22.986534 24.939453 23 z M 24.960938 25C25.386064 24.9954 25.843602 25.244939 26.263672 25.859375C26.683742 26.473812 26.994273 27.416385 27.005859 28.478516C27.017449 29.540646 26.728831 30.489827 26.322266 31.113281C25.915699 31.736734 25.464189 31.995363 25.039062 32C24.613936 32.0046 24.156399 31.755062 23.736328 31.140625C23.316259 30.526189 23.005727 29.583615 22.994141 28.521484C22.982551 27.459353 23.271169 26.510173 23.677734 25.886719C24.084301 25.263265 24.535811 25.004637 24.960938 25 z M 14.445312 33L18.021484 33C18.24578 33.51991 18.454188 34.047503 18.78125 34.525391C20.264602 36.695438 22.552956 37.998047 25.021484 37.998047L25.091797 37.998047 A 1.0001 1.0001 0 0 0 25.101562 37.998047C27.60154 37.971307 29.89481 36.614655 31.345703 34.390625 A 1.0001 1.0001 0 0 0 31.347656 34.390625C31.635588 33.948746 31.81459 33.471059 32.013672 33L35.554688 33L34.048828 44.736328C34.042405 44.777609 33.827526 45 33.630859 45L16.367188 45C16.173946 45 15.95727 44.775524 15.951172 44.736328L14.445312 33 z"></path></g></svg>
</a>
<a href="mailto:[email protected]" class="email-icon" title="Send feedback or say hi!">
<svg width="27" height="27" 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="M3 8L8.44992 11.6333C9.73295 12.4886 10.3745 12.9163 11.0678 13.0825C11.6806 13.2293 12.3194 13.2293 12.9322 13.0825C13.6255 12.9163 14.2671 12.4886 15.5501 11.6333L21 8M6.2 19H17.8C18.9201 19 19.4802 19 19.908 18.782C20.2843 18.5903 20.5903 18.2843 20.782 17.908C21 17.4802 21 16.9201 21 15.8V8.2C21 7.0799 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.2V15.8C3 16.9201 3 17.4802 3.21799 17.908C3.40973 18.2843 3.71569 18.5903 4.09202 18.782C4.51984 19 5.07989 19 6.2 19Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
</a>
</div>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="keyboardShortcutsModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title custom-modal-title">Keyboard Shortcuts</h4>
</div>
<div class="modal-body modal-container">
<table>
<tr>
<td><kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>S</kbd></td>
<td>Save notes as plain text</td>
</tr>
<tr>
<td><kbd>alt</kbd> / <kbd>Option</kbd> + <kbd>S</kbd></td>
<td>Save notes as PDF</td>
</tr>
<tr>
<td><kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>Delete</kbd></td>
<td>Delete notes</td>
</tr>
<tr>
<td><kbd>alt</kbd> / <kbd>Option</kbd> + <kbd>C</kbd></td>
<td>Copy notes to system clipboard</td>
</tr>
<tr>
<td><kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>,</kbd></td>
<td>Preferences</td>
</tr>
<tr>
<td><kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>K</kbd></td>
<td>Open list of Keyboard Shortcuts</td>
</tr>
<tr>
<td><kbd>alt</kbd> / <kbd>Option</kbd> + <kbd>F</kbd></td>
<td>Toggle focus mode</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="preferencesModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title custom-modal-title">Preferences</h4>
</div>
<div class="modal-body modal-container form-horizontal">
<div class="form-group">
<label class="control-label col-sm-6 col-md-6" for="fontSize">Theme</label>
<div class="col-sm-6 col-md-5">
<div class="theme-switcher">
<input type="radio" id="device-theme" value="device" name="themes" />
<label for="device-theme">
<span>
<svg width="15" height="15" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" />
</svg>
Device
</span>
</label>
<input type="radio" id="light-theme" value="light" name="themes" checked />
<label for="light-theme">
<span>
<svg width="15" height="15" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
</svg>
Light
</span>
</label>
<input type="radio" id="dark-theme" value="dark" name="themes" />
<label for="dark-theme">
<span>
<svg width="20" height="20" stroke-width="2" stroke="currentColor" viewBox="0 0 28 28" fill="none">
<path d="M10.5 9.99914C10.5 14.1413 13.8579 17.4991 18 17.4991C19.0332 17.4991 20.0176 17.2902 20.9132 16.9123C19.7761 19.6075 17.109 21.4991 14 21.4991C9.85786 21.4991 6.5 18.1413 6.5 13.9991C6.5 10.8902 8.39167 8.22304 11.0868 7.08594C10.7089 7.98159 10.5 8.96597 10.5 9.99914Z" stroke="currentColor" stroke-linejoin="round"></path>
<path d="M16.3561 6.50754L16.5 5.5L16.6439 6.50754C16.7068 6.94752 17.0525 7.29321 17.4925 7.35607L18.5 7.5L17.4925 7.64393C17.0525 7.70679 16.7068 8.05248 16.6439 8.49246L16.5 9.5L16.3561 8.49246C16.2932 8.05248 15.9475 7.70679 15.5075 7.64393L14.5 7.5L15.5075 7.35607C15.9475 7.29321 16.2932 6.94752 16.3561 6.50754Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M20.3561 11.5075L20.5 10.5L20.6439 11.5075C20.7068 11.9475 21.0525 12.2932 21.4925 12.3561L22.5 12.5L21.4925 12.6439C21.0525 12.7068 20.7068 13.0525 20.6439 13.4925L20.5 14.5L20.3561 13.4925C20.2932 13.0525 19.9475 12.7068 19.5075 12.6439L18.5 12.5L19.5075 12.3561C19.9475 12.2932 20.2932 11.9475 20.3561 11.5075Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
Dark
</span>
</label>
<span class="slider"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6 col-md-6" for="fontSize">Font size</label>
<div class="col-sm-6 col-md-5">
<select name="fontSize" id="fontSize" class="form-control">
<option value="10">10</option>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6 col-md-6" for="fontWeight">Font weight</label>
<div class="col-sm-6 col-md-5">
<select name="fontWeight" id="fontWeight" class="form-control">
<option value="normal">Normal</option>
<option value="bold">Bold</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6 col-md-6 generic-flex" for="lineHeight">
Line height
<a href="#" data-toggle="tooltip" title="Line height is a typographic term that refers to the vertical space between lines of text.">
<img src="img/tooltip.svg" alt="Tooltip Icon" />
</a>
</label>
<div class="col-sm-6 col-md-5">
<select name="lineHeight" id="lineHeight" class="form-control">
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
<option value="28">28</option>
<option value="30">30</option>
<option value="32">32</option>
<option value="34">34</option>
<option value="36">36</option>
<option value="38">38</option>
<option value="40">40</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6 col-md-6">Writing direction</label>
<div class="col-sm-6 col-md-5">
<select name="writeDirection" id="writeDirection" class="form-control">
<option value="ltr">Left to right</option>
<option value="rtl">Right to left</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6 col-md-6 generic-flex">
Monospaced
<a href="#" data-toggle="tooltip" title="Monospaced typefaces are ones in which all or most characters take up the same amount of horizontal space.">
<img src="img/tooltip.svg" alt="Tooltip Icon" />
</a>
</label>
<div class="col-sm-6 col-md-5">
<div class="checkbox checbox-switch">
<label>
<input type="checkbox" name="monospaced" id="monospaced" checked="checked" />
<span></span>
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6 col-md-6 generic-flex">
Dyslexic font
<a href="#" data-toggle="tooltip" title="Dyslexic font is a typeface designed to help people with dyslexia read more easily.">
<img src="img/tooltip.svg" alt="Tooltip Icon" />
</a>
</label>
<div class="col-sm-6 col-md-5">
<div class="checkbox checbox-switch">
<label>
<input type="checkbox" name="dyslexic" id="dyslexic" />
<span></span>
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6 col-md-6">Character and word count</label>
<div class="col-sm-6 col-md-5">
<div class="checkbox checbox-switch">
<label>
<input type="checkbox" name="showWordCountPill" id="showWordCountPill" checked="checked" />
<span></span>
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6 col-md-6 generic-flex">
Optimal line length
<a href="#" data-toggle="tooltip" title="Optimal line length refers to the ideal number of characters (including spaces) per line of text that maximizes readability and comfort for readers.">
<img src="img/tooltip.svg" alt="Tooltip Icon" />
</a>
</label>
<div class="col-sm-6 col-md-5">
<div class="checkbox checbox-switch">
<label>
<input type="checkbox" name="optimalLineLength" id="optimalLineLength" checked="checked" />
<span></span>
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6 col-md-6 generic-flex">
Spellcheck
<a href="#" data-toggle="tooltip" title="Uses your system's spell-checker">
<img src="img/tooltip.svg" alt="Tooltip Icon" />
</a>
</label>
<div class="col-sm-6 col-md-5">
<div class="checkbox checbox-switch">
<label>
<input type="checkbox" name="spellCheck" id="spellCheck"/>
<span></span>
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6 col-md-6 generic-flex">
Tab Indentation
<a href="#" data-toggle="tooltip" title="Enables tab indentation for structured writing like lists, tables, code, etc.">
<img src="img/tooltip.svg" alt="Tooltip Icon" />
</a>
</label>
<div class="col-sm-6 col-md-5">
<div class="checkbox checbox-switch">
<label>
<input type="checkbox" name="tabIndentation" id="tabIndentation"/>
<span></span>
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6 col-md-6" for="company"> </label>
<div class="col-sm-6 col-md-5">
<a href="javascript:void(0);" id="resetPreferences" title="Reset to default preferences">Reset preferences</a>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="toast"></div>
<div id="affiliatePopup" class="affiliate-popup">
<div class="affiliate-content">
<a href="#" id="affiliateLink" target="_blank" rel="noopener noreferrer">
<span id="affiliateText"></span>
</a>
<button id="closeAffiliatePopup" class="close-popup" aria-label="Close popup">×</button>
</div>
</div>
<!-- White Noise Modal -->
<div id="whiteNoiseModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title custom-modal-title">
Ambient Noise
<button type="button" class="global-mute-button" id="globalMuteButton" title="Mute all sounds">
<svg id="globalPlayingIcon" width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z" />
</svg>
<svg id="globalMuteIcon" width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6" style="display: none;">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z" />
</svg>
</button>
</h4>
</div>
<div class="modal-body">
<div class="sound-buttons">
<div class="sound-button" data-sound="coffee-shop">
<div>
<svg fill="#000000" width="20" height="20" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><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="M25.478516 1.9277344 A 1.50015 1.50015 0 0 0 24.001953 3.4472656C24.001953 5.4472656 23.314453 5.7773438 22.064453 6.7773438C20.814453 7.7773438 19.001953 9.4472652 19.001953 12.447266 A 1.50015 1.50015 0 1 0 22.001953 12.447266C22.001953 10.447266 22.6875 10.119141 23.9375 9.1191406C25.1875 8.1191406 27.001953 6.4472656 27.001953 3.4472656 A 1.50015 1.50015 0 0 0 25.478516 1.9277344 z M 31.478516 3.9277344 A 1.50015 1.50015 0 0 0 30.001953 5.4472656C30.001953 6.1972656 29.854916 6.5110368 29.650391 6.8007812C29.445865 7.0905258 29.101563 7.3730469 28.601562 7.7480469C28.101562 8.1230469 27.445865 8.5905258 26.900391 9.3632812C26.354916 10.136037 26.001953 11.197266 26.001953 12.447266 A 1.50015 1.50015 0 1 0 29.001953 12.447266C29.001953 11.697266 29.147037 11.383494 29.351562 11.09375C29.556089 10.804006 29.900391 10.523438 30.400391 10.148438C30.900391 9.773437 31.556089 9.3040055 32.101562 8.53125C32.647038 7.7584945 33.001953 6.6972656 33.001953 5.4472656 A 1.50015 1.50015 0 0 0 31.478516 3.9277344 z M 14.615234 15.947266C13.643234 15.947266 12.708828 16.356359 12.048828 17.068359C11.388828 17.781359 11.052953 18.745844 11.126953 19.714844L12.533203 38.021484C12.832203 41.904484 16.117719 44.947266 20.011719 44.947266L27.900391 44.947266C31.795391 44.947266 35.080906 41.904484 35.378906 38.021484L35.384766 37.947266L37.501953 37.947266C41.626454 37.947266 45.001953 34.571767 45.001953 30.447266L45.001953 25.447266C45.001953 23.532311 43.416908 21.947266 41.501953 21.947266L36.613281 21.947266L36.785156 19.716797C36.859156 18.748797 36.524234 17.784313 35.865234 17.070312C35.204234 16.357312 34.268875 15.947266 33.296875 15.947266L14.615234 15.947266 z M 36.382812 24.947266L41.501953 24.947266C41.796998 24.947266 42.001953 25.15222 42.001953 25.447266L42.001953 30.447266C42.001953 32.950765 40.005452 34.947266 37.501953 34.947266L35.615234 34.947266L36.382812 24.947266 z"></path></g></svg>
<span>Coffee Shop</span>
</div>
<div class="volume-control">
<input type="range" min="0" max="100" value="70" class="volume-slider" id="coffee-shop-volume">
</div>
</div>
<div class="sound-button" data-sound="airport">
<div>
<svg fill="#000000" height="20" width="20" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 193.921 193.921" xml:space="preserve"><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="M193.887,111.272c-0.188-1.625-1.167-3.047-2.617-3.805l-0.194-0.091c-0.447-0.187-11.015-4.581-17.491-5.49 c-1.228-0.173-2.52,0.068-3.704,0.661l-21.749,7.706c-4.243-2.182-20.33-10.448-39.28-20.116l44.797-23.602 c1.317-0.694,2.084-1.884,2.049-3.183c-0.034-1.298-0.862-2.445-2.215-3.068l-15.1-6.964c-1.449-0.668-3.752-0.932-5.345-0.592 L64.221,67.516C50.06,60.409,38.373,54.646,33.5,52.492c-3.577-1.581-7.926-2.378-12.925-2.378c-8.249,0-18.341,2.371-20.206,5.87 c-0.073,0.134-4.997,14.742,23.441,31.09l106.053,54.043c0.106,0.05,2.635,1.316,5.095,1.748c4.163,0.731,8.671,0.943,13.308,0.943 h1.344c0.643,0,1.275,0,1.896,0h0.419v-0.148c3,0,5.204-1.298,5.558-1.543l34.687-26.439l0.082-0.099 C193.487,114.511,194.073,112.903,193.887,111.272z M151.922,140.995l0.001,0v0.016L151.922,140.995z"></path> </g></svg>
<span>Airport</span>
</div>
<div class="volume-control">
<input type="range" min="0" max="100" value="30" class="volume-slider" id="airport-volume">
</div>
</div>
<div class="sound-button" data-sound="winter-morning">
<div>
<svg fill="#000000" width="20" height="20" viewBox="0 0 24 24" id="winter-ice" xmlns="http://www.w3.org/2000/svg" class="icon multi-color"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><title style="stroke-width: 2;">winter ice</title><path id="primary-stroke" d="M12,3v7m9,2H14m-2,9V14M3,12h7m0,0a2,2,0,1,0,2-2A2,2,0,0,0,10,12Zm5-7L12,7,9,5M19,9l-2,3,2,3m-4,4-3-2L9,19M5,15l2-3L5,9" style="fill: none; stroke: #000000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path></g></svg>
<span>Winter Morning</span>
</div>
<div class="volume-control">
<input type="range" min="0" max="100" value="60" class="volume-slider" id="winter-morning-volume">
</div>
</div>
<div class="sound-button" data-sound="suburban-street">
<div>
<svg width="20" height="20" viewBox="0 0 24 24" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><defs><style>.cls-1{fill:none;stroke:#020202;stroke-miterlimit:10;stroke-width:1.92px;}</style></defs><polyline class="cls-1" points="20.63 11.04 20.63 22.54 3.38 22.54 3.38 11.04"></polyline><polygon class="cls-1" points="22.54 11.04 12 2.42 1.46 11.04 1.46 12 22.54 12 22.54 11.04"></polygon><rect class="cls-1" x="13.92" y="16.79" width="1.92" height="5.75"></rect><rect class="cls-1" x="8.17" y="16.79" width="1.92" height="1.92"></rect><line class="cls-1" x1="23.5" y1="22.54" x2="0.5" y2="22.54"></line><polyline class="cls-1" points="3.38 9.47 3.38 1.46 7.21 1.46 7.21 6.34"></polyline><line class="cls-1" x1="9.13" y1="1.46" x2="1.46" y2="1.46"></line></g></svg>
<span>Suburban Street</span>
</div>
<div class="volume-control">
<input type="range" min="0" max="100" value="70" class="volume-slider" id="suburban-street-volume">
</div>
</div>
<div class="sound-button" data-sound="rain">
<div>
<svg fill="#000000" width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="rain-alt" class="icon glyph"><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="M21,9a4,4,0,0,1-4,4H6A3,3,0,1,1,7.08,7.21a5,5,0,0,1,9-2.09A4.08,4.08,0,0,1,17,5,4,4,0,0,1,21,9ZM16.89,21.45l2-4a1,1,0,1,0-1.78-.9l-2,4a1,1,0,0,0,.44,1.34A.93.93,0,0,0,16,22,1,1,0,0,0,16.89,21.45Zm-8,0,2-4a1,1,0,1,0-1.78-.9l-2,4a1,1,0,0,0,.44,1.34A.93.93,0,0,0,8,22,1,1,0,0,0,8.89,21.45Zm5-2,1-2a1,1,0,1,0-1.78-.9l-1,2a1,1,0,0,0,.44,1.34A.93.93,0,0,0,13,20,1,1,0,0,0,13.89,19.45Zm-8,0,1-2a1,1,0,0,0-1.78-.9l-1,2a1,1,0,0,0,.44,1.34A.93.93,0,0,0,5,20,1,1,0,0,0,5.89,19.45Z"></path></g></svg>
<span>Rain</span>
</div>
<div class="volume-control">
<input type="range" min="0" max="100" value="15" class="volume-slider" id="rain-volume">
</div>
</div>
<div class="sound-button" data-sound="rain-on-leaves">
<div>
<svg fill="#000000" height="20" width="20" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.001 512.001" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M400.278,367.668c18.455-17.355,33.987-38.867,45.786-63.322c16.156-33.489,24.644-71.784,24.644-110.747 c0-38.963-8.567-77.258-24.724-110.747c-15.857-32.866-38.655-60.429-65.901-79.708c-5.924-4.192-13.857-4.192-19.781,0 c-27.248,19.279-50.035,46.841-65.892,79.708c-16.156,33.489-24.698,71.784-24.698,110.747c0,3.265,0.081,6.523,0.201,9.777 c-2.809-1.624-5.639-3.217-8.514-4.742c-34.422-18.254-72.256-28.651-109.412-30.067c-36.458-1.384-71.49,5.826-101.287,20.866 c-6.48,3.271-10.192,10.271-9.264,17.471c4.266,33.104,17.942,66.146,39.55,95.553c22.017,29.964,51.848,55.45,86.27,73.704 s72.254,28.651,109.411,30.067c2.956,0.113,5.9,0.169,8.834,0.169c30.13,0,59.253-5.936,84.781-17.316 c28.406,15.556,46.607,45.512,46.607,78.287v27.515c0,9.454,7.664,17.118,17.118,17.118s17.118-7.664,17.118-17.118v-27.515 C451.124,427.482,431.658,390.617,400.278,367.668z M183.295,345.916c-54.931-29.13-94.489-78.529-105.786-131.071 c49.833-20.127,112.919-15.094,167.849,14.037c10.603,5.623,20.625,12.008,29.989,19.017c4.148,19.747,10.531,38.77,19.058,56.447 c1.376,2.853,2.823,5.651,4.304,8.422l-24.356-12.915c-8.352-4.429-18.714-1.248-23.143,7.104 c-4.429,8.353-1.249,18.714,7.104,23.143l69.973,37.107C282.87,378.056,230.123,370.749,183.295,345.916z M387.604,331.328 c0.001-35.134-0.203-81.485-0.239-89.197c-0.043-9.428-7.699-16.943-17.117-16.943c-0.026,0-0.054,0-0.08,0 c-9.454,0-17.083,7.645-17.04,17.099c0.124,27.157,0.237,62.941,0.237,89.718c-31.044-35.057-49.42-85.23-49.42-138.406 c0-62.177,25.109-120.269,66.236-154.866c41.125,34.596,66.236,92.688,66.236,154.866 C436.418,246.429,418.282,296.302,387.604,331.328z"></path> </g> </g> </g></svg>
<span>Rain on Leaves</span>
</div>
<div class="volume-control">
<input type="range" min="0" max="100" value="70" class="volume-slider" id="rain-on-leaves-volume">
</div>
</div>
<div class="sound-button" data-sound="thunder">
<div>
<svg fill="#000000" width="20" height="20" viewBox="0 0 24 24" id="thunder" data-name="Flat Color" xmlns="http://www.w3.org/2000/svg" class="icon flat-color"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path id="primary" d="M18.82,9.18A2,2,0,0,0,17,8H15.19l1.33-3.26a2,2,0,0,0-.19-1.84A2.06,2.06,0,0,0,14.62,2H10.28A2,2,0,0,0,8.37,3.27l-3.23,8a2,2,0,0,0,.2,1.83,2.06,2.06,0,0,0,1.71.9H9.81L8,20.74a1,1,0,0,0,.5,1.15A1.12,1.12,0,0,0,9,22a1,1,0,0,0,.76-.35l8.8-10.37A2,2,0,0,0,18.82,9.18Z" style="fill: #000000;"></path></g></svg>
<span>Thunder</span>
</div>
<div class="volume-control">
<input type="range" min="0" max="100" value="70" class="volume-slider" id="thunder-volume">
</div>
</div>
<div class="sound-button" data-sound="waves">
<div>
<svg width="17" height="17" 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="M2 6C2.6 6.5 3.2 7 4.5 7C7 7 7 5 9.5 5C10.8 5 11.4 5.5 12 6C12.6 6.5 13.2 7 14.5 7C17 7 17 5 19.5 5C20.8 5 21.4 5.5 22 6M2 18C2.6 18.5 3.2 19 4.5 19C7 19 7 17 9.5 17C10.8 17 11.4 17.5 12 18C12.6 18.5 13.2 19 14.5 19C17 19 17 17 19.5 17C20.8 17 21.4 17.5 22 18M2 12C2.6 12.5 3.2 13 4.5 13C7 13 7 11 9.5 11C10.8 11 11.4 11.5 12 12C12.6 12.5 13.2 13 14.5 13C17 13 17 11 19.5 11C20.8 11 21.4 11.5 22 12" stroke="#000000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
<span>Waves</span>
</div>
<div class="volume-control">
<input type="range" min="0" max="100" value="50" class="volume-slider" id="waves-volume">
</div>
</div>
<div class="sound-button" data-sound="fireside">
<div>
<svg width="20" height="20" viewBox="0 0 24 24" id="Flat_Color" data-name="Flat Color" xmlns="http://www.w3.org/2000/svg" fill="#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 id="primary" d="M17.4,8.38A7.1,7.1,0,0,1,15,3a1,1,0,0,0-1.55-.83,10.89,10.89,0,0,0-5,6.73A4.37,4.37,0,0,1,8,7.77,1,1,0,0,0,7.27,7a1,1,0,0,0-1,.25C5,8.58,4,12,4,14c0,5.08,2.92,8,8,8s8-3,8-8C20,11.22,18.62,9.71,17.4,8.38Z" style="fill:#000000"></path></g></svg>
<span>Fireside</span>
</div>
<div class="volume-control">
<input type="range" min="0" max="100" value="60" class="volume-slider" id="fireside-volume">
</div>
</div>
<div class="sound-button" data-sound="crickets">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512"><path fill="#000000" d="M261.635 85.86L247.09 96.466c21.23 29.114 69.244 55.739 112.074 79.193c4.964 2.718 9.83 5.363 14.594 7.955c-9.767-3.123-19.881-6.35-30.317-9.775c-26.672-8.755-54.46-18.512-77.57-29.09s-41.403-22.446-48.861-32.674l-14.543 10.606c11.293 15.487 31.657 27.33 55.912 38.433s52.538 20.995 79.45 29.828c26.91 8.833 52.481 16.61 70.808 23.192c9.163 3.29 16.56 6.339 20.978 8.732c1.43.775 1.879 1.178 2.569 1.68c-.44 2.39-1.41 6.243-4.782 11.303c-6.575 9.761-18.197 14.277-29.384 15.49c4.176 1.229 6.886 8.01 6.88 17.219c9.784-1.672 17.722-5.09 24.008-9.342c7.844-4.62 13.311-10.662 16.674-16.664c4.461-9.639 9.002-23.26 3.248-31.955c-1.703-2.47-3.74-4.467-6.115-6.506c-4.751-4.078-10.966-8.21-18.477-12.776c-15.022-9.133-35.145-19.788-56.427-31.443c-42.565-23.31-89.902-51.696-106.174-74.012m-114.397 24.762c-9.4 3.874-8.762 10.376-3.888 16.318c14.772 18.104 27.812 44.994 40.523 58.752a9926 9926 0 0 1 13.887 15.059c-2.567-4.963-4.868-9.385-7.864-15.219c-10.224-19.909-19.95-47.74-29.648-65.207c-3.197-4.244-7.41-9.635-13.01-9.703m-30.687 20.363c-11.185 1.776-7.269 11.57-3.813 17.637c10.272 22.183 29.461 39.584 38.063 57.246c18.24 43.23 31.939 85.906 58.873 112.25a73.2 73.2 0 0 1 10.844-12.451c7.632-6.975 16.662-11.506 26.277-14.346c-11.05-22.287-7.461-19.075-76.143-93.414c-16.09-17.416-28.97-44.54-41.248-59.586c-3.769-3.53-7.776-6.975-12.853-7.336m-14.463 34.899L62.422 382.042l-39.764 10.867l3.229 11.045l49.888-13.002l35.383-211.057a351 351 0 0 1-9.07-14.011m23.84 34.777l-3.473 20.711c2.635-.34 5.295-.672 7.97-1l3.016-8.492c-2.395-3.862-4.895-7.525-7.513-11.219m152.787 11.065c-.23 7.585-1.024 14.207.398 19.38c2.012 7.321 6.792 14.234 28.57 20.516l5.694 1.643l.742 5.877c1.323 10.48 3.45 21.298 7.139 31.388c6.038 2.343 9.859-.249 15.707-.43a22.2 22.2 0 0 1 7.096 1.006a101 101 0 0 1-.227-4.816c.92-25.278 8.112-43.763 27.992-56.736c-26.79-12.354-65.704-17.266-93.111-17.828m-18.477 15.777c-11.795.668-23.882 1.43-36.047 2.273c30.931 34.513 30.044 36.855 41.002 58.06c4.566-.45 9.15-.654 13.68-.648c4.433.006 8.808.205 13.066.522a127 127 0 0 0 8.332-4.608c-1.298-5.421-2.283-10.807-3.058-16.019c-21.288-7.389-32.065-18.864-35.457-31.205c-.789-2.87-1.252-5.67-1.518-8.375m-116.218 9.389c-.565.063-1.146.12-1.71.185a1098 1098 0 0 0-22.97 2.877l-10.219 60.965c21.487 4.577 45.342 7.712 69.647 8.295c-16.523-23.339-25.31-47.885-34.748-72.322m243.205 4.591c-9.683 4.55-15.505 10.473-19.33 17.112c-4.66 8.084-6.27 17.674-6.065 27.31c.115 5.376.81 10.7 1.754 15.637c1.282 5.49 4.624 10.074 9.328 10.789c7.816 1.117 15.351-.584 21.184-5.463c5.832-4.88 10.597-13.285 11.35-27.947c.136-2.67-.092-5.496-.589-8.352a52 52 0 0 1-.61 6.059c-2.11 13.112-8.581 22.975-14.454 22.03c-5.872-.947-8.923-12.34-6.814-25.45c2.068-12.839 8.332-22.61 14.14-22.057c-3.176-4.713-6.832-7.906-9.894-9.668M68.59 248.712c-5.001 1.124-9.696 2.29-14.014 3.498c-10.94 3.062-19.547 6.474-24.629 9.594c-4.341 2.665-5.022 4.082-5.185 4.57c.286.44.921 1.484 2.47 2.87c2.789 2.492 7.585 5.705 13.858 8.978c5.673 2.96 12.603 5.996 20.441 8.959l7.059-38.47zm362.127 25.453l-7.27 4.687c-.01.33-.01.66-.027.99a77 77 0 0 1-1.324 10.856l42.093 58.615l25.153-9.761l-6.514-16.782l-15.16 6.41zM282.99 305.712a155 155 0 0 0-3.642.004c-18.142.23-36.153 3.612-46.69 13.24c-19.557 17.87-22.155 49.233-25.113 77.91l24.922 29.274l15.322-7.645l-21.021-26.187l.724-4.034c3.167-17.61 4.964-34.087 22.432-50.298l2.869-2.664l3.906.285c13.501.981 25.494 1.403 34.512-.506c8.927-1.89 14.718-5.24 19.404-13.361c1.65-3.378 1.663-5.31.98-7.598c-.542-1.822-2.077-4.087-4.187-6.504c-7.586-1.06-15.935-1.825-24.418-1.916m54.399 2.385c-8.286 3.23-9.852 14.926-7.436 21.496c1.977 5.303 6.073 10.403 11.713 14.967c10.212 8.263 25.065 14.122 36.346 17.011l35.115-24.441l38.117 50.508l37.594-12.412l-4.143-14.13l-26.914 10.155l-40.996-57.092l-41.586 29.73l-5.344-4.486c-11.343-9.523-19.438-22.073-25.904-27.765c-3.233-2.846-5.26-3.572-6.562-3.541m-231.25 10.605l-4.125 24.608c34.766.566 67.115-2.114 98.091-6.745a100 100 0 0 1 .782-1.986a101 101 0 0 1-4.526-4.303a173 173 0 0 1-2.836-2.968c-30.55.615-60.648-2.936-87.386-8.606m-55.612 28.436L30.06 352.73l3.23 11.045l14.898-3.882l2.34-12.756zm209.116 6.607c-2.152 3.434-2.897 8.202-4.096 12.193l38.459 32.315l11.578-13.781l-29.389-24.696l1.612-5.363c-5.934.075-12.007-.253-18.164-.668"></path></svg>
<span>Crickets</span>
</div>
<div class="volume-control">
<input type="range" min="0" max="100" value="70" class="volume-slider" id="crickets-volume">
</div>
</div>
<div class="sound-button" data-sound="singing-bowl">
<div>
<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 949.984 949.984" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M623.393,949.092c13.899,0,25.1-11.299,25.1-25.1v-49.799c-55,19.699-113.6,30.1-173.5,30.1s-118.6-10.301-173.5-30.1 v49.799c0,13.9,11.3,25.1,25.1,25.1H623.393z"></path> <path d="M882.292,115.292c-40.6-30.2-98-21.8-128.3,18.8l-180.6,242.7h228.6l99.1-133.2 C931.292,202.993,922.893,145.593,882.292,115.292z"></path> <path d="M310.292,849.492c51.3,18.5,106.8,28.5,164.7,28.5s113.4-10,164.7-28.5c168.899-60.699,292.899-212.699,310.1-398.599 c2.4-25.7-18-47.9-43.8-47.9h-123.6h-228.5h-509.9c-25.8,0-46.2,22.2-43.8,47.9C17.392,636.793,141.392,788.793,310.292,849.492z"></path> <polygon points="155.692,239.893 190.292,155.693 279.092,116.792 189.592,82.693 155.692,0.893 121.692,82.693 32.192,116.792 120.992,155.693 "></polygon> </g> </g> </g></svg>
<span>Singing Bowl</span>
</div>
<div class="volume-control">
<input type="range" min="0" max="100" value="70" class="volume-slider" id="singing-bowl-volume">
</div>
</div>
<div class="sound-button" data-sound="train">
<div>
<svg height="20" width="20" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <style type="text/css"> .st0{fill:#000000;} </style> <g> <path class="st0" d="M349.917,432.716v-0.635H162.472v0.635h-10.544L89.982,512h45.644l13.705-20.233h213.334L376.367,512h45.659 l-61.95-79.284H349.917z M162.558,472.248l13.988-20.648h158.912l13.988,20.648H162.558z"></path> <path class="st0" d="M256.002,0C112.749,0,71.397,51.982,71.397,91.663v258.601c0,34.895,28.29,63.216,63.224,63.216h242.765 c34.942,0,63.217-28.321,63.217-63.216V91.663C440.603,51.982,399.259,0,256.002,0z M189.091,56.987h133.815 c8.888,0,16.106,7.21,16.106,16.098c0,8.912-7.218,16.114-16.106,16.114H189.091c-8.889,0-16.098-7.202-16.098-16.114 C172.992,64.197,180.201,56.987,189.091,56.987z M160.275,358.439c-11.093,0-20.084-8.991-20.084-20.084 c0-11.094,8.991-20.084,20.084-20.084c11.093,0,20.084,8.99,20.084,20.084C180.358,349.448,171.368,358.439,160.275,358.439z M241.943,239.278H134.731v-98.064h107.212V239.278z M351.737,358.439c-11.094,0-20.084-8.991-20.084-20.084 c0-11.094,8.99-20.084,20.084-20.084c11.092,0,20.084,8.99,20.084,20.084C371.821,349.448,362.829,358.439,351.737,358.439z M382.047,239.278H270.061v-98.064h111.986V239.278z"></path> </g> </g></svg>
<span>Train</span>
</div>
<div class="volume-control">
<input type="range" min="0" max="100" value="65" class="volume-slider" id="train-volume">
</div>
</div>
<div class="sound-button" data-sound="white-noise">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path d="M8.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-1 0v-11a.5.5 0 0 1 .5-.5zm-2 2a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zm4 0a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zm-6 1.5A.5.5 0 0 1 5 6v4a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm8 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5z"/>
</svg>
<span>White Noise</span>
</div>
<div class="volume-control">
<input type="range" min="0" max="100" value="4" class="volume-slider" id="white-noise-volume">
</div>
</div>
<div class="sound-button" data-sound="keyboard">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-keyboard h-4 w-4 shrink-0"><path d="M10 8h.01"></path><path d="M12 12h.01"></path><path d="M14 8h.01"></path><path d="M16 12h.01"></path><path d="M18 8h.01"></path><path d="M6 8h.01"></path><path d="M7 16h10"></path><path d="M8 12h.01"></path><rect width="20" height="16" x="2" y="4" rx="2"></rect></svg>
<span>Keyboard</span>
</div>
<div class="volume-control">
<input type="range" min="0" max="100" value="15" class="volume-slider" id="keyboard-volume">
</div>
</div>
<div class="sound-button" data-sound="wind-chimes">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wind h-4 w-4 shrink-0"><path d="M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2"></path><path d="M9.6 4.6A2 2 0 1 1 11 8H2"></path><path d="M12.6 19.4A2 2 0 1 0 14 16H2"></path></svg>
<span>Wind Chimes</span>
</div>
<div class="volume-control">
<input type="range" min="0" max="100" value="20" class="volume-slider" id="wind-chimes-volume">
</div>
</div>
<div class="sound-button" data-sound="clock">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-4 w-4 shrink-0"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
<span>Clock</span>
</div>
<div class="volume-control">
<input type="range" min="0" max="100" value="30" class="volume-slider" id="clock-volume">
</div>
</div>
<div class="sound-button" data-sound="ceiling-fan">
<div>
<svg fill="#000000" width="20" height="20" viewBox="0 0 24 24" 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 fill-rule="evenodd" clip-rule="evenodd" d="M12 3.48154C7.29535 3.48154 3.48148 7.29541 3.48148 12.0001C3.48148 16.7047 7.29535 20.5186 12 20.5186C16.7046 20.5186 20.5185 16.7047 20.5185 12.0001C20.5185 7.29541 16.7046 3.48154 12 3.48154ZM2 12.0001C2 6.47721 6.47715 2.00006 12 2.00006C17.5228 2.00006 22 6.47721 22 12.0001C22 17.5229 17.5228 22.0001 12 22.0001C6.47715 22.0001 2 17.5229 2 12.0001Z"></path> <path d="M12 11.3C11.8616 11.3 11.7262 11.3411 11.6111 11.418C11.496 11.4949 11.4063 11.6042 11.3533 11.7321C11.3003 11.86 11.2864 12.0008 11.3134 12.1366C11.3405 12.2724 11.4071 12.3971 11.505 12.495C11.6029 12.5929 11.7277 12.6596 11.8634 12.6866C11.9992 12.7136 12.14 12.6997 12.2679 12.6467C12.3958 12.5937 12.5051 12.504 12.582 12.3889C12.6589 12.2738 12.7 12.1385 12.7 12C12.7 11.8144 12.6262 11.6363 12.495 11.505C12.3637 11.3738 12.1857 11.3 12 11.3ZM12.35 5.00002C15.5 5.00002 15.57 7.49902 13.911 8.32502C13.6028 8.50778 13.3403 8.75856 13.1438 9.05822C12.9473 9.35787 12.8218 9.69847 12.777 10.054C13.1117 10.1929 13.4073 10.4116 13.638 10.691C16.2 9.29102 19 9.84401 19 12.35C19 15.5 16.494 15.57 15.675 13.911C15.4869 13.6029 15.232 13.341 14.9291 13.1448C14.6262 12.9485 14.283 12.8228 13.925 12.777C13.7844 13.1108 13.566 13.406 13.288 13.638C14.688 16.221 14.128 19 11.622 19C8.5 19 8.423 16.494 10.082 15.668C10.3852 15.4828 10.644 15.2332 10.84 14.9368C11.036 14.6404 11.1644 14.3046 11.216 13.953C10.8729 13.8188 10.5711 13.5967 10.341 13.309C7.758 14.695 5 14.149 5 11.65C5 8.50002 7.478 8.42302 8.304 10.082C8.48945 10.3888 8.74199 10.6496 9.04265 10.8448C9.34332 11.0399 9.68431 11.1645 10.04 11.209C10.1748 10.8721 10.3971 10.5772 10.684 10.355C9.291 7.80001 9.844 5.00002 12.336 5.00002H12.35Z"></path> </g></svg>
<span>Ceiling Fan</span>
</div>
<div class="volume-control">
<input type="range" min="0" max="100" value="80" class="volume-slider" id="ceiling-fan-volume">
</div>
</div>
<div class="sound-button" data-sound="tuning-radio">
<div>
<svg width="20" height="20" 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="M2 14C2 10.2288 2 8.34315 3.17157 7.17157C4.34315 6 6.22876 6 10 6H14C17.7712 6 19.6569 6 20.8284 7.17157C22 8.34315 22 10.2288 22 14C22 17.7712 22 19.6569 20.8284 20.8284C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14Z" stroke="#1b1b1d" stroke-width="1.5"></path> <path d="M5 11C5 9.89543 5.89543 9 7 9H17C18.1046 9 19 9.89543 19 11C19 12.1046 18.1046 13 17 13H7C5.89543 13 5 12.1046 5 11Z" stroke="#1b1b1d" stroke-width="1.5"></path> <path d="M9 17C9 17.8284 8.32843 18.5 7.5 18.5C6.67157 18.5 6 17.8284 6 17C6 16.1716 6.67157 15.5 7.5 15.5C8.32843 15.5 9 16.1716 9 17Z" stroke="#1b1b1d" stroke-width="1.5"></path> <path d="M15 11.5V13" stroke="#1b1b1d" stroke-width="1.5" stroke-linecap="round"></path> <path d="M13 17H18" stroke="#1b1b1d" stroke-width="1.5" stroke-linecap="round"></path> <path d="M6.5 6L15 2" stroke="#1b1b1d" stroke-width="1.5" stroke-linecap="round"></path> </g></svg>
<span>Tuning Radio</span>
</div>
<div class="volume-control">
<input type="range" min="0" max="100" value="60" class="volume-slider" id="tuning-radio-volume">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="newFeatureModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title custom-modal-title">I'm working on a Deep Breathing Exercise tool</h4>
</div>
<div class="modal-body modal-container">
<p>Buy me <a href="https://buymeacoffee.com/amitmerchant" target="_blank">12 coffees</a>, a collective goal, and I'll release a tool <b>to help you deep breathe</b> (along with rest of the tools) which has helped me a lot to combat my anxiety and de-stress in an effective way.</p>
<img src="art/deep-breath-preview.png" alt="Buy me a coffee" style="width: 100%; border-radius: 10px;">
<p style="margin-top: 10px;">This tool can also be used to unwind yourself after a long writing session.</p>
<p>Thanks for your support! ❤️</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
if (localStorage.getItem('mode')) {
if (localStorage.getItem('mode') == 'dark') {
document.body.classList.add("dark");
document.querySelector('.navbar').classList.remove("navbar-default");
} else {
document.body.classList.remove("dark");
document.querySelector('.navbar').classList.add("navbar-default");
}
} else {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add("dark");
document.querySelector('.navbar').classList.remove("navbar-default");
} else {
document.body.classList.remove("dark");
document.querySelector('.navbar').classList.add("navbar-default");
}
}
const favicon = document.querySelector('link[rel="icon"]')
document.addEventListener("visibilitychange", () => {
const hidden = document.hidden
favicon.setAttribute("href", `/favicon${hidden ? "-hidden" : ""}.ico`)
})
</script>
<script src="js/libraries/jquery.min.js"></script>
<script src="js/libraries/bootstrap.min.js"></script>
<script src="js/libraries/sweetalert2.all.min.js"></script>
<script src="js/libraries/jspdf.umd.min.js"></script>
<script src="js/libraries/docx.min.js"></script>
<script src="js/utils.js"></script>
<script src="js/selector.js"></script>
<script src="js/app.js"></script>