-
-
Notifications
You must be signed in to change notification settings - Fork 65
/
index.html
757 lines (707 loc) · 56.8 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
<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/">Rich Text Notes</a></li>
<li><a class="dropdown-item" href="/markdown-editor">Markdown Editor</a></li>
<li><a class="dropdown-item" href="/pomodoro-timer/">Pomodoro Timer</a></li>
<li><a class="dropdown-item" href="/voice-notes/">Voice Notes</a></li>
<li><a class="dropdown-item" href="/tasks/">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>
</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="Enable dark mode [Ctrl/Cmd + M]">
<a id="mode" href="javascript:void(0);">
<img
src="img/navbar/light-theme.svg"
alt="Light theme Icon"
id="themeIcon"
/>
</a>
</span>
<span title="Preferences [Ctrl/Cmd + ,]">
<a id="mode" class="preference-icon">
<img
src="img/navbar/preferences.svg"
alt="Preferences"
id="Preferences"
data-toggle="modal" data-target="#preferencesModal"
/>
</a>
</span>
<span title="Play Ambient Noise">
<a href="#white-noise" data-toggle="modal" data-target="#whiteNoiseModal" title="Play Ambient Noise">
<span>
<img
src="img/navbar/music.svg"
alt="Play Ambient Noise"
/>
</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">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..."
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="#donors">Donors</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#changelog">Changelog</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#supporters">Supporters</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><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 small <a href="https://www.paypal.com/paypalme/AmitMerchant"
target="_blank">donation</a> (or <a href="https://buymeacoffee.com/amitmerchant" target="_blank">buy me a coffee</a>) so that I keep working on improving it further and the experience remains ad-free. 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="donors" class="container tab-pane fade">
<p>This is a list of donors 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/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>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>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 id="supporters" class="container tab-pane fade">
<p>These are our valued corporate supporters:</p>
<ul>
<li><a href="https://mermory.com" target="_blank">Mermory</a> — Make waves for the future of flashcards</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="30px" height="30px" 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="30px" height="30px" 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-1 { 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-1" 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="30px" height="30px" 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:bullredeyes@gmail.com" class="email-icon" title="Send feedback or say hi!">
<svg width="30px" height="30px" 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>M</kbd></td>
<td>Toggle theme</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">Font size</label>
<div class="col-sm-6 col-md-4">
<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-4">
<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-4">
<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-4">
<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-4">
<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">Character and word count</label>
<div class="col-sm-6 col-md-4">
<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-4">
<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" for="company"> </label>
<div class="col-sm-6 col-md-4">
<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">
</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="50" class="volume-slider">
</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">
</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">
</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">
</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">
</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">
</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">
</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="20" class="volume-slider">
</div>
</div>
</div>
</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>
<script src="js/white-noise-player.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics - GA4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-43339302-6"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-43339302-6');
</script>
</body>
</html>