-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
261 lines (261 loc) · 12.1 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
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="PasteePad | App" />
<meta name="mobile-web-app-title" content="PasteePad | App" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<meta name="theme-color" content="#42dcdb" />
<link rel="apple-touch-icon" href="favicon.ico" />
<link rel="manifest" href="manifest.json" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta
name="description"
content="PasteePad - Online Text Editor and WordPad to paste and edit text, great for notes, todos and links."
/>
<title>PasteePad - Online Text Editor and WordPad</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style.css" />
<script src="utils.js"></script>
<script src="script.js"></script>
<script
defer
data-domain="pasteepad.com"
src="https://plausible.io/js/script.js"
></script>
</head>
<body>
<section>
<div id="container" class="container">
<div class="notes-menu">
<button onclick="newNote()" title="new note">
<svg
xmlns="http:https://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path>
</svg>
note
</button>
<ul id="notes-menu"></ul>
</div>
<div class="header-content">
<span class="logo-container">
<h1 class="logo">Pastee</h1>
<ul class="commands">
<li>
<button
onclick="document.execCommand('bold', false, null)"
title="bold"
>
<svg
xmlns="http:https://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M8 11H12.5C13.8807 11 15 9.88071 15 8.5C15 7.11929 13.8807 6 12.5 6H8V11ZM18 15.5C18 17.9853 15.9853 20 13.5 20H6V4H12.5C14.9853 4 17 6.01472 17 8.5C17 9.70431 16.5269 10.7981 15.7564 11.6058C17.0979 12.3847 18 13.837 18 15.5ZM8 13V18H13.5C14.8807 18 16 16.8807 16 15.5C16 14.1193 14.8807 13 13.5 13H8Z"
></path>
</svg>
</button>
</li>
<li>
<button
onclick="document.execCommand('italic', false, null)"
title="italic"
>
<svg
xmlns="http:https://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M15 20H7V18H9.92661L12.0425 6H9V4H17V6H14.0734L11.9575 18H15V20Z"
></path>
</svg>
</button>
</li>
<li>
<button
onclick="document.execCommand('underline', false, null)"
title="underline"
>
<svg
xmlns="http:https://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M8 3V12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12V3H18V12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12V3H8ZM4 20H20V22H4V20Z"
></path>
</svg>
</button>
</li>
<li>
<button
onclick="document.execCommand('strikethrough', false, null)"
title="strikethrough"
>
<svg
xmlns="http:https://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M17.1538 14C17.3846 14.5161 17.5 15.0893 17.5 15.7196C17.5 17.0625 16.9762 18.1116 15.9286 18.867C14.8809 19.6223 13.4335 20 11.5862 20C9.94674 20 8.32335 19.6185 6.71592 18.8555V16.6009C8.23538 17.4783 9.7908 17.917 11.3822 17.917C13.9333 17.917 15.2128 17.1846 15.2208 15.7196C15.2208 15.0939 15.0049 14.5598 14.5731 14.1173C14.5339 14.0772 14.4939 14.0381 14.4531 14H3V12H21V14H17.1538ZM13.076 11H7.62908C7.4566 10.8433 7.29616 10.6692 7.14776 10.4778C6.71592 9.92084 6.5 9.24559 6.5 8.45207C6.5 7.21602 6.96583 6.165 7.89749 5.299C8.82916 4.43299 10.2706 4 12.2219 4C13.6934 4 15.1009 4.32808 16.4444 4.98426V7.13591C15.2448 6.44921 13.9293 6.10587 12.4978 6.10587C10.0187 6.10587 8.77917 6.88793 8.77917 8.45207C8.77917 8.87172 8.99709 9.23796 9.43293 9.55079C9.86878 9.86362 10.4066 10.1135 11.0463 10.3004C11.6665 10.4816 12.3431 10.7148 13.076 11H13.076Z"
></path>
</svg>
</button>
</li>
<li>
<button
onclick="document.execCommand('insertUnorderedList', false, null)"
title="unordered list"
>
<svg
xmlns="http:https://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M8 4H21V6H8V4ZM3 3.5H6V6.5H3V3.5ZM3 10.5H6V13.5H3V10.5ZM3 17.5H6V20.5H3V17.5ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z"
></path>
</svg>
</button>
</li>
<li>
<button
onclick="document.execCommand('insertOrderedList', false, null)"
title="ordered list"
>
<svg
xmlns="http:https://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M5.75024 3.5H4.71733L3.25 3.89317V5.44582L4.25002 5.17782L4.25018 8.5H3V10H7V8.5H5.75024V3.5ZM10 4H21V6H10V4ZM10 11H21V13H10V11ZM10 18H21V20H10V18ZM2.875 15.625C2.875 14.4514 3.82639 13.5 5 13.5C6.17361 13.5 7.125 14.4514 7.125 15.625C7.125 16.1106 6.96183 16.5587 6.68747 16.9167L6.68271 16.9229L5.31587 18.5H7V20H3.00012L2.99959 18.8786L5.4717 16.035C5.5673 15.9252 5.625 15.7821 5.625 15.625C5.625 15.2798 5.34518 15 5 15C4.67378 15 4.40573 15.2501 4.37747 15.5688L4.3651 15.875H2.875V15.625Z"
></path>
</svg>
</button>
</li>
<li>
<button onclick="createLink()" title="create link">
<svg
xmlns="http:https://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M18.3638 15.5355L16.9496 14.1213L18.3638 12.7071C20.3164 10.7545 20.3164 7.58866 18.3638 5.63604C16.4112 3.68341 13.2453 3.68341 11.2927 5.63604L9.87849 7.05025L8.46428 5.63604L9.87849 4.22182C12.6122 1.48815 17.0443 1.48815 19.778 4.22182C22.5117 6.95549 22.5117 11.3876 19.778 14.1213L18.3638 15.5355ZM15.5353 18.364L14.1211 19.7782C11.3875 22.5118 6.95531 22.5118 4.22164 19.7782C1.48797 17.0445 1.48797 12.6123 4.22164 9.87868L5.63585 8.46446L7.05007 9.87868L5.63585 11.2929C3.68323 13.2455 3.68323 16.4113 5.63585 18.364C7.58847 20.3166 10.7543 20.3166 12.7069 18.364L14.1211 16.9497L15.5353 18.364ZM14.8282 7.75736L16.2425 9.17157L9.17139 16.2426L7.75717 14.8284L14.8282 7.75736Z"
></path>
</svg>
</button>
</li>
<li>
<button
onclick="addCheckboxesToSelection()"
title="insert checkbox"
>
<svg
xmlns="http:https://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z"
></path>
</svg>
</button>
</li>
<li>
<a href="#" id="save-note" title="download note">
<svg
xmlns="http:https://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M13 10H18L12 16L6 10H11V3H13V10ZM4 19H20V12H22V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V12H4V19Z"
></path>
</svg>
</a>
</li>
</ul>
</span>
<span class="logo-container">
<div id="words" class="words">0 words 0 chars</div>
<a class="info-icon" title="Keyboard shortcuts" id="keyboard-icon">
<svg
xmlns="http:https://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M4 5V19H20V5H4ZM3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM6 7H8V9H6V7ZM6 11H8V13H6V11ZM6 15H18V17H6V15ZM11 11H13V13H11V11ZM11 7H13V9H11V7ZM16 7H18V9H16V7ZM16 11H18V13H16V11Z"
></path>
</svg>
</a>
<a class="info-icon" title="About PasteePad" id="about-icon">
<svg
xmlns="http:https://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z"
></path>
</svg>
</a>
</span>
</div>
<div
name="paste"
class="textarea"
id="paste"
contenteditable="true"
autofocus
></div>
</div>
<dialog id="about">
<h2>PasteePad - Online Text Editor</h2>
<p>Online Text Editor and WordPad for notes</p>
<p>Free and no account needed</p>
<p>PWA and offline mode - add to home screen</p>
<p>Privacy focused - data saved on localstorage (browser)</p>
<p>Basic text editor (bold, italic, lists, checkbox, and more)</p>
<p>Multiple notes</p>
<p>Dark mode first</p>
<p>Download your data anytime</p>
<p>Zero dependencies on libraries</p>
<p>
Send bug reports and suggestions to:
<a href="mailto:[email protected]">[email protected]</a>
</p>
<form method="dialog"><button>Close</button></form>
</dialog>
<dialog id="keyboard">
<h2>Keyboard Shortcuts</h2>
<p><span class="shortcut-label">Ctrl + N</span> Add note</p>
<p><span class="shortcut-label">Ctrl / Cmd + B</span> Bold</p>
<p><span class="shortcut-label">Ctrl / Cmd + I</span> Italic</p>
<p><span class="shortcut-label">Ctrl / Cmd + U</span> Underline</p>
<p><span class="shortcut-label">Ctrl + L</span> Unordered list</p>
<p><span class="shortcut-label">Ctrl + O</span> Ordered list</p>
<p><span class="shortcut-label">Ctrl + W</span> Create link</p>
<p><span class="shortcut-label">Ctrl + Q</span> Add checkbox</p>
<form method="dialog"><button>Close</button></form>
</dialog>
</section>
</body>
</html>