-
-
Notifications
You must be signed in to change notification settings - Fork 62
/
index.html
495 lines (460 loc) · 31.4 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
<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" href="#">Notepad</a></span>
<span class="icon-container">
<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>
<a id="downloadNotes" class="download-icon" title="Download Notes [Ctrl/Cmd + S]">
<img src="img/navbar/download.svg" alt="Download Icon" />
</a>
</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="Start dictation" id="micContainer" style="display: none;">
<a id="mic" class="mic-icon">
<span>
<img
src="img/navbar/mic.svg"
alt="Mic"
/>
</span>
</a>
</span>
<span title="Activate Floating Window" id="pipContainer">
<a id="pip" class="pip-icon">
<span>
<img
src="img/navbar/pip.svg"
alt="Activate Floating Window"
/>
</span>
</a>
</span>
</span>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<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="20px" width="20px" fill="none" viewBox="0 0 24 24" stroke-width="1.5" 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="20px" width="20px" fill="none" viewBox="0 0 24 24" stroke-width="1.5" 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>
<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 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>
</ul>
<div class="tab-content">
<div id="about" class="container tab-pane active in">
<p>This is an offline-capable <a href="https://www.amitmerchant.com/Building-Simple-Offline-Notepad-Using-Service-Worker/" target="_blank">Progressive Web App</a>.</p>
<p>The app serves the following features:</p>
<ul>
<li>Write notes which are then saved to the browser's <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" target="_blank">localStorage</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>Dark mode.</li>
<li>Privacy-focused - We'll never collect your precious data.</li>
<li>Light-weight - Loads almost instantly.</li>
<li>It's <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>.</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://www.paypal.com/paypalme/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>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>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>
</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="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>
</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</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" for="lineHeight">Line height</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" for="showWordCountPill">Show character and word count</label>
<div class="col-sm-6 col-md-4">
<select name="showWordCountPill" id="showWordCountPill" class="form-control">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6 col-md-6" for="optimalLineLength">Optimal line length</label>
<div class="col-sm-6 col-md-4">
<select name="optimalLineLength" id="optimalLineLength" class="form-control">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6 col-md-6" for="writeDirection">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" 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>
<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/utils.js"></script>
<script src="js/selector.js"></script>
<script src="js/app.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>