forked from penge/my-notes
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnotes.html
293 lines (283 loc) · 24 KB
/
notes.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Notes</title>
<link rel="stylesheet" href="" id="google-fonts">
<link rel="stylesheet" href="themes/shared.css">
<link rel="stylesheet" href="notes.css">
</head>
<body>
<div id="sidebar">
<div id="sidebar-notes" class="notes"></div>
<div id="sidebar-buttons" class="bar">
<div id="new-note" class="button" title="New note">
<svg viewBox="0 0 426.667 426.667">
<path d="M256,0H85.333C61.76,0,42.88,19.093,42.88,42.667L42.667,384c0,23.573,18.88,42.667,42.453,42.667h256.213
C364.907,426.667,384,407.573,384,384V128L256,0z M234.667,149.333V32L352,149.333H234.667z"/>
</svg>
</div>
<div id="open-options" class="button" title="Options">
<svg viewBox="0 0 426.667 426.667">
<path d="M416.8,269.44l-45.013-35.307c0.853-6.827,1.493-13.76,1.493-20.8s-0.64-13.973-1.493-20.8l45.12-35.307
c4.053-3.2,5.227-8.96,2.56-13.653L376.8,69.653c-2.667-4.587-8.213-6.507-13.013-4.587l-53.12,21.44
c-10.987-8.427-23.04-15.573-36.053-21.013l-8-56.533C265.653,3.947,261.28,0,255.947,0h-85.333c-5.333,0-9.707,3.947-10.56,8.96
l-8,56.533c-13.013,5.44-25.067,12.48-36.053,21.013l-53.12-21.44c-4.8-1.813-10.347,0-13.013,4.587L7.2,143.573
c-2.667,4.587-1.493,10.347,2.56,13.653l45.013,35.307c-0.853,6.827-1.493,13.76-1.493,20.8s0.64,13.973,1.493,20.8L9.76,269.44
c-4.053,3.2-5.227,8.96-2.56,13.653l42.667,73.92c2.667,4.587,8.213,6.507,13.013,4.587L116,340.16
c10.987,8.427,23.04,15.573,36.053,21.013l8,56.533c0.853,5.013,5.227,8.96,10.56,8.96h85.333c5.333,0,9.707-3.947,10.56-8.96
l8-56.533c13.013-5.44,25.067-12.48,36.053-21.013l53.12,21.44c4.8,1.813,10.347,0,13.013-4.587l42.667-73.92
C422.027,278.507,420.853,272.747,416.8,269.44z M213.28,288c-41.28,0-74.667-33.387-74.667-74.667S172,138.667,213.28,138.667
s74.667,33.387,74.667,74.667S254.56,288,213.28,288z"/>
</svg>
</div>
<div id="sync-now" class="button disabled" title="Click to sync the notes to and from Google Drive now.">
<svg viewBox="0 0 341.333 341.333">
<path d="M341.227,149.333V0l-50.133,50.133C260.267,19.2,217.707,0,170.56,0C76.267,0,0.107,76.373,0.107,170.667
s76.16,170.667,170.453,170.667c79.467,0,146.027-54.4,164.907-128h-44.373c-17.6,49.707-64.747,85.333-120.533,85.333
c-70.72,0-128-57.28-128-128s57.28-128,128-128c35.307,0,66.987,14.72,90.133,37.867l-68.8,68.8H341.227z"/>
</svg>
</div>
</div>
<div id="drag"></div>
</div>
<div contenteditable="true" spellcheck="true" id="content"><!-- Content of the active note --></div>
<div id="toolbar" class="bar">
<div id="B" class="bold button" title="Bold">
<svg viewBox="0 0 181.395 181.395">
<path d="m20.618,181.395v-181.395h62.293c22.506,0 40.074,4.174 52.699,12.521 12.623,8.346 18.936,20.785 18.936,37.313 0,8.639-2.033,16.318-6.104,23.049-4.07,6.729-10.34,11.795-18.813,15.199 10.631,2.408 18.479,7.246 23.547,14.514 5.064,7.268 7.6,15.637 7.6,25.104 0,17.691-5.939,31.064-17.814,40.115-11.879,9.055-28.904,13.58-51.082,13.58h-71.262zm42.235-105.772h20.93c9.551-0.166 16.695-2.014 21.43-5.545 4.734-3.529 7.102-8.699 7.102-15.51 0-7.725-2.41-13.35-7.225-16.881-4.82-3.529-12.211-5.295-22.178-5.295h-20.059v43.231zm0,27.908v45.473h29.027c8.971,0 15.699-1.766 20.184-5.297 4.484-3.529 6.729-8.947 6.729-16.256 0-7.891-1.932-13.85-5.795-17.879-3.861-4.027-10.111-6.041-18.748-6.041h-31.397z"/>
</svg>
</div>
<div id="I" class="italic button" title="Italic">
<svg viewBox="0 0 181.5 181.5">
<path d="M93.368,181.5H51.856L88.132,0h41.512L93.368,181.5z"/>
</svg>
</div>
<div id="U" class="underline button" title="Underline">
<svg viewBox="0 0 230 230">
<path d="M61.638,164.165C75.236,175.39,93.257,181,115.458,181c21.955,0,39.679-5.61,53.239-16.835 C182.254,152.942,189,137.13,189,116.731V0h-42v116.731c0,11.06-2.501,19.212-8.03,24.454c-5.529,5.244-13.284,7.864-23.524,7.864 c-10.322,0-18.312-2.642-23.965-7.926C85.829,135.841,83,127.711,83,116.731V0H41v116.731C41,137.13,48.039,152.942,61.638,164.165z"/>
<rect width="230" y="197" height="33"/>
</svg>
</div>
<div id="S" class="line-through button wide" title="Strike-through">
<svg viewBox="0 0 230 230">
<polygon points="230,99 136,99 136,57 183,57 183,25 47,25 47,57 94,57 94,99 0,99 0,132 94,132 94,205 136,205 136,132 230,132 "/>
</svg>
</div>
<div id="H" class="button" title="Heading">
<svg viewBox="0 0 220.068 220.068">
<path d="M136.922,51.991H89.297v148.332H47.253V51.991H0V19.745h136.922V51.991z"/>
<path d="M220.068,98.245h-38.463v102.078h-38.236V98.245h-37.899V68.919h114.598V98.245z"/>
</svg>
<div class="menu bar">
<div id="H1" class="button" title="Heading 1">H<span>1</span></div>
<div id="H2" class="button" title="Heading 2">H<span>2</span></div>
<div id="H3" class="button" title="Heading 3">H<span>3</span></div>
</div>
</div>
<div id="UL" class="button" title="Bulleted List">
<svg viewBox="0 0 394.971 394.971">
<circle cx="56.424" cy="197.486" r="51.2"/>
<path d="M379.298,187.037H143.151c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449h236.147
c5.771,0,10.449-4.678,10.449-10.449S385.069,187.037,379.298,187.037z"/>
<circle cx="56.424" cy="51.2" r="51.2"/>
<path d="M143.151,61.649h236.147c5.771,0,10.449-4.678,10.449-10.449s-4.678-10.449-10.449-10.449H143.151
c-5.771,0-10.449,4.678-10.449,10.449S137.38,61.649,143.151,61.649z"/>
<circle cx="56.424" cy="343.771" r="51.2"/>
<path d="M379.298,333.322H143.151c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449h236.147
c5.771,0,10.449-4.678,10.449-10.449S385.069,333.322,379.298,333.322z"/>
</svg>
</div>
<div id="OL" class="button" title="Numbered List">
<svg viewBox="0 0 512.003 512.003">
<path d="M155.003 90.001h342c8.284 0 15-6.716 15-15s-6.716-15-15-15h-342c-8.284 0-15 6.716-15 15s6.716 15 15 15z"/>
<path d="M497.003 241.001h-342c-8.284 0-15 6.716-15 15s6.716 15 15 15h342c8.284 0 15-6.716 15-15s-6.716-15-15-15z"/>
<path d="M497.003 422.001h-342c-8.284 0-15 6.716-15 15s6.716 15 15 15h342c8.284 0 15-6.716 15-15s-6.716-15-15-15z"/>
<path d="M26.003 30.001h8.512v95c0 8.284 6.716 15 15 15s15-6.716 15-15v-110c0-8.284-6.716-15-15-15h-23.512c-8.284 0-15 6.716-15 15s6.716 15 15 15z"/>
<path d="M74.083 295.753c-8.847.111-18.162.192-26.478.228 5.659-7.649 13.006-17.786 22.378-31.176 7.1-10.143 11.74-19.777 13.794-28.635.114-.491.203-.987.267-1.487l.533-4.173c.081-.63.121-1.265.121-1.901 0-23.494-19.113-42.607-42.606-42.607-20.314 0-37.897 14.453-41.808 34.365-1.597 8.129 3.699 16.013 11.828 17.609 8.13 1.595 16.013-3.699 17.609-11.828 1.154-5.879 6.357-10.146 12.37-10.146 6.692 0 12.183 5.242 12.583 11.835l-.281 2.203c-.932 3.577-3.26 9.377-8.988 17.563-17.055 24.369-27.23 37.691-32.696 44.849-6.906 9.042-10.71 14.023-8.206 22.166 1.492 4.849 5.153 8.565 10.048 10.196 2.03.677 3.657 1.219 24.6 1.219 8.314 0 19.673-.085 35.31-.282 8.283-.104 14.914-6.904 14.811-15.188-.106-8.283-6.918-14.902-15.189-14.81z"/>
<path d="M44.637 372.001c-20.264 0-37.802 14.417-41.702 34.28-1.597 8.129 3.699 16.013 11.828 17.609 8.13 1.595 16.013-3.699 17.609-11.829 1.145-5.829 6.303-10.06 12.265-10.06 6.893 0 12.5 5.607 12.5 12.5s-5.607 12.5-12.5 12.5c-8.284 0-15 6.716-15 15s6.716 15 15 15c6.893 0 12.5 5.607 12.5 12.5s-5.607 12.5-12.5 12.5c-6.202 0-11.524-4.616-12.378-10.736-.081-.58-.122-1.173-.122-1.764 0-8.284-6.716-15-15-15s-15 6.716-15 15c0 1.972.138 3.959.409 5.909 2.911 20.86 21.007 36.591 42.091 36.591 23.435 0 42.5-19.065 42.5-42.5 0-10.481-3.822-20.082-10.134-27.5 6.313-7.418 10.134-17.019 10.134-27.5 0-23.434-19.066-42.5-42.5-42.5z"/>
</svg>
</div>
<div id="CL" class="button" title="Align Left">
<svg viewBox="0 0 397.061 397.061">
<rect x="109.714" y="94.041" width="240.327" height="73.143"/>
<rect x="109.714" y="229.878" width="167.184" height="73.143"/>
<path d="M57.469,0C51.699,0,47.02,4.678,47.02,10.449v376.163c0,5.771,4.678,10.449,10.449,10.449s10.449-4.678,10.449-10.449
V10.449C67.918,4.678,63.24,0,57.469,0z"/>
</svg>
</div>
<div id="CC" class="button" title="Align Center">
<svg viewBox="0 0 397.061 397.061">
<rect x="78.367" y="94.041" width="104.49" height="73.143"/>
<rect x="214.204" y="94.041" width="104.49" height="73.143"/>
<rect x="214.204" y="229.878" width="67.918" height="73.143"/>
<rect x="114.939" y="229.878" width="67.918" height="73.143"/>
<path d="M198.531,0c-5.771,0-10.449,4.678-10.449,10.449v376.163c0,5.771,4.678,10.449,10.449,10.449s10.449-4.678,10.449-10.449
V10.449C208.98,4.678,204.301,0,198.531,0z"/>
</svg>
</div>
<div id="CR" class="button" title="Align Right">
<svg viewBox="0 0 397.061 397.061">
<rect x="47.02" y="94.041" width="240.327" height="73.143"/>
<rect x="120.163" y="229.878" width="167.184" height="73.143"/>
<path d="M339.592,0c-5.771,0-10.449,4.678-10.449,10.449v376.163c0,5.771,4.678,10.449,10.449,10.449s10.449-4.678,10.449-10.449
V10.449C350.041,4.678,345.363,0,339.592,0z"/>
</svg>
</div>
<div id="IMG" class="button" title="Insert Image">
<svg viewBox="0 -47 425.968 425">
<path d="m166.960938 56.484375c-26.34375 0-47.699219 21.355469-47.699219 47.699219s21.355469 47.699218 47.699219 47.699218 47.699218-21.355468 47.699218-47.699218c-.027344-26.332032-21.367187-47.667969-47.699218-47.699219zm0 0"/>
<path d="m395.96875.484375h-365.96875c-16.5625.019531-29.9804688 13.4375-30 30v224.019531l69.699219-46.417968c16.796875-11.109376 38.621093-11.039063 55.347656.179687l50.910156 34.070313c13.351563 8.980468 31.40625 5.796874 40.886719-7.199219l68.101562-92.980469c9.507813-12.980469 24.683594-20.59375 40.777344-20.453125 16.089844.140625 31.132813 8.019531 40.410156 21.167969l59.832032 84.773437v-197.160156c-.019532-16.558594-13.4375-29.980469-29.996094-30zm-229.007812 171.40625c-37.386719 0-67.699219-30.308594-67.699219-67.699219s30.3125-67.699218 67.699219-67.699218c37.390624 0 67.699218 30.308593 67.699218 67.699218-.042968 37.371094-30.328125 67.65625-67.699218 67.699219zm0 0"/>
<path d="m325.550781 141.699219c-9.671875-.148438-18.804687 4.429687-24.464843 12.269531l-68.101563 92.980469c-15.796875 21.664062-45.894531 26.96875-68.144531 12.007812l-50.917969-34.074219c-10.023437-6.726562-23.105469-6.777343-33.179687-.125l-80.742188 53.773438v21.953125c.0195312 16.558594 13.4375 29.980469 30 30h365.96875c16.558594-.019531 29.980469-13.441406 30-30v-38.160156l-76.171875-107.925781c-5.53125-7.929688-14.578125-12.667969-24.246094-12.699219zm0 0"/>
</svg>
</div>
<div id="LINK" class="button" title="Insert Link">
<svg viewBox="0 0 512 512">
<path d="M474.562,37.446c-49.928-49.928-131.135-49.928-181.063,0L220.2,110.744c-3.115,3.115-3.991,7.825-2.219,11.846
c1.771,4.032,5.522,6.616,10.252,6.356l3.251-0.24c5.533-0.51,11.19-0.094,16.785,0.427c9.388,0.854,19.223,2.844,30.08,6.074
c3.772,1.156,7.825,0.094,10.586-2.678l49.824-49.824c24.172-24.172,66.37-24.172,90.542,0c24.964,24.964,24.964,65.577,0,90.541
l-71.375,71.374c-5.617-22.019-16.668-41.752-32.733-57.809c-21.026-21.036-48.293-33.633-78.852-36.435
c-26.527-2.313-52.669,3.303-75.559,16.525c-10.93,6.335-19.4,12.659-26.652,19.911L37.438,293.503
c-49.918,49.917-49.918,131.144,0,181.061C62.403,499.528,95.181,512,127.97,512c32.789,0,65.567-12.472,90.532-37.435
l73.278-73.277c3.105-3.105,3.991-7.793,2.23-11.815c-1.761-4.022-5.97-6.731-10.18-6.387l-3.386,0.24
c-5.449,0.531-11.096,0.052-16.712-0.458c-9.367-0.854-19.213-2.844-30.09-6.074c-3.793-1.136-7.814-0.094-10.575,2.688
l-49.824,49.824c-24.172,24.172-66.37,24.172-90.542,0c-24.964-24.964-24.964-65.577,0-90.541l71.375-71.374
c5.617,22.019,16.668,41.752,32.733,57.808c21.036,21.036,48.303,33.633,78.862,36.425c3.98,0.365,7.95,0.542,11.909,0.542
c22.391,0,44.187-5.814,63.64-17.056c10.93-6.335,19.4-12.659,26.652-19.911l106.692-106.691
C524.479,168.59,524.479,87.363,474.562,37.446z M295.679,295.709c-23.009,6.991-47.184,0.646-63.611-15.772
c-16.656-16.656-22.488-41.152-15.75-63.626c23.051-6.956,47.205-0.639,63.615,15.761
C296.592,248.731,302.421,273.232,295.679,295.709z"/>
</svg>
</div>
<div id="PRE" class="button" title="Code Block">
<svg viewBox="0 0 92.812 92.812">
<path d="M92.226,44.992L60.971,13.736c-0.781-0.781-2.048-0.781-2.828,0l-6.729,6.728c-0.375,0.375-0.586,0.884-0.586,1.414
c0,0.53,0.211,1.039,0.586,1.414l23.115,23.114L51.416,69.521c-0.375,0.375-0.586,0.884-0.586,1.414s0.211,1.04,0.586,1.415
l6.73,6.728c0.391,0.39,0.902,0.585,1.414,0.585s1.024-0.195,1.415-0.586L92.227,47.82C93.008,47.039,93.008,45.773,92.226,44.992z"/>
<path d="M18.283,46.406l23.114-23.114c0.375-0.375,0.586-0.884,0.586-1.414c0-0.53-0.211-1.039-0.586-1.414l-6.728-6.728
c-0.781-0.781-2.048-0.781-2.828,0L0.586,44.992C0.211,45.367,0,45.876,0,46.406s0.211,1.039,0.586,1.414l31.26,31.256
c0.375,0.375,0.884,0.586,1.415,0.586c0.53,0,1.039-0.211,1.414-0.586l6.724-6.728c0.781-0.781,0.781-2.049,0-2.828L18.283,46.406z"/>
</svg>
</div>
<div id="TABLE" class="button" title="Table">
<svg viewBox="0 0 384 384">
<path d="M0,0v384h384V0H0z M170.667,341.333h-128v-128h128V341.333z M170.667,170.667h-128v-128h128V170.667z M341.333,341.333
h-128v-128h128V341.333z M341.333,170.667h-128v-128h128V170.667z"/>
</svg>
<div class="menu bar">
<div id="TABLE_INSERT" class="button wide" title="Insert table">
<svg viewBox="0 0 384 384">
<path d="M0,0v384h384V0H0z M170.667,341.333h-128v-128h128V341.333z M170.667,170.667h-128v-128h128V170.667z M341.333,341.333
h-128v-128h128V341.333z M341.333,170.667h-128v-128h128V170.667z"/>
</svg>
</div>
<div id="TABLE_ROW_ABOVE" class="button" title="Insert row above">
<svg viewBox="0 -21 512 512">
<path d="m102.355469 170.410156-74.664063-80c-4.480468-4.820312-11.414062-6.421875-17.558594-3.96875-6.121093 2.410156-10.132812 8.320313-10.132812 14.890625v160c0 6.570313 4.011719 12.480469 10.132812 14.871094 1.898438.765625 3.882813 1.128906 5.867188 1.128906 4.351562 0 8.597656-1.769531 11.691406-5.074219l74.664063-80c5.742187-6.144531 5.742187-15.703124 0-21.847656zm0 0"/>
<path d="m469.332031 0h-320c-23.53125 0-42.664062 19.136719-42.664062 42.667969v42.664062c0 23.53125 19.132812 42.667969 42.664062 42.667969h320c23.53125 0 42.667969-19.136719 42.667969-42.667969v-42.664062c0-23.53125-19.136719-42.667969-42.667969-42.667969zm-320 42.667969h138.667969v42.664062h-138.667969zm181.335938 42.664062v-42.664062h138.664062l.023438 42.664062zm0 0"/>
<path d="m469.332031 234.667969h-320c-23.53125 0-42.664062 19.132812-42.664062 42.664062v149.335938c0 23.53125 19.132812 42.664062 42.664062 42.664062h320c23.53125 0 42.667969-19.132812 42.667969-42.664062v-149.335938c0-23.53125-19.136719-42.664062-42.667969-42.664062zm0 96h-138.664062v-53.335938h138.664062zm-181.332031-53.335938v53.335938h-138.667969v-53.335938zm-138.667969 96h138.667969v53.335938h-138.667969zm181.335938 53.335938v-53.335938h138.6875v53.335938zm0 0"/>
</svg>
</div>
<div id="TABLE_ROW_BELOW" class="button" title="Insert row below">
<svg viewBox="0 -21 512 512">
<path d="m102.355469 277.078125-74.664063-80c-4.480468-4.820313-11.414062-6.421875-17.558594-3.96875-6.121093 2.410156-10.132812 8.320313-10.132812 14.890625v160c0 6.570312 4.011719 12.480469 10.132812 14.871094 1.898438.765625 3.882813 1.128906 5.867188 1.128906 4.351562 0 8.597656-1.769531 11.691406-5.078125l74.664063-80c5.742187-6.144531 5.742187-15.699219 0-21.84375zm0 0"/>
<path d="m469.332031 341.332031h-320c-23.53125 0-42.664062 19.136719-42.664062 42.667969v42.667969c0 23.53125 19.132812 42.664062 42.664062 42.664062h320c23.53125 0 42.667969-19.132812 42.667969-42.664062v-42.667969c0-23.53125-19.136719-42.667969-42.667969-42.667969zm-320.019531 42.667969h138.6875v42.667969h-138.667969zm320.019531 42.667969h-138.664062v-42.667969h138.664062zm0 0"/>
<path d="m469.332031 0h-320c-23.53125 0-42.664062 19.136719-42.664062 42.667969v149.332031c0 23.53125 19.132812 42.667969 42.664062 42.667969h320c23.53125 0 42.667969-19.136719 42.667969-42.667969v-149.332031c0-23.53125-19.136719-42.667969-42.667969-42.667969zm0 96h-138.664062v-53.332031h138.664062zm-320-53.332031h138.667969v53.332031h-138.6875zm0 96h138.667969v53.332031h-138.667969zm181.335938 53.332031v-53.332031h138.664062v53.332031zm0 0"/>
</svg>
</div>
<div id="TABLE_COLUMN_LEFT" class="button" title="Insert column left">
<svg viewBox="-21 0 512 512">
<path d="m276.203125 10.132812c-2.390625-6.121093-8.300781-10.132812-14.871094-10.132812h-160c-6.570312 0-12.480469 4.011719-14.867187 10.132812-2.410156 6.125-.855469 13.078126 3.96875 17.558594l80 74.664063c3.070312 2.882812 6.972656 4.3125 10.898437 4.3125s7.832031-1.429688 10.925781-4.3125l80-74.664063c4.796876-4.480468 6.375-11.433594 3.945313-17.558594zm0 0"/>
<path d="m85.332031 106.667969h-42.664062c-23.53125 0-42.667969 19.132812-42.667969 42.664062v320c0 23.53125 19.136719 42.667969 42.667969 42.667969h42.664062c23.53125 0 42.667969-19.136719 42.667969-42.667969v-320c0-23.53125-19.136719-42.664062-42.667969-42.664062zm0 42.644531v138.6875h-42.664062v-138.667969zm-42.664062 320.019531v-138.664062h42.664062v138.664062zm0 0"/>
<path d="m426.667969 106.667969h-149.335938c-23.53125 0-42.664062 19.132812-42.664062 42.664062v320c0 23.53125 19.132812 42.667969 42.664062 42.667969h149.335938c23.53125 0 42.664062-19.136719 42.664062-42.667969v-320c0-23.53125-19.132812-42.664062-42.664062-42.664062zm0 181.332031h-53.335938v-138.6875h53.335938zm-96-138.6875v138.6875h-53.335938v-138.667969zm-53.335938 181.355469h53.335938v138.664062h-53.335938zm96 138.664062v-138.664062h53.335938v138.664062zm0 0"/>
</svg>
</div>
<div id="TABLE_COLUMN_RIGHT" class="button wide" title="Insert column right">
<svg viewBox="-21 0 512 512">
<path d="m382.890625 10.132812c-2.410156-6.121093-8.320313-10.132812-14.890625-10.132812h-160c-6.570312 0-12.480469 4.011719-14.890625 10.132812-2.410156 6.125-.832031 13.078126 3.96875 17.558594l80 74.664063c3.070313 2.882812 6.996094 4.3125 10.921875 4.3125s7.851562-1.429688 10.921875-4.3125l80-74.664063c4.800781-4.480468 6.378906-11.433594 3.96875-17.558594zm0 0"/>
<path d="m426.667969 106.667969h-42.667969c-23.53125 0-42.667969 19.132812-42.667969 42.664062v320c0 23.53125 19.136719 42.667969 42.667969 42.667969h42.667969c23.53125 0 42.664062-19.136719 42.664062-42.667969v-320c0-23.53125-19.132812-42.664062-42.664062-42.664062zm0 42.664062v138.667969h-42.667969v-138.667969zm-42.667969 320.023438v-138.6875h42.667969v138.664062zm0 0"/>
<path d="m192 106.667969h-149.332031c-23.53125 0-42.667969 19.132812-42.667969 42.664062v320c0 23.53125 19.136719 42.667969 42.667969 42.667969h149.332031c23.53125 0 42.667969-19.136719 42.667969-42.667969v-320c0-23.53125-19.136719-42.664062-42.667969-42.664062zm0 181.332031h-53.332031v-138.667969h53.332031zm-96-138.667969v138.667969h-53.332031v-138.667969zm-53.332031 181.335938h53.332031v138.6875h-53.332031zm96 138.664062v-138.664062h53.332031v138.664062zm0 0"/>
</svg>
</div>
<div id="TABLE_HEADING_ROW" class="button" title="Toggle heading row">
<svg viewBox="0 0 485.064 485.064">
<path d="M458.736,181.097H26.334C11.793,181.097,0,192.884,0,207.425v70.215c0,14.541,11.787,26.328,26.334,26.328h432.402
c14.541,0,26.328-11.787,26.328-26.328v-70.215C485.07,192.884,473.283,181.097,458.736,181.097z"/>
</svg>
</div>
<div id="TABLE_HEADING_COLUMN" class="button wide rotate90" title="Toggle heading column">
<svg viewBox="0 0 485.064 485.064">
<path d="M458.736,181.097H26.334C11.793,181.097,0,192.884,0,207.425v70.215c0,14.541,11.787,26.328,26.334,26.328h432.402
c14.541,0,26.328-11.787,26.328-26.328v-70.215C485.07,192.884,473.283,181.097,458.736,181.097z"/>
</svg>
</div>
<div id="TABLE_DELETE_ROW" class="button" title="Delete row">
<svg viewBox="0 0 15.381 15.381">
<path d="M0,1.732v7.732h6.053c0-0.035-0.004-0.07-0.004-0.104c0-0.434,0.061-0.854,0.165-1.255H1.36V3.092
h12.662v2.192c0.546,0.396,1.01,0.897,1.359,1.477V1.732H0z"/>
<path d="M11.196,5.28c-2.307,0-4.183,1.877-4.183,4.184c0,2.308,1.876,4.185,4.183,4.185
c2.309,0,4.185-1.877,4.185-4.185C15.381,7.157,13.505,5.28,11.196,5.28z M11.196,12.513c-1.679,0-3.047-1.367-3.047-3.049
c0-1.68,1.368-3.049,3.047-3.049c1.684,0,3.05,1.369,3.05,3.049C14.246,11.146,12.88,12.513,11.196,12.513z"/>
<rect x="9.312" y="8.759" width="3.844" height="1.104"/>
</svg>
</div>
<div id="TABLE_DELETE_COLUMN" class="button" title="Delete column">
<svg viewBox="0 0 26 26">
<path d="M13.594,20.85V24h-10V2h10v3.15c0.633-0.323,1.304-0.565,2-0.727V1c0-0.551-0.448-1-1-1h-12
c-0.55,0-1,0.449-1,1v24c0,0.551,0.449,1,1,1h12c0.552,0,1-0.449,1-1v-3.424C14.898,21.415,14.227,21.173,13.594,20.85z"/>
<path d="M17.594,6.188c-3.762,0-6.813,3.051-6.812,6.813c-0.001,3.761,3.05,6.812,6.812,6.812
s6.813-3.051,6.813-6.813S21.355,6.188,17.594,6.188z M21.226,13.99l-7.267,0.001v-1.982h7.268L21.226,13.99z"/>
</svg>
</div>
</div>
</div>
<div id="HIGH" class="button" title="Highlight">
<svg viewBox="0 0 512 512">
<polygon points="338.231,77.679 153.163,232.022 299.779,378.637 454.122,193.57"/>
<polygon points="407.634,19.801 361.366,58.387 473.414,170.435 512,124.168"/>
<path d="M134.863,256.148c-11.814,34.634-30.789,65.513-56.885,91.608l-10.606,10.607l106.066,106.066l10.607-10.607
c25.95-25.95,56.838-44.91,91.619-56.873L134.863,256.148z"/>
<polygon points="67.372,400.789 0,460.379 96.46,492.199 131.012,464.429"/>
</svg>
</div>
<div id="RF" class="button" title="Remove Format">
<svg viewBox="0 0 384 384">
<polygon points="27.093,21.333 0,48.533 148.693,197.227 96,320 160,320 193.493,241.92 314.24,362.667 341.333,335.467 32.96,27.2"/>
<polygon points="85.333,21.333 85.333,25.173 145.493,85.333 196.587,85.333 181.227,121.067 226.027,165.867 260.587,85.333 384,85.333 384,21.333"/>
</svg>
</div>
</div>
<div id="overlay"></div>
<div id="context-menu">
<div id="rename" class="action">Rename</div>
<div id="delete" class="action">Delete</div>
</div>
<template id="new-version-notification-template">
<div class="notification">
<div>New version <span class="version"></span> installed.</div>
<div>
<a href="https://github.com/penge/my-notes/releases" target="_blank">What's new</a><span>,</span>
<a href="#" class="close">Close</a>
</div>
</div>
</template>
<template id="modal-template">
<div id="modal">
<div class="bold" id="caption">Caption</div>
<input type="text" id="input" />
<div id="buttons">
<input type="button" value="Cancel" id="cancel" />
<input type="submit" value="Confirm" id="confirm" class="bold" />
</div>
<!-- Place for modal description -->
</div>
<div class="modal-description" id="insert-link-modal-description">
Link can start with <span class="hotlink">http</span>, <span class="hotlink">https</span>, or <span class="hotlink">chrome-extension</span> if referencing other note.
<br><br>
See <strong>Hotkeys</strong> for how to open the inserted link.
</div>
</template>
<script type="module" src="notes.js"></script>
</body>
</html>