-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
434 lines (430 loc) · 23 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/window.css">
<link rel="stylesheet" href="css/slide.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/browser.css">
<link rel="stylesheet" href="css/terminal.css">
<link rel="stylesheet" href="css/editor.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/article.css">
</head>
<body class="win">
<article style="padding-bottom: 50vh;">
<select onchange="document.body.classList.remove('win','mac');document.body.classList.add(this.value)">
<option value="win">Windows</option>
<option value="mac">MacOS</option>
</select>
<select onchange="document.body.classList.remove('dark','light');document.body.classList.add(this.value)">
<option value="default">默认</option>
<option value="dark">暗</option>
<option value="light">亮</option>
</select>
<details class="task-box" id="task-box" open>
<summary>任务目标</summary>
<ol id="task-list">
<li><input type="checkbox" id="task-1">任务1
<ol>
<li><input type="checkbox" id="task-1-1">任务1.1</li>
<li><input type="checkbox" id="task-1-2">任务1.2</li>
</ol>
</li>
<li><input type="checkbox" id="task-2">任务2</li>
<li><input type="checkbox" id="task-3">任务3</li>
</ol>
</details>
<div class="slide closable">
<div class="titlebar">
<div class="titlebar-title">
<div class="titlebar-icon"></div>
<div class="titlebar-text">
This is not actually not a pdf file but it has a long file name so that its
text may overflow the container.pdf - ebodA Clown (32-bit)
</div>
</div>
<div class="titlebar-extra"></div>
<div class="button btn-1"></div>
<div class="button btn-2"></div>
<div class="button btn-3"></div>
</div>
<div class="toolbar">
<div class="menu menu-1"></div>
<div class="menu menu-2"></div>
<div class="menu menu-3"></div>
<div class="menu menu-4"></div>
</div>
<div class="body">
<div class="slide-container">
<section class="slide-page">
<h1>HTML5<br>Element Gallery</h1>
</section>
</div>
<div class="slide-container">
<section class="slide-page">
<table border title="The Table element">
<caption title="The Table Caption element">
<caption> specifies the caption (or title) of a table </caption>
</caption>
<thead title="The Table Head element">
<tr>
<th><thead></th>
<th>defines a set of rows defining the head of the columns of the table</th>
<td rowspan="2" title="The Table Row element"><tr></td>
</tr>
<tr>
<th title="The Table Header element"><th></th>
<th>defines a cell as the header of a group of table cells</th>
</tr>
</thead>
<tfoot title="The Table Foot element">
<tr>
<th><tfoot></th>
<th colspan="2">defines a set of rows summarizing the columns of the table</th>
</tr>
</tfoot>
<tbody>
<tr>
<td><tbody></td>
<td>encapsulates a set of table rows, indicating that they comprise the body of the table</td>
<td rowspan="2">defines a row of cells in a table</td>
</tr>
<tr>
<td><td></td>
<td>defines a cell of a table that contains data</td>
</tr>
</tbody>
</table><embed
src="data:application/pdf;base64,JVBERi0xLjQNCjEgMCBvYmo8PC9UeXBlIC9DYXRhbG9nIC9QYWdlcyAzIDAgUj4+DQplbmRvYmoNCjIgMCBvYmo8PC9UeXBlIC9QYWdlcyAvS2lkcyBbMyAwIFJdIC9Db3VudCAxPj4NCmVuZG9iag0KMyAwIG9iajw8L1R5cGUgL1BhZ2UgL1BhcmVudCAyIDAgUiAvTWVkaWFCb3ggWzAgMCA1MDAgNTAwXSAvQ29udGVudHMgNSAwIFIgL1Jlc291cmNlcyA0IDAgUiAvQ291bnQgMT4+DQplbmRvYmoNCjQgMCBvYmo8PC9YT2JqZWN0IDw8L0ltYWdlMSA2IDAgUj4+Pj4NCmVuZG9iag0KNSAwIG9iajw8L0xlbmd0aCAwPj4NCnN0cmVhbQ0KcQ0KMzAwIDAgMCAzMDAgMTAwIDEwMCBjbSAvSW1hZ2UxIERvDQpRDQoxIDAgMSBSRyAwIDUwMCBtIDUwMCAwIGwgcw0KZW5kc3RyZWFtDQplbmRvYmoNCjYgMCBvYmo8PC9UeXBlIC9YT2JqZWN0IC9TdWJ0eXBlIC9JbWFnZSAvV2lkdGggOCAvSGVpZ2h0IDggL0NvbG9yU3BhY2UgL0RldmljZVJHQiAvQml0c1BlckNvbXBvbmVudCA0IC9MZW5ndGggMCAvRmlsdGVyIC9BU0NJSUhleERlY29kZT4+DQpzdHJlYW0NCkY4MCBDODAgQTgwIDg4MCA2ODAgNDgwIDI4MCAwODANCkY4MiBDODIgQTgyIDg4MiA2ODIgNDgyIDI4MiAwODINCkY4NCBDODQgQTg0IDg4NCA2ODQgNDg0IDI4NCAwODQNCkY4NiBDODYgQTg2IDg4NiA2ODYgNDg2IDI4NiAwODYNCkY4OCBDODggQTg4IDg4OCA2ODggNDg4IDI4OCAwODgNCkY4QSBDOEEgQThBIDg4QSA2OEEgNDhBIDI4QSAwOEENCkY4QyBDOEMgQThDIDg4QyA2OEMgNDhDIDI4QyAwOEMNCkY4RiBDOEYgQThGIDg4RiA2OEYgNDhGIDI4RiAwOEYNCmVuZHN0cmVhbQ0KZW5kb2JqDQp4cmVmDQp0cmFpbGVyPDwvU2l6ZSAwL1Jvb3QgMSAwIFI+Pg0Kc3RhcnR4cmVmDQolJUVPRg==#zoom=40"
width="275" height="275" title="The Embed External Content element">
</section>
</div>
<div class="slide-container" style="height:unset;max-height: unset;">
<section class="slide-page">
<h2>Interactive Controls</h2>
<p>
<input type="password" placeholder='<input type="password">' title="The Password Input element">
provide a way for the user to securely enter a password.
</p>
<p>
<input type="url" placeholder='<input type="url">' title="The URL Input element">
are used to let the user enter and edit a URL.
</p>
<p>
<input type="email" placeholder='<input type="email">' title="The Email Input element">
are used to let the user enter and edit an email address.
</p>
<p>
<input type="tel" placeholder='<input type="tel">' title="The Tel Input element">
are used to let the user enter and edit a telephone number.
</p>
<p>
<input type="search" placeholder='<input type="search">' title="The Search Input element">
are text fields designed for the user to enter search queries into.
</p>
<p>
<input type="number" placeholder='<input type="number">' title="The Number Input element">
are used to let the user enter a number.
</p>
<textarea rows="4" cols="80" title="The Textarea element">
<textarea> represents a multi-line plain-text editing control </textarea>
</textarea>
<p>
<input type="date" value="1970-01-01" title="The Date Input element">
create input fields that let the user enter a date, either with a textbox that validates the input or a
special
date picker interface.
</p>
<p>
<input type="month" value="1970-01" title="The Month Input element">
create input fields that let the user enter a month and year allowing a month and year to be easily
entered.
</p>
<p>
<input type="week" value="1970-W01" title="The Week Input element">
create input fields allowing easy entry of a year plus week number during that year.
</p>
<p>
<input type="time" value="00:00:00" title="The Time Input element">
create input fields designed to let the user easily enter a time (hours and minutes, and optionally
seconds).
</p>
<p>
<input type="datetime-local" value="1970-01-01T00:00" title="The Datetime-local Input element">
create input controls that let the user easily enter both a date and a time, including the year, month,
and day
as well as the time in hours and minutes.
</p>
<p>
<label title="The Label element">
<input type="checkbox" title="The Checkbox Input element" checked>
are rendered by default as boxes that are checked when activated.
</label>
</p>
<ul>
<li>
<label title="The Label element">
<input type="radio" name="radio" title="The Radio Input element" checked>
are generally used in radio groups, only one radio button in a given group can be selected at the
same time.
</label>
</li>
<li>
<input id="input_radio" type="radio" name="radio" title="The Radio Input element">
<label for="input_radio" title="The Label element">
<label> represents a caption for an item in a user interface. </label>
</label>
</li>
</ul>
</section>
</div>
<div class="slide-container">
<section class="slide-page">
<h2><ruby>这<rt>zhè</rt>是<rt>shì</rt>一<rt>yī</rt>段<rt>duàn</rt>示<rt>shì</rt>例<rt>lì</rt>文<rt>
wén</rt>字<rt>zì</rt></ruby></h2>
<p>H5+pure css</p>
<ul>
<li>Pros
<ol>
<li>customizable</li>
<li>flexible</li>
</ol>
</li>
<li>Cons
<ol>
<li>complicated</li>
<li>unstable</li>
</ol>
</li>
</ul>
<dl style="columns: 2;">
<dt>Beast of Bodmin</dt>
<dd>A large feline inhabiting Bodmin Moor.</dd>
<dt>Morgawr</dt>
<dd>A sea serpent.</dd>
<dt>Owlman</dt>
<dd>A giant owl-like creature.</dd>
</dl>
<kbd>Ctrl+C</kbd>
</section>
</div>
</div>
</div>
<div class="browser closable">
<div class="titlebar">
<div class="titlebar-title">
<div class="titlebar-icon"></div>
<div class="titlebar-text">Document</div>
</div>
<div class="titlebar-extra"></div>
<div class="button btn-1"></div>
<div class="button btn-2"></div>
<div class="button btn-3"></div>
</div>
<div class="toolbar">
<div class="backward button"></div>
<div class="foreward button"></div>
<div class="refresh button"></div>
<input class="address" value="http://localhost:8081" spellcheck="false">
<div class="setting button"></div>
</div>
<div class="body" id="manual-container">
<h1>Directory listing for /</h1>
<hr>
<ul>
<li><a href="javascript:;">.bash_history</a></li>
<li><a href="javascript:;">.bash_logout</a></li>
<li><a href="javascript:;">.bashrc</a></li>
<li><a href="javascript:;">.cache/</a></li>
<li><a href="javascript:;">.config/</a></li>
<li><a href="javascript:;">.ssh/</a></li>
<li><a href="javascript:;">downloads/</a></li>
<li><a href="javascript:;">share/</a></li>
<li><a href="javascript:;">software/</a></li>
</div>
</div>
<div class="terminal closable">
<div class="titlebar">
<div class="titlebar-title">
<div class="titlebar-icon"></div>
<div class="titlebar-text">coli@DESKTOP-J45M1NUM:~</div>
</div>
<div class="titlebar-extra"></div>
<div class="button btn-1"></div>
<div class="button btn-2"></div>
<div class="button btn-3"></div>
</div>
<div class="body">
<div class="panel-v">
<pre class="terminal-code" oncontextmenu="event.preventDefault()">
<details><summary><span class="bash ps1">[<span class="bash ps1-u">coli</span><span class="terminal-code-brightgreen">@</span><span class="bash ps1-h">DESKTOP-J45M1NUM</span>: <span class="bash ps1-w">~</span>]$ </span>whoami</summary>
coli</details>
<details><summary><span class="bash ps1">[<span class="bash ps1-u">coli</span><span class="terminal-code-brightgreen">@</span><span class="bash ps1-h">DESKTOP-J45M1NUM</span>: <span class="bash ps1-w">~</span>]$ </span>export PS1='\[\e[0;92m\]\u@\h\[\e[0m\]: \[\e[0;34m\]\w\[\e[0;0m\]\n$ '</summary>
</details>
<details><summary><span class="bash ps1"><span class="bash ps1-u"><span class="blink">coli</span></span><span class="terminal-code-brightgreen">@</span><span class="bash ps1-h">DESKTOP-J45M1NUM</span>: <span class="bash ps1-w">~</span>
$ </span>whoami</summary>
coli</details>
<details open><summary><span class="bash ps1"><span class="bash ps1-u">coli</span><span class="terminal-code-brightgreen">@</span><span class="bash ps1-h">DESKTOP-J45M1NUM</span>: <span class="bash ps1-w">~</span>
$ </span>echo -e "\\e[5;33;41m\e[5mWarning\e[0m"</summary>
<span class="terminal-code-yellow terminal-code-bg-red"><soan class="terminal-code-blink">Warning</soan></span></details>
<span class="bash ps1"><span class="bash ps1-u">coli</span><span class="terminal-code-brightgreen">@</span><span class="bash ps1-h">DESKTOP-J45M1NUM</span>: <span class="bash ps1-w">~</span>
$ </span><span contentEditable="plaintext-only" spellcheck="false"></span>
</pre>
<div class="panel-h">
<pre class="terminal-code" oncontextmenu="event.preventDefault()">
<details><summary><span class="bash ps1">[<span class="bash ps1-u">coli</span><span class="terminal-code-brightgreen">@</span><span class="bash ps1-h">DESKTOP-J45M1NUM</span>: <span class="bash ps1-w">~</span>]$ </span>uname -s</summary>
Linux</details>
<span class="bash ps1"><span class="bash ps1-u">coli</span><span class="terminal-code-brightgreen">@</span><span class="bash ps1-h">DESKTOP-J45M1NUM</span>: <span class="bash ps1-w">~</span>
$ </span>cat /dev/random | head
<div class="terminal-code-nowrap">�T�lG�X�.���|��z�\;��
�^f\6n ��s�55����aR��Xq�8�{�V�J.@�{ �(`k�A�ՠO�jDa���:�9�X��)��{'=8���z���P�4��
�03���/B&4-��NDx': �e�a�k��k��2���I�AN��6]���x��"%M���hOa�_HZ�
4����#�IG!�&��`�M�݈�n4�mY0 i�|I��G�� � �j�P��k��+�� �]���#F�3f4Ux�6m��[n�K��Ƌ��|�E�Q-E|�~��� �;���V��xm?u��|.[[�� ~Tt�6]�|U��.(��;��)Ȕz� �"�n{����2��ב�>�j�p�D�fH`w
��rz؆l�M& k�-���#�� Gѭ��$�4y��S��T��\qF�轤?9gR��ΛGV��,ۘNpB��
͋��' ��|͑_ނl�� �v;{ M��0�^8_U��wP��Fq�@����/+��`��@�@ �;hR�ĩ [�J��ց��k����
6\�ϖ,gd�$��� �9��<�m&-���bT�b
8�x���͔���b���Ԩ^S8a**�O�;���0.|z=,�� 3�Z-)����'H����z*�1�5�V(</div>
<span class="bash ps1">[<span class="bash ps1-u">coli</span><span class="terminal-code-brightgreen">@</span><span class="bash ps1-h">DESKTOP-J45M1NUM</span>: <span class="bash ps1-w">~</span>]$ </span><span contentEditable="plaintext-only" spellcheck="false"></span>
</pre>
<pre class="terminal-code" oncontextmenu="event.preventDefault()">
\e[0mNormal
\e[1m<span class="terminal-code-bold">Bold</span>
\e[2m<span class="terminal-code-faint">Faint</span>\e[22mOff
\e[3m<span class="terminal-code-italic">Italic</span>\e[23mOff
\e[21m<span class="terminal-code-dbl-underline">Double</span> \e[4m<span class="terminal-code-underline">Underline</span>\e[24mOff
\e[5m<span class="terminal-code-blink">Slow Blink</span>\e[25mOff
\e[6m<span class="terminal-code-blink">Rapid Blink</span>\e[25mOff
\e[7m<span class="terminal-code-reverse">Reverse</span>\e[27mOff
\e[8m<span class="terminal-code-hidden">Hidden</span>\e[28mOff
\e[9m<span class="terminal-code-strikeout">Strikeout</span>\e[29mOff
\e[51m<span class="terminal-code-framed">Framed</span>\e[54mOff
\e[52m<span class="terminal-code-encircled">Encircled</span>\e[54mOff
\e[53m<span class="terminal-code-overline">Overlined</span>\e[55mOff
\e[30m<span class="terminal-code-black">Black</span> \e[40m<span class="terminal-code-bg-black">Background</span>
\e[31m<span class="terminal-code-red">Red</span> \e[41m<span class="terminal-code-bg-red">Background</span>
\e[32m<span class="terminal-code-green">Green</span> \e[42m<span class="terminal-code-bg-green">Background</span>
\e[33m<span class="terminal-code-yellow">Yellow</span> \e[43m<span class="terminal-code-bg-yellow">Background</span>
\e[34m<span class="terminal-code-blue">Blue</span> \e[44m<span class="terminal-code-bg-blue">Background</span>
\e[35m<span class="terminal-code-magenta">Magenta</span> \e[45m<span class="terminal-code-bg-magenta">Background</span>
\e[36m<span class="terminal-code-cyan">Cyan</span> \e[46m<span class="terminal-code-bg-cyan">Background</span>
\e[37m<span class="terminal-code-white">White</span> \e[47m<span class="terminal-code-bg-white">Background</span>
\e[38mDefault
\e[90m<span class="terminal-code-brightblack">Bright Black</span> \e[100m<span class="terminal-code-bg-brightblack">Background</span>
\e[91m<span class="terminal-code-brightred">Bright Red</span> \e[101m<span class="terminal-code-bg-brightred">Background</span>
\e[92m<span class="terminal-code-brightgreen">Bright Green</span> \e[102m<span class="terminal-code-bg-brightgreen">Background</span>
\e[93m<span class="terminal-code-brightyellow">Bright Yellow</span> \e[103m<span class="terminal-code-bg-brightyellow">Background</span>
\e[94m<span class="terminal-code-brightblue">Bright Blue</span> \e[104m<span class="terminal-code-bg-brightblue">Background</span>
\e[95m<span class="terminal-code-brightmagenta">Bright Magenta</span>\e[105m<span class="terminal-code-bg-brightmagenta">Background</span>
\e[96m<span class="terminal-code-brightcyan">Bright Cyan</span> \e[106m<span class="terminal-code-bg-brightcyan">Background</span>
\e[97m<span class="terminal-code-brightwhite">Bright White</span> \e[107m<span class="terminal-code-bg-brightwhite">Background</span>
</pre>
</div>
</div>
</div>
</div>
<div class="editor closable">
<div class="titlebar">
<div class="titlebar-title">
<div class="titlebar-icon"></div>
<div class="titlebar-text">Untitled.svg</div>
</div>
<div class="titlebar-extra"></div>
<div class="button btn-1"></div>
<div class="button btn-2"></div>
<div class="button btn-3"></div>
</div>
<div class="toolbar">
<div class="menu menu-1"></div>
<div class="menu menu-2"></div>
<div class="menu menu-3"></div>
</div>
<div class="body">
<textarea class="editor-text" contentEditable="plaintext-only" spellcheck="false">
<svg viewBox="0 0 420 420" xmlns="http://www.w3.org/2000/svg" >
<circle cx="210" cy="210" r="192.5" fill="#fcb548" />
<path
d="M61.5 225.5c0 68.438 66.764 124 149 124 82.237 0 149-55.562 149-124-7.858 57.608-71.917 104.38-149 104.38-77.082 0-141.14-46.772-149-104.38z"
fill="#76350d" />
<path
d="M32 113c7.078-5.946 58.756-30.871 136 1 12.684 5.233 10.781 24.937-12 18-21.625-6.585-66.255-7.195-80-3-65.324 19.936-50.61-10.447-44-16z"
fill="#fff" />
<circle cx="48" cy="121" r="15" fill="#733309" />
<path
d="M242 113c7.078-5.946 58.756-30.871 136 1 12.684 5.233 10.781 24.937-12 18-21.625-6.585-66.255-7.195-80-3-65.324 19.936-50.61-10.447-44-16z"
fill="#fff" />
<circle cx="258" cy="121" r="15" fill="#733309" />
</svg></textarea>
</div>
</div>
<p>
Here are some long code in common text paragraph:
<code>export PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/opt/bin</code> which should wrap
in the container.
</p>
<table class="nowrap">
<caption>table 1 has a sticky caption which is wider than half the table width.</caption>
<thead>
<tr>
<th scope="col">color name</th>
<th scope="col">HEX</th>
<th scope="col">HSLa</th>
<th scope="col">RGBa</th>
<th scope="col">CMYK</th>
<th scope="col">Lab</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Teal</th>
<td><code>#51F6F6</code></td>
<td><code>hsla(180, 90%, 64%, 1)</code></td>
<td><code>rgba(81, 246, 246, 1)</code></td>
<td><code>CMYK(100, 0, 0, 50)</code></td>
<td><code>Lab(48.25, -28.62, -8.41)</code></td>
</tr>
<tr>
<th scope="row">Goldenrod</th>
<td><code>#F6BC57</code></td>
<td><code>hsla(38, 90%, 65%, 1)</code></td>
<td><code>rgba(246, 188, 87, 1)</code></td>
<td><code>CMYK(0, 24, 85, 15)</code></td>
<td><code>Lab(70.82, 8.46, 68.22)</code></td>
</tr>
<tr>
<th scope="row">Aqua</th>
<td rowspan="2"><code>#00FFFF</code></td>
<td rowspan="2"><code>hsla(180, 10%, 50%, 1)</code></td>
<td rowspan="2"><code>rgba(0,255,255,1)</code></td>
<td rowspan="2"><code>CMYK(100,0,0,0)</code></td>
<td rowspan="2"><code>Lab(91.11, -47.71, -14.02)</code></td>
</tr>
<tr>
<th scope="row">Cyan</th>
</tr>
</tbody>
</table>
<details class="animation" open>
<summary><summary> specifies a summary, caption, or legend for the disclosure box. </summary></summary>
<p>
<details> creates a disclosure widget in which information is visible only when the widget is toggled into
an "open" state. </details>
</p>
</details>
<pre class="code nowrap">
printf '\\e[1m\e[1mBold\e[0m\n\\e[3m\e[3mItalic\e[23m\\e[23mOff\n\\e[21m\e[21mDouble \e[0m\\e[4m\e[4mUnderline\e[24m\\e[24mOff\n'
</pre>
</article>
<script src="js/terminal.js"></script>
<script src="js/window.js"></script>
<script>
new IntersectionObserver(
([e]) => e.target.nextElementSibling.classList.toggle('isSticky', e.target.getBoundingClientRect().y <= 0 && !e.isIntersecting)
).observe(document.querySelector("#task-box").previousElementSibling)
</script>
</body>
</html>