-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
578 lines (544 loc) · 57.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Developer: Habibul Rahman" />
<link rel="icon" href="./static/images/logo.png" />
<title>ttypist</title>
<link rel="stylesheet" href="./index.css"/>
<link rel="stylesheet" href="./static/css/caret.css"/>
<link rel="stylesheet" href="./static/css/header.css"/>
<link rel="stylesheet" href="./static/css/setting.css"/>
</head>
<body>
<header>
<div class="content">
<div class="logo">
<div class="symbol"><svg class="iconSiteLogo" fill="black" viewBox="0 0 60 60" width="256px" height="256px"> <path d="M36,17h-2c-0.552,0-1,0.447-1,1s0.448,1,1,1h2c0.552,0,1-0.447,1-1S36.552,17,36,17z"></path> <path d="M30,17h-7c-0.552,0-1,0.447-1,1s0.448,1,1,1h7c0.552,0,1-0.447,1-1S30.552,17,30,17z"></path> <path d="M18.29,17.29C18.11,17.479,18,17.74,18,18c0,0.27,0.11,0.52,0.29,0.71C18.48,18.89,18.74,19,19,19 c0.26,0,0.52-0.11,0.71-0.29C19.89,18.52,20,18.26,20,18s-0.11-0.521-0.29-0.71C19.34,16.92,18.66,16.92,18.29,17.29z"></path> <circle cx="16" cy="45" r="2"></circle> <rect x="15" y="52" width="30" height="2"></rect> <circle cx="35" cy="45" r="2"></circle> <path d="M59,20c-0.553,0-1,0.447-1,1v4h-1v-0.59c0-1.329-1.081-2.41-2.41-2.41H49V0H11v22H5.411C4.082,22,3,23.081,3,24.41V25H2v-4 c0-0.553-0.448-1-1-1s-1,0.447-1,1v10c0,0.553,0.448,1,1,1s1-0.447,1-1v-4h1v0.59C3,28.919,4.082,30,5.411,30H6v4H2v5H1v2h1h2h1v-2 H4v-3h2v10c0,1.859,1.28,3.411,3,3.858v6.527C9,58.378,10.622,60,12.615,60h34.77C49.378,60,51,58.378,51,56.385v-6.527 c1.721-0.447,3-1.999,3-3.858V30h0.59c1.329,0,2.41-1.081,2.41-2.41V27h1v4c0,0.553,0.447,1,1,1s1-0.447,1-1V21 C60,20.447,59.553,20,59,20z M13,2h34v20H13V2z M40,28c-0.552,0-1,0.447-1,1v6h-2v-5c0-0.553-0.448-1-1-1s-1,0.447-1,1v5h-2v-4 c0-0.553-0.448-1-1-1s-1,0.447-1,1v4h-2v-4c0-0.553-0.448-1-1-1s-1,0.447-1,1v4h-2v-5c0-0.553-0.448-1-1-1s-1,0.447-1,1v5h-2v-6 c0-0.553-0.448-1-1-1s-1,0.447-1,1v5.829c-1.053-0.293-1.939-0.965-2.466-1.871c-0.059-0.103-0.12-0.204-0.17-0.313 c-0.042-0.091-0.074-0.186-0.108-0.28c-0.049-0.133-0.092-0.269-0.127-0.408c-0.027-0.11-0.048-0.22-0.065-0.331 c-0.022-0.141-0.036-0.285-0.044-0.431c-0.005-0.107-0.01-0.215-0.007-0.322c0.005-0.144,0.023-0.284,0.043-0.424 c0.016-0.115,0.027-0.23,0.053-0.344c0.02-0.088,0.053-0.169,0.079-0.255c0.046-0.15,0.088-0.301,0.153-0.447 c0.051-0.116,0.115-0.223,0.176-0.332c0.037-0.067,0.069-0.138,0.11-0.203c0.071-0.112,0.152-0.214,0.233-0.317 c0.059-0.075,0.118-0.15,0.183-0.221c0.083-0.092,0.169-0.18,0.259-0.264c0.084-0.077,0.174-0.148,0.264-0.218 c0.087-0.067,0.171-0.139,0.263-0.199c0.171-0.111,0.351-0.208,0.539-0.293c0.08-0.036,0.164-0.063,0.246-0.094 c0.145-0.054,0.292-0.101,0.445-0.138c0.077-0.019,0.154-0.038,0.232-0.052C19.521,27.03,19.757,27,20,27h20 c0.243,0,0.479,0.03,0.71,0.072c0.078,0.014,0.155,0.033,0.232,0.052c0.152,0.037,0.3,0.084,0.445,0.138 c0.082,0.031,0.166,0.058,0.246,0.094c0.188,0.084,0.368,0.182,0.539,0.293c0.092,0.06,0.176,0.132,0.263,0.199 c0.09,0.07,0.18,0.141,0.264,0.218c0.09,0.083,0.176,0.172,0.259,0.264c0.064,0.071,0.124,0.146,0.183,0.221 c0.08,0.103,0.162,0.205,0.233,0.317c0.041,0.065,0.073,0.136,0.11,0.203c0.061,0.109,0.125,0.216,0.176,0.332 c0.064,0.146,0.107,0.297,0.153,0.447c0.026,0.085,0.059,0.167,0.079,0.255c0.027,0.113,0.037,0.229,0.053,0.344 c0.02,0.14,0.038,0.28,0.043,0.424c0.003,0.107-0.002,0.214-0.007,0.322c-0.007,0.146-0.021,0.29-0.044,0.431 c-0.018,0.11-0.038,0.221-0.065,0.331c-0.035,0.14-0.078,0.275-0.127,0.408c-0.035,0.094-0.066,0.19-0.108,0.28 c-0.049,0.109-0.111,0.209-0.17,0.313c-0.527,0.906-1.414,1.578-2.466,1.871V29C41,28.447,40.552,28,40,28z M39,45 c0,2.206-1.794,4-4,4s-4-1.794-4-4s1.794-4,4-4S39,42.794,39,45z M29,45c0,2.206-1.794,4-4,4s-4-1.794-4-4s1.794-4,4-4 S29,42.794,29,45z M12,45c0-2.206,1.794-4,4-4s4,1.794,4,4s-1.794,4-4,4S12,47.206,12,45z M47,54.212 C47,55.198,46.198,56,45.212,56H14.788C13.802,56,13,55.198,13,54.212v-2.424C13,50.802,13.802,50,14.788,50h30.424 C46.198,50,47,50.802,47,51.788V54.212z M44,49c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S46.206,49,44,49z"></path> <circle cx="25" cy="45" r="2"></circle> <circle cx="44" cy="45" r="2"></circle></svg></div>
<div class="text site-name">ttypist</div>
</div>
<div class="profile">
<div class="picture"><img src="./static/images/dp.jpeg" alt="user"></div>
<div class="user">
<div class="name">Habibul Rahman</div>
<div class="username">@habibulr</div>
</div>
</div>
</div>
</header>
<div class="typingAreaContainer">
<div class="textContainer">
<text>
<word>
<letter class="line" id="line">n</letter>
<letter class="line">a</letter>
<letter class="line">j</letter>
<letter class="line">m</letter>
<letter class="line">a</letter>
</word>
<word class="whitespace">
<letter class="line"> </letter>
</word>
<word>
<letter class="line">r</letter>
<letter class="line">a</letter>
<letter class="line">h</letter>
<letter class="line">m</letter>
<letter class="line">a</letter>
<letter class="line">t</letter>
</word>
</text>
</div>
<div class="textInputFieldContainer">
<input id="textInputField" type="text" placeholder="Type the above text here." tabindex="0" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" data-gramm="false" data-gramm_editor="false" data-enable-grammarly="false" list="autocompleteOff">
</div>
</div>
<div class="setting">
<div class="column c1">
<div class="row textinput">
<div class="label">
<div class="symbol"> <svg class="iconTextInput" fill="var(--setting-icon-color)" width="256px" height="256px" viewBox="0 -0.5 21 21"><g transform="translate(-379, -800)"> <g transform="translate(56, 160)"> <path d="M327.2,654 L325.1,654 L325.1,646 L327.2,646 L327.2,644 L323,644 L323,656 L327.2,656 L327.2,654 Z M333.5,644 L333.5,646 L341.9,646 L341.9,654 L333.5,654 L333.5,656 L344,656 L344,644 L333.5,644 Z M331.4,658 L333.5,658 L333.5,660 L327.2,660 L327.2,658 L329.3,658 L329.3,642 L327.2,642 L327.2,640 L333.5,640 L333.5,642 L331.4,642 L331.4,658 Z"></path></svg> </div>
<div class="text">text input</div>
</div>
<div id="textInputFieldConfig" class="s2 configButtonContainer">
<button class="hidden" value="hidden" tabindex="0" role="button" type="button" id="selected">hidden</button>
<button class="visible" value="visible" tabindex="0" role="button" type="button">visible</button>
</div>
</div>
<div class="row caretstyle">
<div class="label">
<div class="symbol">
<svg class="iconCaret" width="256px" height="256px" viewBox="0 0 24 24" fill="none">
<path stroke="var(--setting-icon-color)" stroke-width="2" opacity="1" d="M9 4L10 4C11.1046 4 12 4.89543 12 6L12 18C12 19.1046 11.1046 20 10 20L9 20" stroke-linecap="round" stroke-linejoin="round"></path>
<path stroke="var(--setting-icon-color)" stroke-width="2" opacity="1" d="M15 4L14 4C12.8954 4 12 4.89543 12 6L12 18C12 19.1046 12.8954 20 14 20L15 20" stroke-linecap="round" stroke-linejoin="round"></path>
<path stroke="var(--setting-icon-color)" stroke-width="2" opacity="1" d="M10 12H14" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<div class="text">caret</div>
</div>
<div id="caretStyleConfig" class="s5 configButtonContainer">
<button class="offCaret" value="off" tabindex="0" role="button" type="button">off</button>
<button class="underscoreCaret" value="underscore" tabindex="0" role="button" type="button" ><span class="shape underscoreCaretShape"></span></button>
<button class="lineCaret" value="line" tabindex="0" role="button" type="button" id="selected"><span class="shape lineCaretShape" style="background-color: var(--selected-color)"></span></button>
<button class="boxCaret" value="box" tabindex="0" role="button" type="button" ><span class="shape boxCaretShape"></span></button>
<button class="blockCaret" value="block" tabindex="0" role="button" type="button" ><span class="shape blockCaretShape"></span></button>
</div>
</div>
<div class="row deletion">
<div class="label">
<div class="symbol"><svg class="iconDeletion" fill="var(--setting-icon-color)" width="256px" height="256px" viewBox="0 -64 640 640"> <path d="M576 64H205.26A63.97 63.97 0 0 0 160 82.75L9.37 233.37c-12.5 12.5-12.5 32.76 0 45.25L160 429.25c12 12 28.28 18.75 45.25 18.75H576c35.35 0 64-28.65 64-64V128c0-35.35-28.65-64-64-64zm-84.69 254.06c6.25 6.25 6.25 16.38 0 22.63l-22.62 22.62c-6.25 6.25-16.38 6.25-22.63 0L384 301.25l-62.06 62.06c-6.25 6.25-16.38 6.25-22.63 0l-22.62-22.62c-6.25-6.25-6.25-16.38 0-22.63L338.75 256l-62.06-62.06c-6.25-6.25-6.25-16.38 0-22.63l22.62-22.62c6.25-6.25 16.38-6.25 22.63 0L384 210.75l62.06-62.06c6.25-6.25 16.38-6.25 22.63 0l22.62 22.62c6.25 6.25 6.25 16.38 0 22.63L429.25 256l62.06 62.06z"></path></svg></div>
<div class="text">deletion</div>
</div>
<div id="textDeletionConfig" class="s2 configButtonContainer">
<button class="off"value="off" tabindex="0" role="button" type="button">off</button>
<button class="on" value="on" tabindex="0" role="button" type="button" id="selected">on</button>
</div>
</div>
<div class="row modifierkey">
<div class="label">
<div class="symbol"><svg class="iconDeletion" fill="var(--setting-icon-color)" width="256px" height="256px" viewBox="0 -64 640 640"> <path d="M576 64H205.26A63.97 63.97 0 0 0 160 82.75L9.37 233.37c-12.5 12.5-12.5 32.76 0 45.25L160 429.25c12 12 28.28 18.75 45.25 18.75H576c35.35 0 64-28.65 64-64V128c0-35.35-28.65-64-64-64zm-84.69 254.06c6.25 6.25 6.25 16.38 0 22.63l-22.62 22.62c-6.25 6.25-16.38 6.25-22.63 0L384 301.25l-62.06 62.06c-6.25 6.25-16.38 6.25-22.63 0l-22.62-22.62c-6.25-6.25-6.25-16.38 0-22.63L338.75 256l-62.06-62.06c-6.25-6.25-6.25-16.38 0-22.63l22.62-22.62c6.25-6.25 16.38-6.25 22.63 0L384 210.75l62.06-62.06c6.25-6.25 16.38-6.25 22.63 0l22.62 22.62c6.25 6.25 6.25 16.38 0 22.63L429.25 256l62.06 62.06z"></path></svg></div>
<div class="text">modifier keys</div>
</div>
<div id="modifierKeyConfig" class="s3 configButtonContainer">
<div class="modifierKeyCheckboxButton alt">
<input id="alt" tabindex="0" type="checkbox" name="modifierKeyCheckboxButton" checked>
<label for="alt">alt</label>
</div>
<div class="modifierKeyCheckboxButton ctrl">
<input id="ctrl" tabindex="0" type="checkbox" name="modifierKeyCheckboxButton" checked>
<label for="ctrl">ctrl</label>
</div>
<div class="modifierKeyCheckboxButton meta">
<input id="meta" tabindex="0" type="checkbox" name="modifierKeyCheckboxButton" data-value="meta">
<label for="meta">meta</label>
</div>
</div>
</div>
<div class="row confidence">
<div class="label">
<div class="symbol"><svg class="iconDeletion" fill="var(--setting-icon-color)" width="256px" height="256px" viewBox="0 -64 640 640"> <path d="M576 64H205.26A63.97 63.97 0 0 0 160 82.75L9.37 233.37c-12.5 12.5-12.5 32.76 0 45.25L160 429.25c12 12 28.28 18.75 45.25 18.75H576c35.35 0 64-28.65 64-64V128c0-35.35-28.65-64-64-64zm-84.69 254.06c6.25 6.25 6.25 16.38 0 22.63l-22.62 22.62c-6.25 6.25-16.38 6.25-22.63 0L384 301.25l-62.06 62.06c-6.25 6.25-16.38 6.25-22.63 0l-22.62-22.62c-6.25-6.25-6.25-16.38 0-22.63L338.75 256l-62.06-62.06c-6.25-6.25-6.25-16.38 0-22.63l22.62-22.62c6.25-6.25 16.38-6.25 22.63 0L384 210.75l62.06-62.06c6.25-6.25 16.38-6.25 22.63 0l22.62 22.62c6.25 6.25 6.25 16.38 0 22.63L429.25 256l62.06 62.06z"></path></svg></div>
<div class="text">confidence</div>
</div>
<div id="userConfidenceConfig" class="s3 configButtonContainer">
<button class="low" value="low" tabindex="0" role="button" type="button" id="selected">low</button>
<button class="high" value="high" tabindex="0" role="button" type="button">high</button>
<button class="peak" value="peak" tabindex="0" role="button" type="button">peak</button>
</div>
</div>
<div class="row delcorrect">
<div class="label">
<div class="symbol"><svg class="iconDeletion" fill="var(--setting-icon-color)" width="256px" height="256px" viewBox="0 -64 640 640"> <path d="M576 64H205.26A63.97 63.97 0 0 0 160 82.75L9.37 233.37c-12.5 12.5-12.5 32.76 0 45.25L160 429.25c12 12 28.28 18.75 45.25 18.75H576c35.35 0 64-28.65 64-64V128c0-35.35-28.65-64-64-64zm-84.69 254.06c6.25 6.25 6.25 16.38 0 22.63l-22.62 22.62c-6.25 6.25-16.38 6.25-22.63 0L384 301.25l-62.06 62.06c-6.25 6.25-16.38 6.25-22.63 0l-22.62-22.62c-6.25-6.25-6.25-16.38 0-22.63L338.75 256l-62.06-62.06c-6.25-6.25-6.25-16.38 0-22.63l22.62-22.62c6.25-6.25 16.38-6.25 22.63 0L384 210.75l62.06-62.06c6.25-6.25 16.38-6.25 22.63 0l22.62 22.62c6.25 6.25 6.25 16.38 0 22.63L429.25 256l62.06 62.06z"></path></svg></div>
<div class="text">delete correct text</div>
</div>
<div id="deletionOfCorrectWordConfig" class="s2 configButtonContainer">
<button class="off" value="off" tabindex="0" role="button" type="button">off</button>
<button class="on" value="on" tabindex="0" role="button" type="button" id="selected">on</button>
</div>
</div>
<div class="row difficulty">
<div class="label">
<div class="symbol">
<svg class="iconTestDifficulty" width="256px" height="256px" viewBox="0 0 64 64">
<path fill="var(--setting-icon-color)" opacity="0.4" d="M2.1 42.2c-.9-6.8 3.3-17.7 5.3-32.4c.4-2.6 14-5.4 20.4-5.4c1.6 0 3 7.5 2.6 10.1c-.3 1.9-3 1.4-3 1.4c-.9 2.5-3.6 1.5-3.6 1.5c-.8 2.1-3.2 1.1-3.2 1.1c-1 2-3.2 1-3.2 1c-2 8.7 1.7 7.9 4.4 21c0 0 .8-.1 2.9-4.4c8.6-17.3 38.8-11.8 37 6.8c-.4 4.1 4 10.9-12.3 16c-12.9 4-28.7-3.7-28.7-3.7c-5.4 1.7-15.9 1.6-16.2-2.4c-.3-4.7-1.9-7.1-2.4-10.6"></path>
<path fill="var(--setting-icon-color)" opacity="1.0" d="M61.8 42.9c.4-4.4-.9-8-3.3-10.6c1.4 2.4 2.1 5.3 1.8 8.7c-.4 4.1 4 10.9-12.3 16c-12.9 4-28.7-3.7-28.7-3.7c-4.2 1.3-11.6 1.5-14.7-.4c.4 3.9 10.8 4 16.2 2.3c0 0 15.8 7.7 28.7 3.7c16.2-5.1 11.9-11.9 12.3-16"></path>
<path fill="var(--setting-icon-color)" opacity="1.0" d="M16.3 19.4c-2.5 10.2 1.6 9.8 4.3 22.7l1.4-1.5c-2-13-5.4-11.4-4.6-21c-.6 0-1.1-.2-1.1-.2"></path>
<path fill="var(--setting-icon-color)" opacity="0.6" d="M29.2 48.5c8.3 3.1 20.8-.1 27.9-3.4c-3.1 7.5-19.6 11.5-27.9 3.4"></path>
<path fill="var(--setting-icon-color)" opacity="1.0" d="M25.1 7.2c-.6-1.1-1.8-1-2.6-.7c.1-1.2 3-2.1 2.6.7"></path>
<path fill="var(--setting-icon-color)" opacity="1.0" d="M31.2 11.5c-.3-2.2-1-4.4-2.3-6.2c.7 1.9 1.1 3.9 1.1 5.9c0 .9.2 4.1-1.4 3.7c-1-.3-1-1.1-1.3-2c-.4-1.4-1.2-2.9-1.1-4.3c-.4 1.4.1 3.1.2 4.5c.1.8.7 3.1-.4 3.4c-.6.2-1.3-.2-1.8-.5c-.2-.1-.3-.9-.4-1.2c-.4-1.4-1.2-3-1.1-4.5c-.4 1.3 0 2.9.1 4.3c.1.8.5 2.7-.5 3.1c-1.2.6-1.3-.8-1.5-1.5c-.4-1.3-1-2.8-1-4.2c-.4 1.7.1 3.7.1 5.4c0 .9-1.9 1.6-2.6 1.1c-1.1-.8-1.3-2.8-1.5-4.1c.3.4.8 1 1.4.9c-.5-.6-.8-1.5-1.1-2.2c-.3-.6-1-1.9-1.8-1.9c.1.2.8 1.9.7 2c-.3.5-.6 1.1-1 1.6c-.3.4-1.2 1.8-1.9 1.4c-.8-.5-1-1.7-1.2-2.5c.1 1 0 2.5 1 3.1c.9.6 2-.3 2.6-.9c.2 2 1.1 4.7 3.6 4.5c.5 0 1.1-.2 1.6-.4c.4-.2.9-.7 1.3-.5c1.1.3 2.2.1 3-.7c.4-.4.3-.6.8-.5c.6.1 1.2.2 1.7 0c.5-.1.9-.4 1.2-.8c.2-.2.3-.4.4-.7c.2-.4.4-.2.8-.2c2.6 0 2.5-3.3 2.3-5.1"></path>
<path fill="var(--setting-icon-color)" opacity="1.0" d="M28.7 5.8c-.6-1.1-1.8-1-2.6-.7c.1-1.1 3.1-2 2.6.7"></path>
<path fill="var(--setting-icon-color)" opacity="1.0" d="M22.2 8.7c-.6-1.1-1.8-1-2.6-.7c.1-1.2 3-2.1 2.6.7"></path>
<path fill="var(--setting-icon-color)" opacity="1.0" d="M18.8 10.3c-.6-1.1-1.8-1-2.6-.7c.1-1.2 3.1-2.1 2.6.7"></path>
</svg>
</div>
<div class="text">test difficulty</div>
</div>
<div id="testDifficultyConfig" class="s3 configButtonContainer">
<button class="ease" value="ease" tabindex="0" role="button" type="button" id="selected">ease</button>
<button class="expert" value="expert" tabindex="0" role="button" type="button">expert</button>
<button class="master" value="master" tabindex="0" role="button" type="button">master</button>
</div>
</div>
<div class="row strictspace">
<div class="label">
<div class="symbol"><svg class="iconStrictSpace" width="256px" height="256px" viewBox="0 0 24.00 24.00" fill="none"><path d="M5 12H19" stroke="var(--setting-icon-color)" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path></svg></div>
<div class="text">strict space</div>
</div>
<div id="strictSpaceConfig" class="s2 configButtonContainer">
<button class="off" value="off" tabindex="0" role="button" type="button">off</button>
<button class="on" value="on" tabindex="0" role="button" type="button" id="selected">on</button>
</div>
</div>
<div class="row error">
<div class="label">
<div class="symbol"><svg class="iconErrorHandling" width="256px" height="256px" viewBox="0 0 60 60" fill="none"> <path fill="var(--setting-icon-color)" opacity="0.8" fill-rule="evenodd" transform="translate(-350 -690)" d="M390.774,690a3.994,3.994,0,0,1,2.824,1.17l15.231,15.23A4,4,0,0,1,410,709.233v21.534a4,4,0,0,1-1.172,2.831L393.6,748.828A3.989,3.989,0,0,1,390.774,750H369.225a3.989,3.989,0,0,1-2.824-1.171l-15.23-15.23A3.994,3.994,0,0,1,350,730.767V709.233a4,4,0,0,1,1.173-2.832l15.23-15.23a3.994,3.994,0,0,1,2.824-1.17h21.549ZM395,729.951A3.406,3.406,0,0,1,395,734.77l-0.22.22a3.42,3.42,0,0,1-4.833,0l-8.764-8.755a1.71,1.71,0,0,0-2.417,0l-8.741,8.746a3.417,3.417,0,0,1-4.836,0l-0.194-.193a3.408,3.408,0,0,1,.017-4.842l8.834-8.735a1.7,1.7,0,0,0,0-2.43l-8.831-8.725a3.409,3.409,0,0,1-.018-4.844l0.193-.193a3.411,3.411,0,0,1,2.418-1c0.944,0,3.255,1.835,3.872,2.455l7.286,7.287a1.708,1.708,0,0,0,2.417,0l8.764-8.748a3.417,3.417,0,0,1,4.831,0L395,705.243a3.406,3.406,0,0,1,0,4.818l-8.727,8.737a1.7,1.7,0,0,0,0,2.407Z"></path></svg></div>
<div class="text">extra errors</div>
</div>
<div id="errorHandlingConfig" class="s4 configButtonContainer">
<button class="off" value="off" tabindex="0" role="button" type="button">off</button>
<button class="insert" value="insert" tabindex="0" role="button" type="button" id="selected">insert</button>
<button class="skip" value="skip" tabindex="0" role="button" type="button">skip</button>
<button class="replace" value="replace" tabindex="0" role="button" type="button">replace</button>
</div>
</div>
<div class="row forgive">
<div class="label">
<div class="symbol">
<svg class="iconForgiveExtraLetterError" fill="var(--setting-icon-color)" height="200px" width="200px" viewBox="0 0 512 512">
<path opacity="1.0" d="M326.527,171.735c-15.637-2.602-55.941-2.43-82.686,7.296c-26.752,9.725-75.397,40.124-89.988,44.997 c-14.591,4.859-15.81,24.322,17.02,27.964c32.836,3.654,62.018-17.028,69.313-20.669c7.296-3.654,77.826,7.296,77.826,7.296 l22.19,5.468l51.161,69.154c8.977-7.798,26.732-24.349,31.228-36.927c1.641-4.581,4.078-8.792,6.752-12.532l-72.49-99.977 C347.605,169.047,336.444,173.39,326.527,171.735z"></path>
<path opacity="0.5" d="M326.527,254.123l-10.752-1.085c-14.107-2.185-54-7.865-68.975-7.865c-0.662,0-1.185,0.007-1.576,0.026 c-0.602,0.344-1.298,0.742-1.98,1.139c-10.625,6.19-35.524,20.681-64.52,20.681c-3.178,0-6.362-0.179-9.46-0.523 c-4.7-0.523-8.832-1.331-12.486-2.35c3.462,1.516,6.653,3.688,9.381,6.475c4.29,4.383,6.944,9.758,7.997,15.379 c2.496-0.669,5.084-1.04,7.732-1.04c8.116,0,15.71,3.191,21.376,8.99c5.588,5.707,8.613,13.254,8.527,21.238 c0,0.079-0.013,0.159-0.013,0.238c8.083,0.026,15.644,3.218,21.297,8.99c5.587,5.707,8.613,13.253,8.527,21.238 c-0.027,2.754-0.45,5.441-1.198,8.024c5.733,1.198,10.983,4.051,15.18,8.341c11.532,11.791,11.327,30.757-0.457,42.29l-5.898,5.773 c0.026,0,0.053,0,0.079,0c9.917-0.715,18.265-6.832,20.602-16.048c4.038,3.184,9.122,5.097,14.664,5.097 c13.095,0,23.713-10.612,23.713-23.713c0-1.377-0.139-2.714-0.371-4.026c4.171,3.635,9.606,5.852,15.571,5.852 c13.095,0,23.714-10.619,23.714-23.713c2.807,1.172,5.885,1.827,9.116,1.827c13.101,0,23.713-10.619,23.713-23.713 c0-9.944-4.859-16.418-16.418-29.791L326.527,254.123z"></path>
<path opacity="1.0" d="M155.734,280.829c-5.918-6.044-15.61-6.15-21.654-0.238l-21.88,21.416c-6.044,5.912-6.15,15.604-0.238,21.648 c5.918,6.044,15.61,6.15,21.654,0.231l21.886-21.41C161.539,296.565,161.645,286.873,155.734,280.829z"></path>
<path opacity="1.0" d="M192.833,304.158c-5.912-6.051-15.604-6.157-21.648-0.239l-29.175,28.546 c-6.051,5.918-6.15,15.61-0.239,21.648c5.912,6.051,15.611,6.157,21.655,0.239l29.175-28.547 C198.645,319.894,198.751,310.202,192.833,304.158z"></path>
<path opacity="1.0" d="M222.643,334.624c-5.912-6.044-15.604-6.157-21.648-0.238l-29.175,28.553 c-6.044,5.911-6.15,15.603-0.238,21.654c5.912,6.038,15.604,6.144,21.655,0.225l29.175-28.546 C228.456,350.353,228.562,340.661,222.643,334.624z"></path>
<path opacity="1.0" d="M245.158,372.226c-5.912-6.044-15.604-6.156-21.648-0.238l-17.02,16.657 c-6.044,5.911-6.15,15.603-0.238,21.648c5.918,6.044,15.61,6.144,21.654,0.238l17.02-16.656 C250.971,387.963,251.07,378.271,245.158,372.226z"></path>
<path opacity="1.0" d="M510.606,234.991l-97.792-134.866c-2.364-3.27-6.925-3.991-10.189-1.628l-43.315,31.412 c-3.264,2.363-3.992,6.925-1.622,10.188L455.48,274.97c2.363,3.264,6.925,3.992,10.188,1.622l43.323-31.406 C512.248,242.815,512.977,238.254,510.606,234.991z M477.334,247.106c-5.435,3.945-13.042,2.727-16.987-2.708 c-3.939-5.435-2.728-13.035,2.714-16.98c5.435-3.946,13.035-2.728,16.981,2.701C483.98,235.56,482.769,243.167,477.334,247.106z"></path>
<path opacity="0.5" d="M144.784,261.63c2.304,0,4.555,0.292,6.739,0.788c-18.384-7.05-21.429-19.946-21.906-24.494 c-1.298-12.248,6.587-23.402,19.622-27.745c5.243-1.748,18.986-9.242,32.28-16.484c14.26-7.779,29.91-16.312,43.521-22.589 c-17.252-1.396-33.419-0.807-42.051,0.629c-9.295,1.549-19.675-2.164-28.553-6.944l-73.06,100.752 c2.191,3.29,4.157,6.892,5.54,10.771c2.046,5.72,6.839,12.26,12.3,18.43c0.854-1.099,1.761-2.172,2.781-3.171l21.879-21.416 C129.498,264.662,136.926,261.63,144.784,261.63z"></path>
<path opacity="0.5" d="M152.695,129.902l-43.323-31.406c-3.257-2.363-7.818-1.642-10.188,1.628L1.391,234.991 c-2.37,3.263-1.635,7.824,1.622,10.195l43.316,31.406c3.264,2.37,7.825,1.642,10.189-1.629l97.793-134.866 C156.68,136.834,155.952,132.272,152.695,129.902z M123.745,144.97c-3.939,5.428-11.546,6.646-16.981,2.701 c-5.442-3.94-6.654-11.546-2.708-16.981c3.939-5.435,11.546-6.653,16.981-2.708C126.479,131.928,127.684,139.528,123.745,144.97z"></path>
</svg>
</div>
<div class="text">forgive extra errors</div>
</div>
<div id="forgiveErrorConfig" class="s2 configButtonContainer">
<button class="off" value="off" tabindex="0" role="button" type="button">off</button>
<button class="on" value="on" tabindex="0" role="button" type="button" id="selected">on</button>
</div>
</div>
<div class="row stoponerror">
<div class="label">
<div class="symbol">
<svg class="iconStopOnError" width="256px" height="256px" viewBox="0 0 512 512">
<path fill="var(--setting-icon-color)" opacity="0.5" d="M90,13.566c0-3.161-1.356-6.071-3.477-8.192c-1.551-1.55-4.16-3.397-8.035-3.397 C72.125,1.977,67,7.175,67,13.566V47h23V13.566z"></path>
<polygon fill="var(--setting-icon-color)" opacity="1.0" points="183.307,176 117.863,67 52.664,67 118.108,176 "></polygon>
<polygon fill="var(--setting-icon-color)" opacity="1.0" points="29.446,67 2,67 2,176 94.89,176 "></polygon>
<rect fill="var(--setting-icon-color)" opacity="0.5" height="45" width="23" x="67" y="196"></rect>
<rect fill="var(--setting-icon-color)" opacity="0.5" height="45" width="23" x="422" y="196"></rect>
<path fill="var(--setting-icon-color)" opacity="0.5" d="M445,13.566c0-3.152-1.029-6.061-3.16-8.193c-1.549-1.549-4.328-3.396-8.217-3.396 C427.278,1.977,422,7.175,422,13.566V47h23V13.566z"></path>
<polygon fill="var(--setting-icon-color)" opacity="1.0" points="448.56,176 383.116,67 317.917,67 383.361,176 "></polygon>
<polygon fill="var(--setting-icon-color)" opacity="1.0" points="360.142,176 294.698,67 229.499,67 294.944,176 "></polygon>
<polygon fill="var(--setting-icon-color)" opacity="1.0" points="271.725,176 206.28,67 141.081,67 206.525,176 "></polygon>
<path fill="var(--setting-icon-color)" opacity="1.0" d="M56.748,369.614c0.945,0,1.856,0.386,2.723,0.386h35.42L29.446,261H2v109h52.025 C54.891,370,55.802,369.614,56.748,369.614z"></path>
<polygon fill="var(--setting-icon-color)" opacity="1.0" points="141.081,261 206.525,370 271.725,370 206.28,261 "></polygon>
<path fill="var(--setting-icon-color)" opacity="0.5" d="M455.252,487h-42.839c-0.775,0-1.526,0-2.25,0H389v23h89v-23h-20.498 C456.778,487,456.027,487,455.252,487z"></path>
<rect fill="var(--setting-icon-color)" opacity="0.5" height="77" width="23" x="422" y="390"></rect>
<polygon fill="var(--setting-icon-color)" opacity="1.0" points="406.334,261 471.778,370 510,370 510,261 "></polygon>
<polygon fill="var(--setting-icon-color)" opacity="1.0" points="406.334,67 471.778,176 510,176 510,67 "></polygon>
<path fill="var(--setting-icon-color)" opacity="1.0" d="M412.413,369.614c0.945,0,1.856,0.386,2.723,0.386h33.424l-65.444-109h-65.199l65.444,109h26.33 C410.557,370,411.468,369.614,412.413,369.614z"></path>
<path fill="var(--setting-icon-color)" opacity="1.0" d="M53.946,261h-1.281l65.444,109h65.199l-65.444-109C117.863,261,54.835,261,53.946,261z"></path>
<path fill="var(--setting-icon-color)" opacity="0.5" d="M99.587,487H56.748c-0.775,0-1.526,0-2.25,0H34v23h88v-23h-20.163C101.113,487,100.362,487,99.587,487z"></path>
<polygon fill="var(--setting-icon-color)" opacity="1.0" points="229.499,261 294.943,370 360.143,370 294.699,261 "> </polygon>
<rect fill="var(--setting-icon-color)" opacity="0.5" height="77" width="23" x="67" y="390"></rect>
</svg>
</div>
<div class="text">stop on error</div>
</div>
<div id="stopOnErrorConfig" class="s3 configButtonContainer">
<button class="off" value="off" tabindex="0" role="button" type="button" id="selected">off</button>
<button class="letter" value="letter" tabindex="0" role="button" type="button">letter</button>
<button class="word" value="word" tabindex="0" role="button" type="button">word</button>
</div>
</div>
<div class="row goblind">
<div class="label">
<div class="symbol">
<svg class="iconHide" width="256px" height="256px" viewBox="0 0 24 24">
<path fill="var(--setting-icon-color)" opacity="1.0" fill-rule="evenodd" clip-rule="evenodd" d="M15.9202 12.7988C15.9725 12.5407 16 12.2736 16 12C16 9.79086 14.2091 8 12 8C11.7264 8 11.4593 8.02746 11.2012 8.07977L15.9202 12.7988ZM8.66676 9.78799C8.24547 10.4216 8 11.1821 8 12C8 14.2091 9.79086 16 12 16C12.8179 16 13.5784 15.7545 14.212 15.3332L8.66676 9.78799Z"></path>
<path fill="var(--setting-icon-color)" opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M15.7872 16.9085L6.85842 7.97974C5.54385 8.96489 4.48541 10.1167 3.81198 10.9343C3.42382 11.4056 3.22974 11.6412 3.22974 12C3.22974 12.3588 3.42382 12.5944 3.81198 13.0657C5.23207 14.7899 8.36428 18 12 18C13.3529 18 14.636 17.5555 15.7872 16.9085ZM9.57695 6.45563C10.3479 6.17115 11.1605 6 12 6C15.6357 6 18.768 9.21014 20.188 10.9343C20.5762 11.4056 20.7703 11.6412 20.7703 12C20.7703 12.3588 20.5762 12.5944 20.188 13.0657C19.7137 13.6416 19.0484 14.3833 18.2371 15.1157L9.57695 6.45563Z"></path>
<path fill="var(--setting-icon-color)" opacity="1.0" fill-rule="evenodd" clip-rule="evenodd" d="M15.9202 12.7988C15.9725 12.5407 16 12.2736 16 12C16 9.79086 14.2091 8 12 8C11.7264 8 11.4593 8.02746 11.2012 8.07977L15.9202 12.7988ZM8.66676 9.78799C8.24547 10.4216 8 11.1821 8 12C8 14.2091 9.79086 16 12 16C12.8179 16 13.5784 15.7545 14.212 15.3332L8.66676 9.78799Z"></path>
<path stroke="var(--setting-icon-color)" opacity="1.0" stroke-width="1.2" d="M8 5L20 17"></path>
</svg>
</div>
<div class="text">go blind</div>
</div>
<div id="goBlindConfig" class="s2 configButtonContainer">
<button class="off" tabindex="0" role="button" type="button" value="off" id="selected">off</button>
<button class="on" tabindex="0" role="button" type="button" value="on">on</button>
</div>
</div>
<div class="row quickend">
<div class="label">
<div class="symbol">
<svg class="iconQuickEnd" width="256px" height="256px" viewBox="0 0 24 24">
<path fill="var(--setting-icon-color)" d="M3 1.773l15 10.23L3 22.226zM20 22h1V2h-1z"></path>
<path fill="none" d="M0 0h24v24H0z"></path>
</svg>
</div>
<div class="text">quick end</div>
</div>
<div id="quickEndConfig" class="s2 configButtonContainer">
<button class="off" value="off" tabindex="0" role="button" type="button">off</button>
<button class="on" value="on" tabindex="0" role="button" type="button" id="selected">on</button>
</div>
</div>
<div class="row tape">
<div class="label">
<div class="symbol"><svg class="iconTapeMode" fill="var(--setting-icon-color)" width="256px" height="256px" viewBox="0 -64 640 640"><path d="M224 192c-35.3 0-64 28.7-64 64s28.7 64 64 64 64-28.7 64-64-28.7-64-64-64zm400 224H380.6c41.5-40.7 67.4-97.3 67.4-160 0-123.7-100.3-224-224-224S0 132.3 0 256s100.3 224 224 224h400c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm-400-64c-53 0-96-43-96-96s43-96 96-96 96 43 96 96-43 96-96 96z"></path></svg></div>
<div class="text">tape mode</div>
</div>
<div id="tapeModeConfig" class="s3 configButtonContainer">
<button class="off" value="off" tabindex="0" role="button" type="button" id="selected">off</button>
<button class="letter" value="letter" tabindex="0" role="button" type="button">letter</button>
<button class="word" value="word" tabindex="0" role="button" type="button">word</button>
</div>
</div>
<div class="row oppositeshift">
<div class="label">
<div class="symbol">
<svg class="iconOppositeShiftMode" width="256px" height="256px" viewBox="0 0 24 24">
<path fill="var(--setting-icon-color)" opacity="0.5" d="M15.2929 10.2929C14.9024 10.6834 14.9024 11.3166 15.2929 11.7071C15.6834 12.0976 16.3166 12.0976 16.7071 11.7071L20.7071 7.70711C20.8306 7.58361 20.9151 7.43586 20.9604 7.27919C20.9779 7.2191 20.9895 7.1577 20.9954 7.09585C20.9976 7.07319 20.999 7.05048 20.9996 7.02774C21.0002 7.00709 21.0001 6.98642 20.9994 6.96578C20.9905 6.6971 20.8755 6.45528 20.695 6.28079L16.7071 2.29289C16.3166 1.90237 15.6834 1.90237 15.2929 2.29289C14.9024 2.68342 14.9024 3.31658 15.2929 3.70711L17.5856 5.99981L3.99999 5.99999C3.4477 5.99999 2.99999 6.44772 3 7C3.00001 7.55228 3.44773 7.99999 4.00001 7.99999L17.586 7.99981L15.2929 10.2929Z"></path>
<path fill="var(--setting-icon-color)" opacity="1.0" d="M20 16L6.41423 16L8.70712 13.7071C9.09764 13.3166 9.09764 12.6834 8.70712 12.2929C8.3166 11.9024 7.68343 11.9024 7.29291 12.2929L3.29291 16.2929C2.90238 16.6834 2.90238 17.3166 3.29291 17.7071L7.29291 21.7071C7.68343 22.0976 8.3166 22.0976 8.70712 21.7071C9.09764 21.3166 9.09764 20.6834 8.70712 20.2929L6.41423 18L20 18C20.5523 18 21 17.5523 21 17C21 16.4477 20.5523 16 20 16Z"></path>
</svg>
</div>
<div class="text">opposite shift</div>
</div>
<div id="useOppositeShiftConfig" class="s2 configButtonContainer">
<button class="off" value="off" tabindex="0" role="button" type="button" id="selected">off</button>
<button class="on" value="on" tabindex="0" role="button" type="button">on</button>
</div>
</div>
</div>
<div class="column c2">
<div class="row texthighlight">
<div class="label">
<div class="symbol">
<svg class="iconHighlightMode" height="256px" width="256px" viewBox="0 0 512 512" fill="none">
<circle fill="var(--setting-icon-color)" opacity="0.0" cx="256" cy="256" r="256"></circle>
<path fill="var(--setting-icon-color)" opacity="0.0" d="M509.166,217.838L407.174,115.846L94.61,402.208l103.127,103.128 C216.454,509.692,235.956,512,256,512c141.384,0,256-114.616,256-256C512,243.031,511.026,230.29,509.166,217.838z"></path>
<path fill="var(--setting-icon-color)" opacity="0.2" d="M430.916,139.588l-40.415-40.415c-7.385-7.385-19.199-7.877-27.172-1.131L161.156,269.114 l-16.637,83.184l-15.629,15.629l-34.282,34.282l49.911,16.637l17.646-17.646l15.629-15.629l83.184-16.637L432.045,166.76 C438.793,158.787,438.301,146.973,430.916,139.588z"></path>
<path fill="var(--setting-icon-color)" opacity="0.3" d="M430.916,139.588l-20.08-20.08L118.205,410.072l26.315,8.771l17.646-17.646l15.629-15.629 l83.184-16.637l171.068-202.173C438.793,158.787,438.301,146.973,430.916,139.588z"></path>
<path fill="var(--setting-icon-color)" opacity="0.4" d="M260.977,368.933l-99.821-99.821L363.329,98.044c7.973-6.747,19.787-6.256,27.172,1.131 l40.415,40.415c7.385,7.385,7.877,19.199,1.131,27.172L260.977,368.933z"></path>
<path fill="var(--setting-icon-color)" opacity="0.7" d="M430.916,139.588l-20.08-20.08L210.487,318.443l50.491,50.491l171.068-202.173 C438.793,158.787,438.301,146.973,430.916,139.588z"></path>
<polygon fill="var(--setting-icon-color)" opacity="0.4" points="94.61,402.208 144.52,418.844 161.156,402.208 127.883,368.933 "></polygon>
<polygon fill="var(--setting-icon-color)" opacity="0.7" points="118.205,410.072 144.52,418.844 161.156,402.208 143.703,384.755 "></polygon>
</svg>
</div>
<div class="text">highlight</div>
</div>
<div id="textHighlightConfig" class="s3 configButtonContainer">
<button class="off" value="off" tabindex="0" role="button" type="button">off</button>
<button class="letter" value="letter" tabindex="0" role="button" type="button" id="selected">letter</button>
<button class="word" value="word" tabindex="0" role="button" type="button">word</button>
</div>
</div>
<div class="row fliptexthighlight">
<div class="label">
<div class="symbol">
<svg class="iconFlipHighlightModeColor" fill="var(--setting-icon-color)" stroke="var(--setting-icon-color)" stroke-width="30" height="256px" width="256px" viewBox="-92.22 -92.22 696.80 696.80">
<path opacity="0.4" d="M10.996,154.645h120.427c55.147,0,82.453,67.2,82.667,67.947c2.24,5.44,8.427,8.107,13.867,5.867 c5.333-2.24,8-8.213,5.973-13.653c-1.28-3.307-32.747-81.387-102.507-81.387H10.676c-6.4-0.107-11.52,5.547-10.56,12.16 C0.863,150.911,5.663,154.645,10.996,154.645z"></path>
<path opacity="1.0" d="M385.183,154.645h90.453l-35.093,35.093c-4.8,4.693-4.267,12.693,1.6,16.64c3.733,2.453,8.64,2.24,12.16-0.427 c0.427-0.32,0.853-0.747,1.28-1.173l53.333-53.333c4.16-4.16,4.16-10.88,0-15.04l-53.333-53.333 c-4.267-4.053-10.987-3.947-15.04,0.213c-3.947,4.16-3.947,10.667,0,14.827l35.093,35.093h-90.453 c-58.56,0-97.813,59.413-135.68,116.8c-36.48,55.253-70.827,107.307-117.973,107.307H10.996c-5.333,0-10.133,3.84-10.88,9.067 c-0.96,6.613,4.16,12.267,10.56,12.267H131.53c58.56,0,97.813-59.413,135.68-116.8 C303.69,206.698,338.036,154.645,385.183,154.645z"></path>
<path opacity="0.4" d="M509.236,360.405l-53.547-53.44c-4.267-4.053-10.987-3.947-15.147,0.213c-4.053,4.16-4.053,10.667,0,14.827l35.2,35.2 h-91.733c-57.493,0-97.6-58.773-98.027-59.413c-3.52-4.693-10.24-5.76-14.933-2.24c-4.373,3.307-5.653,9.28-2.773,13.973 c1.813,2.987,46.613,69.12,115.733,69.12h91.84l-35.2,35.2c-4.267,4.053-4.373,10.88-0.213,15.147 c4.053,4.267,10.88,4.373,15.147,0.213c0.107-0.107,0.213-0.213,0.213-0.213l53.44-53.44 C513.396,371.391,513.396,364.565,509.236,360.405z"></path>
</svg>
</div>
<div class="text">flip highlight</div>
</div>
<div id="flipTextHighlightConfig" class="s2 configButtonContainer">
<button class="off" value="off" tabindex="0" role="button" type="button" id="selected">off</button>
<button class="on" value="on" tabindex="0" role="button" type="button">on</button>
</div>
</div>
<div class="row caretcolor">
<div class="label">
<div class="symbol">
<svg class="iconCaret" width="256px" height="256px" viewBox="0 0 24 24" fill="none">
<path stroke="var(--setting-icon-color)" stroke-width="2" opacity="1" d="M9 4L10 4C11.1046 4 12 4.89543 12 6L12 18C12 19.1046 11.1046 20 10 20L9 20" stroke-linecap="round" stroke-linejoin="round"></path>
<path stroke="var(--setting-icon-color)" stroke-width="2" opacity="1" d="M15 4L14 4C12.8954 4 12 4.89543 12 6L12 18C12 19.1046 12.8954 20 14 20L15 20" stroke-linecap="round" stroke-linejoin="round"></path>
<path stroke="var(--setting-icon-color)" stroke-width="2" opacity="1" d="M10 12H14" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<div class="text">caret color</div>
</div>
<div id="caretColorConfig" class="s1 configButtonContainer colorPickerContainer">
<input class="colorSelectorInput caretColorSelectorInput" type="color" value="#000000">
<input class="colorTextInput caretColorTextInput" type="text" placeholder="#000000">
</div>
</div>
<div class="row textcolor">
<div class="label">
<div class="symbol">
<svg class="iconFillColor" fill="var(--setting-icon-color)" height="64px" width="64px" viewBox="0 0 32 32">
<path opacity="0.6" d="M29,27H3c-0.6,0-1,0.4-1,1s0.4,1,1,1h26c0.6,0,1-0.4,1-1S29.6,27,29,27z"></path>
<path opacity="0.8" d="M6.4,16.7C6.4,16.7,6.4,16.7,6.4,16.7l7,7c0.2,0.2,0.4,0.3,0.7,0.3s0.5-0.1,0.7-0.3l6.9-6.9c0,0,0,0,0,0l1.5-1.5 c0.4-0.4,0.4-1,0-1.4l-8.9-9c0,0,0,0,0,0l-2.5-2.5c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l1.8,1.8l-7.7,7.7c-0.4,0.4-0.4,1,0,1.4 L6.4,16.7z M13.6,7L14,7.5c0,0,0,0,0,0l7,7L20.6,15H7.5l-1-1L13.6,7z"> </path>
<path opacity="1.0" d="M25,24c1.7,0,3-1.3,3-3c0-1.4-1.8-3.2-2.3-3.7c-0.4-0.4-1-0.4-1.4,0C23.8,17.8,22,19.6,22,21C22,22.7,23.3,24,25,24z"></path>
</svg>
</div>
<div class="text">text color</div>
</div>
<div id="textColorConfig" class="s1 configButtonContainer">
<div class="colorPickerContainer primaryTextColorInputContainer s1">
<input class="colorSelectorInput primaryTextColorSelectorInput" type="color" value="#001e2e">
<input class="colorTextInput primaryTextColorTextInput" type="text" placeholder="primary color">
</div>
<div class="colorPickerContainer secondaryTextColorInputContainer s1">
<input class="colorSelectorInput secondaryTextColorSelectorInput" type="color" value="#9a9a9a">
<input class="colorTextInput secondaryTextColorTextInput" type="text" placeholder="secondary color">
</div>
</div>
</div>
<div class="row textunderline">
<div class="label">
<div class="symbol">
<svg class="iconTextUnderline" width="256px" height="256px" viewBox="-2 0 20 20">
<g transform="translate(-4 -2)">
<line fill="none" stroke="var(--setting-icon-color)" opacity="1.0" x1="14" transform="translate(5 21)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
<path fill="none" stroke="var(--setting-icon-color)" opacity="0.4" d="M7,3v9a5,5,0,0,0,5,5h0a5,5,0,0,0,5-5V3" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"></path>
</svg>
</div>
<div class="text">text underline</div>
</div>
<div id="textUnderlineConfig" class="s2 configButtonContainer">
<button class="off" tabindex="0" role="button" type="button" value="off">off</button>
<button class="on" tabindex="0" role="button" type="button" value="on" id="selected">on</button>
</div>
</div>
<div class="row textwhitespace">
<div class="label">
<div class="symbol"><svg class="iconTextWhitespace" stroke="var(--setting-icon-color)" stroke-width="2" width="64px" height="64px" viewBox="-2.4 -2.4 28.80 28.80"> <path d="M21 21V3M3 21V3M6.5 12H17.5M17.5 15L17.5 9M6.5 15L6.5 9"></path></svg></div>
<div class="text">text whitespace</div>
</div>
<div id="textWhitespaceConfig" class="s4 configButtonContainer">
<button class="off" value="off" tabindex="0" role="button" type="button" data-code="-1" data-character="">off</button>
<button class="space" value="space" tabindex="0" role="button" type="button" data-code="160" data-character=" " id="selected">space</button>
<button class="bullet" value="bullet" tabindex="0" role="button" type="button" data-code="8226" data-character="•">bullet</button>
<button class="bar" value="bar" tabindex="0" role="button" type="button" data-code="9251" data-character="␣">bar</button>
</div>
</div>
<div class="row textfontfamily">
<div class="label">
<div class="symbol">
<svg class="iconTextFontFamily" width="256px" height="256px" viewBox="-0.16 0 20.32 20.32" fill="var(--setting-icon-color)">
<g transform="translate(-2 -2)">
<path d="M4,21,12,3l8,18" fill="none" stroke="var(--setting-icon-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.7"></path>
<path d="M20,21,12,3,4,21" fill="none" stroke="var(--setting-icon-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.7"></path>
<line d="" fill="none" stroke="var(--setting-icon-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.7" x2="7.5" y2="16.87" transform="translate(11.5 4.13)"></line>
<path d="M7,15H17M6,21H3m14,0h4" fill="none" stroke="var(--setting-icon-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.7"></path>
</svg>
</div>
<div class="text">text font family</div>
</div>
<div id="textFontFamilyConfig" class="s1 configButtonContainer config buttonContainer details textFontFamilyListContainer">
<details class="textFontFamilyList">
<summary>
<div class="text value in-use">roboto mono</div>
<div class="symbol"><svg class="iconDropDownArrow" width="16" height="16" viewBox="0 0 16 16"><path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path></svg></div>
</summary>
<div class="list">
<div class="item fontFamilyOfText FiraCode" data-value="Fira Code">
<div class="text value">Fira Code</div>
<div class="symbol unmarked"><svg class="tick" height="16" viewBox="0 0 16 16" width="16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path></svg></div>
</div>
<div class="item fontFamilyOfText SourceCodePro" data-value="Source Code Pro">
<div class="text value">Source Code Pro</div>
<div class="symbol unmarked"><svg class="tick" height="16" viewBox="0 0 16 16" width="16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path></svg></div>
</div>
<div class="item fontFamilyOfText RobotoMono" data-value="Roboto Mono">
<div class="text value">Roboto Mono</div>
<div class="symbol"><svg class="tick marked" height="16" viewBox="0 0 16 16" width="16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path></svg></div>
</div>
<div class="item fontFamilyOfText SyneMono" data-value="Syne Mono">
<div class="text value">Syne Mono</div>
<div class="symbol unmarked"><svg class="tick" height="16" viewBox="0 0 16 16" width="16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path></svg></div>
</div>
</div>
</details>
</div>
</div>
<div class="row textfontsize">
<div class="label">
<div class="symbol"> <svg class="iconTextFontSize" width="64px" height="64px" viewBox="-180 -180 1560.00 1560.00" fill="var(--setting-icon-color)"> <path d="M991.699,0L783.398,209.399h139.452V990.6H783.398L991.699,1200 L1200,990.601h-139.38V209.399H1200L991.699,0z M5.933,207.642L0,420.703h74.048c0-146.136,0.1-145.972,186.841-145.972V862.5 c0,73.264-0.037,73.141-102.539,71.338v58.521h379.468v-58.521c-102.335,0-102.539-0.179-102.539-71.338V274.731 c186.839,0,187.354,0.041,187.354,145.972h73.535l-5.347-213.062L5.933,207.642L5.933,207.642z"></path></svg></div>
<div class="text">text size</div>
</div>
<div id="textFontSizeConfig" class="s1 configButtonContainer">
<div class="textFontSizeInputContainer"><input class="textFontSizeInput" type="range" min="16" max="48" step="1" value="18"></div>
<div class="text value">18</div>
</div>
</div>
<div class="row textfontweight">
<div class="label">
<div class="symbol"><svg class="iconTextFontWeight" fill="var(--setting-icon-color)" width="64px" height="64px" viewBox="0 0 24.00 24.00" stroke="var(--setting-icon-color)" stroke-width="0.96"> <path d="M16,5V4H13v9h1a1,1,0,0,1,0,2H10a1,1,0,0,1,0-2h1V4H8V5A1,1,0,0,1,6,5V3A1,1,0,0,1,7,2H17a1,1,0,0,1,1,1V5a1,1,0,0,1-2,0Zm3.707,9.293a1,1,0,0,0-1.414,1.414L19.586,17H4.414l1.293-1.293a1,1,0,0,0-1.414-1.414l-3,3a1,1,0,0,0,0,1.414l3,3a1,1,0,1,0,1.414-1.414L4.414,19H19.586l-1.293,1.293a1,1,0,1,0,1.414,1.414l3-3a1,1,0,0,0,0-1.414Z"></path></svg></div>
<div class="text">text thickness</div>
</div>
<div id="textFontWeightConfig" class="s1 configButtonContainer config buttonContainer textFontWeightContainer range s1">
<div class="textFontWeightInputContainer"><input class="textFontWeightInput" type="range" min="100" max="900" step="1" value="400"></div>
<div class="text value">400</div>
</div>
</div>
<div class="row textwordcount">
<div class="label">
<div class="symbol">
<svg class="iconNumberCount" width="64px" height="64px" viewBox="-3 -3 26.00 26.00">
<rect fill="var(--setting-icon-color)" opacity="0.1" stroke-width="0" width="26.00" height="26.00" x="-3" y="-3" rx="13"></rect>
<line stroke="var(--setting-icon-color)" opacity="1.0" stroke-width="2" stroke-linecap="round" x1="4" y1="7.25" x2="16" y2="7.25"></line>
<line stroke="var(--setting-icon-color)" opacity="1.0" stroke-width="2" stroke-linecap="round" x1="4" y1="12.75" x2="16" y2="12.75"></line>
<path stroke="var(--setting-icon-color)" opacity="1.0" stroke-width="2" stroke-linecap="round" d="M7.75 4L6.75 16"> </path>
<path stroke="var(--setting-icon-color)" opacity="1.0" stroke-width="2" stroke-linecap="round" d="M13.25 4L12.25 16"> </path>
</svg>
</div>
<div class="text">text word count</div>
</div>
<div id="textWordsCountConfig" class="s5-2 s7 configButtonContainer">
<div class="textWordCountButton s5">
<button class="off" value="off" tabindex="0" role="button" type="button">off</button>
<button class="words10" value="10" tabindex="0" role="button" type="button">10</button>
<button class="words25" value="25" tabindex="0" role="button" type="button" id="selected">25</button>
<button class="words50" value="50" tabindex="0" role="button" type="button">50</button>
<button class="words100" value="100" tabindex="0" role="button" type="button">100</button>
</div>
<div class="customInputContainer textWordsCountCustomInputContainer s2">
<div class="inputContainer custom s1">
<input class="inputBox textWordsCount" type="number" min="0" tabindex="0" placeholder="60">
<div class="symbol"><svg class="iconEditPen" width="256px" height="256px" viewBox="0 0 32.00 32.00"><path d="M0 32l7.808-2.176 18.304-18.272-5.728-5.6-18.24 18.24zM22.112 4.256l5.728 5.568 2.976-2.976q1.184-1.184 1.184-2.848t-1.184-2.816-2.816-1.184-2.816 1.184z"></path></svg></div>
</div>
<button class="textWordsCountCustomInputButton s1" value="custom" tabindex="0" role="button" type="button">custom</button>
</div>
</div>
</div>
<div class="row timerseconds">
<div class="label">
<div class="symbol">
<svg class="iconTestTimer" height="256px" width="256px" viewBox="0 0 512 512">
<path fill="var(--setting-icon-color)" opacity="0.7" d="M469.337,154.624c6.818,0,13.636-2.594,18.833-7.791c10.385-10.377,10.385-27.281,0-37.666l-34.133-34.133 c-10.385-10.377-27.29-10.377-37.666,0c-8.269,8.269-9.847,20.608-4.958,30.558l-13.85,13.85 c-30.148-25.037-66.995-42.274-107.426-48.538V51.2H306.7c9.685,0,17.57-7.876,17.57-17.562V17.57 C324.27,7.885,316.385,0,306.7,0H205.298c-9.685,0-17.562,7.885-17.562,17.57v16.068c0,9.685,7.876,17.562,17.562,17.562h16.572 v19.703c-40.431,6.263-77.286,23.501-107.426,48.538l-13.858-13.85c4.89-9.95,3.311-22.289-4.949-30.558 c-10.385-10.377-27.29-10.377-37.666,0l-34.133,34.133c-10.394,10.385-10.394,27.29,0,37.666 c5.188,5.197,12.006,7.791,18.833,7.791c6.025,0,11.981-2.15,16.888-6.195l14.694,14.694 c-25.242,36.011-40.115,79.795-40.115,127.01C34.137,412.476,133.661,512,256.003,512c122.334,0,221.867-99.524,221.867-221.867 c0-47.215-14.874-90.999-40.124-127.01l14.703-14.694C457.347,152.474,463.303,154.624,469.337,154.624z M238.937,51.2h34.133 v17.758c-0.324-0.026-0.623-0.017-0.939-0.034c-5.333-0.393-10.701-0.657-16.128-0.657c-5.436,0-10.795,0.265-16.128,0.657 c-0.324,0.017-0.623,0.009-0.939,0.034V51.2z M71.803,136.533l17.801-17.801l12.058,12.066 c-6.059,5.862-11.767,12.049-17.092,18.509L71.803,136.533z M443.737,290.133c0,51.592-20.924,98.372-54.716,132.343 c-0.119,0.119-0.154,0.282-0.273,0.41c-0.119,0.119-0.282,0.154-0.41,0.265c-33.963,33.801-80.751,54.716-132.335,54.716 c-51.593,0-98.372-20.915-132.344-54.716c-0.119-0.111-0.282-0.145-0.41-0.265c-0.119-0.128-0.154-0.29-0.265-0.41 C89.185,388.506,68.27,341.726,68.27,290.133c0-51.584,20.915-98.372,54.716-132.335c0.111-0.128,0.145-0.29,0.265-0.41 c0.128-0.119,0.29-0.154,0.41-0.265c33.971-33.801,80.751-54.724,132.344-54.724c51.584,0,98.372,20.924,132.335,54.724 c0.128,0.111,0.29,0.145,0.41,0.265c0.12,0.119,0.154,0.282,0.273,0.41C422.813,191.761,443.737,238.549,443.737,290.133z M427.429,149.308c-5.325-6.46-11.034-12.646-17.084-18.509l12.058-12.066l17.8,17.801L427.429,149.308z"></path>
<path fill="var(--setting-icon-color)" opacity="0.9" d="M401.066,281.604h25.165c-2.022-40.61-18.227-77.457-43.861-105.771l-17.758,17.758c-1.664,1.664-3.849,2.5-6.033,2.5 c-2.185,0-4.369-0.836-6.033-2.5c-3.337-3.336-3.337-8.73,0-12.066l17.758-17.758c-28.314-25.634-65.161-41.839-105.771-43.861 v25.165c0,4.71-3.823,8.533-8.533,8.533s-8.533-3.823-8.533-8.533v-25.165c-40.61,2.022-77.457,18.227-105.771,43.861 l17.758,17.758c3.337,3.337,3.337,8.73,0,12.066c-1.664,1.664-3.849,2.5-6.033,2.5c-2.185,0-4.369-0.836-6.033-2.5 l-17.758-17.758c-25.634,28.314-41.839,65.161-43.861,105.771h25.165c4.71,0,8.533,3.823,8.533,8.533 c0,4.71-3.823,8.533-8.533,8.533H85.768c2.022,40.61,18.227,77.457,43.861,105.771l17.758-17.758 c3.337-3.336,8.73-3.336,12.066,0c3.337,3.337,3.337,8.73,0,12.066l-17.758,17.758c28.314,25.626,65.161,41.839,105.771,43.861 v-25.165c0-4.71,3.823-8.533,8.533-8.533s8.533,3.823,8.533,8.533v25.165c40.61-2.022,77.457-18.236,105.771-43.861 l-17.758-17.758c-3.337-3.337-3.337-8.73,0-12.066c3.337-3.336,8.73-3.336,12.066,0l17.758,17.758 c25.634-28.314,41.839-65.161,43.861-105.771h-25.165c-4.71,0-8.533-3.823-8.533-8.533 C392.533,285.427,396.356,281.604,401.066,281.604z M256,324.066c-18.765,0-34.031-15.266-34.031-34.031 c0-15.804,10.871-29.005,25.498-32.819v-78.012c0-4.71,3.823-8.533,8.533-8.533s8.533,3.823,8.533,8.533v78.012 c14.626,3.814,25.498,17.015,25.498,32.819C290.031,308.8,274.765,324.066,256,324.066z"></path>
<path fill="var(--setting-icon-color)" opacity="1.0" d="M256,273.07c-9.353,0-16.964,7.612-16.964,16.964s7.612,16.964,16.964,16.964s16.964-7.612,16.964-16.964 S265.352,273.07,256,273.07z"></path>
</svg>
</div>
<div class="text">timer seconds count</div>
</div>
<div id="timerSecondsCountConfig" class="s5-2 s7 configButtonContainer">
<div class="timerTimeButton s5">
<button class="off" value="off" tabindex="0" role="button" type="button" id="selected">off</button>
<button class="seconds15" value="15" tabindex="0" role="button" type="button">15</button>
<button class="seconds30" value="30" tabindex="0" role="button" type="button">30</button>
<button class="seconds60" value="60" tabindex="0" role="button" type="button">60</button>
<button class="seconds120" value="120" tabindex="0" role="button" type="button">120</button>
</div>
<div class="customInputContainer timerTimeCustomInputContainer s2">
<div class="inputContainer custom s1">
<input class="inputBox timerTime" type="number" min="0" tabindex="0" placeholder="60">
<div class="symbol"><svg class="iconEditPen" width="256px" height="256px" viewBox="0 0 32.00 32.00"><path d="M0 32l7.808-2.176 18.304-18.272-5.728-5.6-18.24 18.24zM22.112 4.256l5.728 5.568 2.976-2.976q1.184-1.184 1.184-2.848t-1.184-2.816-2.816-1.184-2.816 1.184z"></path></svg></div>
</div>
<button class="timerTimeCustomInputButton s1" value="custom" tabindex="0" role="button" type="button">custom</button>
</div>
</div>
</div>
<div class="row includespecials">
<div class="label">
<div class="symbol"> <svg class="iconTextInclude" stroke="var(--setting-icon-color)" stroke-width="0.65" width="256px" height="256px" viewBox="0 0 20 20" fill="none"> <path fill="var(--setting-icon-color)" fill-rule="evenodd" d="M9 17a1 1 0 102 0v-6h6a1 1 0 100-2h-6V3a1 1 0 10-2 0v6H3a1 1 0 000 2h6v6z"></path></svg></div>
<div class="text">include in text</div>
</div>
<div id="includeSpecialsInTextConfig" class="s2 configButtonContainer">
<div class="includeSpecialsInTextCheckboxButton includeDigitInText">
<input id="includeDigit" data-value="digit" tabindex="0" type="checkbox" name="textIncludeCheckboxButton">
<label for="includeDigit">digit</label>
</div>
<div class="includeSpecialsInTextCheckboxButton includePunctuationInText">
<input id="includePunctuation" data-value="punctuation" tabindex="0" type="checkbox" name="textIncludeCheckboxButton">
<label for="includePunctuation">punctuation</label>
</div>
</div>
</div>
</div>
</div>
<script type="importmap"></script>
<script type="module" src="./src/main.js"></script>
<script type="module" src="./src/controllers/SettingController.js"></script>
</body>
</html>