-
Notifications
You must be signed in to change notification settings - Fork 0
/
json-editor.html
945 lines (833 loc) · 51.5 KB
/
json-editor.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
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
<!-- <link rel="stylesheet" type="text/css"
href="https://mdbootstrap.com/api/snippets/static/download/MDB5-Pro-Advanced_3.10.1/css/mdb.min.css">
<link rel="stylesheet" type="text/css"
href="https://mdbootstrap.com/api/snippets/static/download/MDB5-Pro-Advanced_3.10.1/plugins/css/all.min.css"> -->
<link rel="stylesheet" type="text/css"
href="https://mdbootstrap.com/api/snippets/static/download/MDB5-Pro-Advanced_6.2.0/css/mdb.min.css">
<link rel="stylesheet" type="text/css"
href="https://mdbootstrap.com/api/snippets/static/download/MDB5-Pro-Advanced_6.2.0/plugins/css/all.min.css">
<link rel="stylesheet" href="./css/style.css">
<style>
/**
* Styles for the example page
*/
.ce-example {
font-size: 16.2px;
}
.ce-example__footer {
border-top: 1px solid var(--main-text-color);
height: 50px;
line-height: 50px;
}
.ce-example__footer a {
color: inherit;
text-decoration: none;
}
.ce-example__footer-logo {
font-weight: bold;
}
.ce-example__footer-menu {
margin-left: auto;
}
@media all and (max-width: 730px) {
.ce-example__footer-menu {
margin-left: 0;
margin-top: 10px;
flex-basis: 100%;
font-size: 14px;
}
}
.ce-example__footer-menu a {
margin-left: 20px;
}
@media all and (max-width: 730px) {
.ce-example__footer-menu a {
margin-left: 0;
margin-right: 15px;
}
}
.ce-example__content {
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ce-example__content--small {
border-left: 1px solid #eee;
border-right: 1px solid #eee;
padding: 0 15px;
}
.ce-example__output {
background: #1a202c;
overflow-x: auto;
padding: 0 30px;
}
.ce-example__output-content {
margin: 30px auto;
color: #ABADC3;
font-size: 13.3px;
}
.ce-example__output-content:empty {
display: none;
}
.ce-example__button {
display: block;
margin: 50px auto;
max-width: 180px;
background: #4A9DF8;
padding: 17px 30px;
box-shadow: 0 6px 4px -4px rgba(137, 207, 255, 0.77);
cursor: pointer;
border-radius: 31px;
color: #fff;
text-align: center;
}
.ce-example__button:hover {
background: #3D8DE5;
}
.ce-example__output-footer {
padding: 30px 0;
font-size: 14px;
letter-spacing: 1px;
text-align: center;
}
.ce-example__output-footer a {
color: var(--main-text-color);
text-decoration: none;
}
@media all and (max-width: 730px) {
.ce-example__footer,
.ce-example__content {
padding: 0 20px;
}
}
/**
* JSON highlighter
*/
.sc_attr {
color: rgb(148, 162, 192);
}
.sc_key {
color: rgb(190, 213, 255);
}
.sc_toolname {
color: rgb(15, 205, 251);
}
.sc_tag {
color: rgb(4, 131, 216);
}
.sc_bool {
color: rgb(247, 60, 173);
}
.ce-example .ce-block:first-of-type h2.ce-header {
font-size: 50px;
}
.ce-example h2.ce-header {
font-size: 30px;
}
.ce-example h3.ce-header {
font-size: 24px;
}
.ce-example h4.ce-header {
font-size: 18px;
}
.ce-example__header-menu {
margin-left: auto;
}
.ce-block--selected .ce-block__content {
background: var(--main-indigo-opacity);
}
.ce-popover {
background-color: var(--main-bg-color);
border: var(--main-bg-color);
}
.ce-popover__item-icon {
background-color: var(--secondary-bg-color);
}
.ce-popover__item--active {
color: var(--main-indigo-color);
}
.cdx-search-field {
background: var(--secondary-bg-color);
border: var(--secondary-bg-color);
}
.ce-toolbar__plus, .ce-toolbar__settings-btn {
color: var(--main-text-color);
}
.ce-toolbar__settings-btn:hover, .ce-toolbar__plus:hover {
background-color: var(--main-indigo-color);
color: #fff;
}
.ce-popover__item:hover:not(.ce-popover__item--no-visible-hover) {
background-color: var(--secondary-bg-color);
}
</style>
</head>
<body>
<!-- Sidenav-->
<nav class="sidenav shadow-0 h-100 fixed-top"
data-mdb-close-on-esc="false"
data-mdb-content="#slim-content"
data-mdb-expand-on-hover="true"
data-mdb-focus-trap="false"
data-mdb-hidden="false"
data-mdb-mode="side"
data-mdb-slim="true"
data-mdb-slim-collapsed="true"
id="sidenav-4">
<div class="pe-2">
<!-- Big sidebar elements -->
<div class="mt-3 mb-3 d-flex flex-column justify-content-center align-items-center">
<a class="button mb-1"
data-mdb-toggle="tooltip"
data-mdb-trigger="hover"
title="Change Theme">
<!-- Avocado SVG -->
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.9482 27.1192C29.4906 31.6107 28.9821 36.6955 25.7617 38.5598C22.5414 40.4242 17.7957 38.3056 15.2533 33.8988C12.7109 29.4073 13.2194 24.3225 16.4398 22.4582C19.6601 20.509 24.4058 22.6276 26.9482 27.1192Z" fill="#F1F4FA"/>
<path d="M45.3379 13.9831C46.2701 19.1526 49.5752 25.8475 49.5752 32.6271C49.5752 41.9492 41.9481 49.5763 32.626 49.5763C30.8464 49.5763 29.1514 49.3221 27.5413 48.8136C28.643 48.4746 29.7447 47.9662 30.7617 47.3729C38.8973 42.7119 41.6092 32.2882 36.9481 24.2373C33.5583 18.3899 27.3718 14.2373 23.982 10.1696C23.2193 9.32213 22.4566 8.4746 21.6938 7.79671C23.982 2.79668 27.7108 0.423828 32.5413 0.423828C39.1515 0.423828 43.6431 4.66115 45.3379 13.9831Z" fill="var(--main-indigo-color)"/>
<path d="M25.7617 38.5587C28.9821 36.6943 29.5753 31.5247 26.9482 27.118C24.4059 22.6264 19.6601 20.5925 16.4398 22.457C13.2195 24.3215 12.6262 29.4909 15.2533 33.8977C17.7957 38.3044 22.4567 40.423 25.7617 38.5587ZM27.5414 48.8129C20.0838 51.2705 11.694 48.2197 7.6262 41.1857C4.23641 35.3383 3.72793 27.796 1.94827 22.8807C-1.2721 13.9824 0.507564 8.0502 6.18549 4.74512C11.1855 1.8638 16.355 2.62651 21.694 7.71125C22.4567 8.38925 23.2194 9.23667 23.9821 10.0841C27.3719 14.0672 33.5584 18.2197 36.9482 24.1518C41.6092 32.2874 38.8974 42.6264 30.7618 47.2874C29.7448 47.9654 28.6432 48.4739 27.5414 48.8129Z" fill="var(--main-indigo-color)"/>
<path d="M22.3718 50C16.3549 50 10.5074 46.8644 7.28714 41.3559C5.08372 37.5424 4.06677 33.0508 3.21935 29.0678C2.71087 26.8644 2.28711 24.7458 1.60921 23.0509C-1.52644 14.2373 -0.085734 7.96616 6.01596 4.40674C12.1176 0.932137 18.3041 2.7118 24.321 9.91525C25.5075 11.356 27.1176 12.7966 28.8126 14.322C31.7787 17.0339 35.1685 20.1694 37.3719 23.983C39.6601 27.9661 40.3381 32.7118 39.0669 37.2033C37.8804 41.6949 34.9991 45.4236 30.9313 47.7118C28.304 49.2373 25.338 50 22.3718 50ZM12.0328 3.47461C10.1685 3.47461 8.30399 3.98308 6.43962 5.08474C0.76169 8.38982 -0.594208 14.3221 2.37182 22.7118C2.96501 24.4915 3.47349 26.6101 3.98196 28.8135C4.82938 32.7118 5.84633 37.2033 7.96504 40.9322C12.5413 48.8135 22.6261 51.5254 30.5074 46.9492C34.321 44.7457 37.0329 41.1864 38.2193 36.9492C39.3209 32.7119 38.8124 28.2204 36.6091 24.4069C34.4905 20.678 31.1854 17.6272 28.2193 14.9154C26.5244 13.39 24.9142 11.8645 23.643 10.4238C19.8295 5.84745 15.9312 3.47461 12.0328 3.47461ZM33.4736 50C33.2193 50 33.0498 49.8305 33.0498 49.5762C33.0498 49.322 33.2193 49.1525 33.4736 49.1525C42.2872 48.7287 49.1516 41.4406 49.1516 32.6271C49.1516 28.3897 47.7957 24.0677 46.6092 20.2542C45.9312 18.0507 45.2533 15.9321 44.9142 14.0678C43.304 5.33898 39.1515 0.847523 32.626 0.847523C28.8125 0.847523 25.7616 2.37295 23.643 5.33908C23.4735 5.5086 23.2193 5.59332 23.0498 5.42379C22.8803 5.25427 22.7956 5.00003 22.9651 4.8306C25.2532 1.61023 28.5582 0 32.626 0C39.66 0 44.0667 4.66098 45.7617 13.8983C46.1006 15.7627 46.7786 17.7966 47.4566 20C48.6431 23.8983 49.999 28.2203 49.999 32.6272C49.999 41.8644 42.7108 49.4915 33.4736 50ZM23.1346 39.5763C22.1176 39.5763 21.1007 39.322 20.0837 38.8983C18.0498 37.966 16.1854 36.2712 14.9143 33.9831C12.2024 29.3221 12.8804 23.8983 16.2702 21.9492C19.7448 20 24.66 22.1187 27.3719 26.7797C30.0838 31.4407 29.4058 36.8645 26.016 38.8136C25.0837 39.322 24.1515 39.5763 23.1346 39.5763ZM19.0668 22.1186C18.2193 22.1186 17.3718 22.2882 16.6091 22.7118C13.5583 24.4915 13.1345 29.322 15.5922 33.5593C16.7786 35.6779 18.4735 37.2881 20.4227 38.1356C22.287 38.983 24.0667 38.983 25.5921 38.1356C28.643 36.3559 29.0667 31.5254 26.6091 27.2881C24.7447 24.0678 21.6938 22.1186 19.0668 22.1186ZM24.1515 29.661C23.982 29.661 23.8126 29.5763 23.8126 29.4068C22.2023 26.2712 19.0668 25.4237 18.982 25.4237C18.7278 25.339 18.6431 25.1695 18.6431 24.9152C18.7278 24.661 18.8973 24.5763 19.1516 24.5763C19.3211 24.5763 22.7109 25.5085 24.4906 29.0678C24.5753 29.2374 24.4906 29.4916 24.321 29.661C24.321 29.661 24.2362 29.661 24.1515 29.661Z" fill="var(--secondary-bg-color)"/>
</svg>
</a>
<h5 data-mdb-slim="false">Avo Cado</h5>
</div>
<div class="main-ul">
<ul class="sidenav-menu">
<!-- Index link -->
<li class="sidenav-item">
<a class="sidenav-link" href="index.html">
<div alt="Logo" class="me-3 pb-1">
<svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24"
xmlns="http://www.w3.org/2000/svg">
<path d="M4.54 2H7.92C9.33 2 10.46 3.15 10.46 4.561V7.97C10.46 9.39 9.33 10.53 7.92 10.53H4.54C3.14 10.53 2 9.39 2 7.97V4.561C2 3.15 3.14 2 4.54 2ZM4.54 13.4697H7.92C9.33 13.4697 10.46 14.6107 10.46 16.0307V19.4397C10.46 20.8497 9.33 21.9997 7.92 21.9997H4.54C3.14 21.9997 2 20.8497 2 19.4397V16.0307C2 14.6107 3.14 13.4697 4.54 13.4697ZM19.4601 2H16.0801C14.6701 2 13.5401 3.15 13.5401 4.561V7.97C13.5401 9.39 14.6701 10.53 16.0801 10.53H19.4601C20.8601 10.53 22.0001 9.39 22.0001 7.97V4.561C22.0001 3.15 20.8601 2 19.4601 2ZM16.0801 13.4697H19.4601C20.8601 13.4697 22.0001 14.6107 22.0001 16.0307V19.4397C22.0001 20.8497 20.8601 21.9997 19.4601 21.9997H16.0801C14.6701 21.9997 13.5401 20.8497 13.5401 19.4397V16.0307C13.5401 14.6107 14.6701 13.4697 16.0801 13.4697Z"
fill-rule="evenodd"/>
</svg>
</div>
<span data-mdb-slim="false">Dashboard</span>
</a>
</li>
<!-- Analytics link -->
<li class="sidenav-item">
<a class="sidenav-link" href="analytics.html">
<div alt="Logo" class="me-3 pb-1">
<svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24"
xmlns="http://www.w3.org/2000/svg">
<path d="M7.33 2H16.669C20.07 2 21.99 3.929 22 7.33V16.67C22 20.07 20.07 22 16.669 22H7.33C3.929 22 2 20.07 2 16.67V7.33C2 3.929 3.929 2 7.33 2ZM12.049 17.86C12.48 17.86 12.839 17.54 12.879 17.11V6.92C12.919 6.61 12.77 6.299 12.5 6.13C12.219 5.96 11.879 5.96 11.61 6.13C11.339 6.299 11.19 6.61 11.219 6.92V17.11C11.27 17.54 11.629 17.86 12.049 17.86ZM16.65 17.86C17.07 17.86 17.429 17.54 17.48 17.11V13.83C17.509 13.509 17.36 13.21 17.089 13.04C16.82 12.87 16.48 12.87 16.2 13.04C15.929 13.21 15.78 13.509 15.82 13.83V17.11C15.86 17.54 16.219 17.86 16.65 17.86ZM8.219 17.11C8.179 17.54 7.82 17.86 7.389 17.86C6.959 17.86 6.599 17.54 6.56 17.11V10.2C6.53 9.889 6.679 9.58 6.95 9.41C7.219 9.24 7.56 9.24 7.83 9.41C8.099 9.58 8.25 9.889 8.219 10.2V17.11Z"
fill-rule="evenodd"/>
</svg>
</div>
<span data-mdb-slim="false">Analytics</span>
</a>
</li>
<!-- Team link -->
<li class="sidenav-item">
<a class="sidenav-link" href="team-list.html">
<div alt="Logo" class="me-3 pb-1">
<svg fill="currentColor" height="18" viewBox="0 0 22 18" width="22"
xmlns="http://www.w3.org/2000/svg">
<path d="M7.25434 8.42861C9.51873 8.42861 11.3544 6.59295 11.3544 4.32856C11.3544 2.06417 9.51873 0.228516 7.25434 0.228516C4.98995 0.228516 3.1543 2.06417 3.1543 4.32856C3.1543 6.59295 4.98995 8.42861 7.25434 8.42861Z"
fill-rule="evenodd"/>
<path d="M11.1199 4.32837C11.1129 5.92515 10.1018 7.40805 8.59105 7.95891C7.82403 8.23782 6.98031 8.27269 6.19238 8.04955C5.43466 7.83572 4.76294 7.38713 4.2609 6.78282C3.22426 5.53467 3.10572 3.70546 3.94247 2.32483C4.77689 0.946528 6.43643 0.212052 8.01927 0.537453C9.59979 0.862853 10.827 2.15748 11.0757 3.7473C11.1083 3.93789 11.1199 4.13313 11.1199 4.32837C11.1222 4.6282 11.5871 4.6282 11.5847 4.32837C11.5801 3.43584 11.3081 2.54796 10.7852 1.82278C10.2715 1.1069 9.55795 0.560696 8.7305 0.256214C7.0361 -0.366696 5.0558 0.174864 3.91458 1.56944C3.34745 2.2644 3.00345 3.10812 2.93373 4.00297C2.864 4.89317 3.08016 5.80429 3.54269 6.56666C3.98895 7.30346 4.66067 7.9101 5.44628 8.26571C6.2807 8.64225 7.21274 8.75149 8.11224 8.57252C9.85313 8.22852 11.2593 6.76887 11.5266 5.01636C11.5615 4.78858 11.5824 4.55847 11.5824 4.32837C11.5871 4.02853 11.1222 4.02853 11.1199 4.32837Z"
fill-rule="evenodd"/>
<path d="M16.5259 8.91222C18.2165 8.91222 19.587 7.54172 19.587 5.85113C19.587 4.16053 18.2165 2.79004 16.5259 2.79004C14.8353 2.79004 13.4648 4.16053 13.4648 5.85113C13.4648 7.54172 14.8353 8.91222 16.5259 8.91222Z"
fill-rule="evenodd"/>
<path d="M19.3527 5.85266C19.3458 7.01945 18.609 8.10722 17.5026 8.507C16.3753 8.91375 15.1086 8.56743 14.3393 7.64934C13.5792 6.74054 13.4909 5.39943 14.1022 4.38836C14.7065 3.38659 15.9151 2.84271 17.068 3.07514C18.2301 3.30757 19.1296 4.2489 19.3202 5.41802C19.3458 5.56213 19.3527 5.70856 19.3527 5.85266C19.3551 6.15249 19.8199 6.15249 19.8176 5.85266C19.8106 4.47203 18.9367 3.23086 17.6421 2.75439C16.3614 2.28488 14.8576 2.69395 13.9929 3.74918C13.1167 4.81835 12.9842 6.35936 13.7024 7.54939C14.4206 8.73943 15.8338 9.35072 17.1912 9.07645C18.5044 8.8138 19.5712 7.70512 19.7734 6.37795C19.799 6.20363 19.8153 6.02698 19.8176 5.85034C19.8199 5.55283 19.3551 5.55283 19.3527 5.85266Z"
fill-rule="evenodd"/>
<path d="M14.2799 14.5116V16.1874C14.2799 16.7196 13.8383 17.1496 13.306 17.1496H1.20347C0.671204 17.1496 0.241211 16.7196 0.241211 16.1874V14.5116C0.241211 11.9293 2.3354 9.82812 4.91768 9.82812H9.59415C10.6587 9.82812 11.6442 10.1861 12.4321 10.7857C13.5501 11.6411 14.2799 12.9915 14.2799 14.5116Z"
fill-rule="evenodd"/>
<path d="M14.0354 14.5085C14.0354 15.0175 14.0354 15.5265 14.0354 16.0356C14.0354 16.1053 14.0401 16.1774 14.0331 16.2494C14.0168 16.4446 13.9169 16.6283 13.7658 16.7538C13.624 16.87 13.4497 16.9165 13.2684 16.9165C12.6106 16.9188 11.9529 16.9165 11.2951 16.9165C10.0377 16.9165 8.78022 16.9165 7.52045 16.9165C6.22583 16.9165 4.9312 16.9165 3.63657 16.9165C2.86955 16.9165 2.10021 16.9165 1.3332 16.9165C1.28904 16.9165 1.2472 16.9165 1.20304 16.9165C0.840448 16.9118 0.524345 16.6469 0.475535 16.2819C0.447643 16.0774 0.470886 15.8566 0.470886 15.6521C0.470886 15.336 0.470886 15.0175 0.470886 14.7014C0.470886 14.4202 0.47321 14.1413 0.515047 13.8624C0.582452 13.4207 0.712612 12.9838 0.907852 12.5817C1.29601 11.7868 1.91195 11.115 2.67431 10.6688C3.35998 10.2667 4.14094 10.0645 4.93352 10.0645C5.32633 10.0645 5.71913 10.0645 6.10961 10.0645C7.23921 10.0645 8.3665 10.0645 9.4961 10.0645C10.3468 10.0645 11.1673 10.2667 11.8971 10.7129C12.7571 11.2359 13.4334 12.0587 13.7705 13.0093C13.9494 13.4905 14.0331 13.9948 14.0354 14.5085C14.0378 14.8083 14.5026 14.8083 14.5003 14.5085C14.4956 13.3929 14.1168 12.319 13.4241 11.4451C12.7245 10.5595 11.7018 9.92966 10.5955 9.70421C10.0702 9.59729 9.54723 9.59961 9.0173 9.59961C8.38509 9.59961 7.75521 9.59961 7.123 9.59961C6.52333 9.59961 5.92134 9.59961 5.32168 9.59961C4.78941 9.59961 4.2618 9.61356 3.73884 9.7414C1.86546 10.197 0.377914 11.7961 0.0734326 13.7066C-0.0265118 14.3319 0.00602826 14.9757 0.00602826 15.6079C0.00602826 15.831 -0.0102418 16.0588 0.0106768 16.2819C0.0571625 16.7956 0.436022 17.2512 0.949689 17.3534C1.15888 17.3953 1.37968 17.3813 1.59119 17.3813C1.97703 17.3813 2.36518 17.3813 2.75101 17.3813C3.98521 17.3813 5.21708 17.3813 6.45128 17.3813C7.80634 17.3813 9.1614 17.3813 10.5165 17.3813C11.3718 17.3813 12.2295 17.3813 13.0848 17.3813C13.1522 17.3813 13.2196 17.3813 13.287 17.3813C13.6217 17.379 13.9518 17.2488 14.1795 16.9978C14.4282 16.7259 14.498 16.3982 14.498 16.0425C14.498 15.7311 14.498 15.4196 14.498 15.1082C14.498 14.9083 14.498 14.7084 14.498 14.5085C14.5003 14.2087 14.0354 14.2087 14.0354 14.5085Z"
fill-rule="evenodd"/>
<path d="M21.7628 13.2882V14.8594C21.7628 15.1546 21.5373 15.4056 21.2491 15.4289H15.3478V14.376C15.3478 12.6932 14.5691 11.1917 13.3535 10.2132C13.744 10.0528 14.1693 9.9668 14.6179 9.9668H18.4367C20.2729 9.9668 21.7628 11.452 21.7628 13.2882Z"
fill-rule="evenodd"/>
<path d="M21.5294 13.2881C21.5294 13.8087 21.5457 14.334 21.5294 14.857C21.5224 15.0615 21.369 15.1894 21.1738 15.1894C21.0041 15.1894 20.8345 15.1894 20.6648 15.1894C19.2958 15.1894 17.9268 15.1894 16.5554 15.1894C16.151 15.1894 15.7489 15.1894 15.3445 15.1894C15.4212 15.2661 15.5002 15.3451 15.5769 15.4218C15.5769 14.9221 15.6002 14.413 15.556 13.9156C15.4723 12.9487 15.1446 12.0051 14.5868 11.2079C14.2846 10.7732 13.9243 10.3827 13.5129 10.048C13.4781 10.1782 13.4455 10.306 13.4107 10.4362C13.8058 10.2758 14.2172 10.1968 14.6426 10.1968C14.7983 10.1968 14.9563 10.1968 15.1121 10.1968C15.721 10.1968 16.3277 10.1968 16.9366 10.1968C17.4108 10.1968 17.8849 10.1968 18.3614 10.1968C19.0633 10.1968 19.7351 10.3967 20.2999 10.822C21.0739 11.3984 21.5248 12.3258 21.5294 13.2881C21.5317 13.5879 21.9966 13.5879 21.9943 13.2881C21.9896 12.3282 21.6015 11.3961 20.9088 10.729C20.2464 10.0899 19.3539 9.73193 18.4335 9.72961C17.3922 9.72496 16.3486 9.72961 15.3073 9.72961C15.0958 9.72961 14.8866 9.72961 14.6751 9.72961C14.2009 9.72961 13.7338 9.80863 13.2921 9.98528C13.148 10.0434 13.0388 10.2502 13.1899 10.3734C13.8802 10.9336 14.4357 11.6611 14.7588 12.4932C14.9238 12.9185 15.04 13.3671 15.0865 13.8227C15.1167 14.1062 15.1144 14.3898 15.1144 14.6757C15.1144 14.9244 15.1144 15.1731 15.1144 15.4218C15.1144 15.5473 15.2213 15.6542 15.3468 15.6542C15.6862 15.6542 16.0232 15.6542 16.3625 15.6542C17.0924 15.6542 17.8222 15.6542 18.552 15.6542C19.2307 15.6542 19.9117 15.6542 20.5904 15.6542C20.7787 15.6542 20.9646 15.6542 21.1529 15.6542C21.4504 15.6542 21.7293 15.5287 21.885 15.2637C22.0408 14.9988 21.9943 14.6455 21.9943 14.348C21.9943 14.0179 21.9943 13.6855 21.9943 13.3555C21.9943 13.3346 21.9943 13.3113 21.9943 13.2904C21.9943 12.9883 21.5294 12.9883 21.5294 13.2881Z"
fill-rule="evenodd"/>
</svg>
</div>
<span data-mdb-slim="false">Team</span>
</a>
</li>
<!-- Customer link -->
<li class="sidenav-item">
<a class="sidenav-link" href="customer-list.html">
<div alt="Logo" class="me-3 pb-1">
<svg fill="currentColor" height="21" viewBox="0 0 20 21" width="20"
xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M5.33 0.169922C1.92693 0.169922 0 3.5 0 5.49992C0 7.49984 0 14.8399 0 14.8399C0 18.2307 1.92693 20.1699 5.33 20.1699H14.669C18.0702 20.1699 20 18.2499 20 14.8399V5.49992C19.99 2.10275 18 0.169922 14.669 0.169922H5.33ZM8.80011 11.7999C6.48067 11.7999 4.60011 13.6795 4.60011 15.9992V17.1999C4.60011 17.5312 4.86874 17.7999 5.20011 17.7999H14.8001C15.1314 17.7999 15.4001 17.5312 15.4001 17.1999V15.9992C15.4001 13.6795 13.5196 11.7999 11.2001 11.7999H8.80011ZM7.00011 7.59992C7.00011 5.94307 8.34326 4.59992 10.0001 4.59992C11.657 4.59992 13.0001 5.94307 13.0001 7.59992C13.0001 9.25677 11.657 10.5999 10.0001 10.5999C8.34326 10.5999 7.00011 9.25677 7.00011 7.59992Z"
fill-rule="evenodd"/>
</svg>
</div>
<span data-mdb-slim="false">Customers</span>
</a>
</li>
<!-- Invoice link -->
<li class="sidenav-item">
<a class="sidenav-link" href="invoice-list.html">
<div alt="Logo" class="me-3 pb-1">
<svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24"
xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M21.7872 10.539C21.6518 10.6706 21.4681 10.7457 21.2747 10.7457C20.559 10.7457 19.9787 11.3095 19.9787 11.9953C19.9787 12.6858 20.5522 13.2467 21.2611 13.2543C21.6605 13.258 22 13.5286 22 13.9166V16.3265C22 18.3549 20.3075 20 18.2186 20H15.0658C14.7398 20 14.4758 19.7435 14.4758 19.4269V17.3975C14.4758 17.0029 14.1567 16.6929 13.7505 16.6929C13.354 16.6929 13.0251 17.0029 13.0251 17.3975V19.4269C13.0251 19.7435 12.7611 20 12.4362 20H5.78143C3.70213 20 2 18.3558 2 16.3265V13.9166C2 13.5286 2.33946 13.258 2.73888 13.2543C3.44874 13.2467 4.02128 12.6858 4.02128 11.9953C4.02128 11.3282 3.46035 10.8209 2.72534 10.8209C2.53191 10.8209 2.34816 10.7457 2.21277 10.6142C2.07737 10.4827 2 10.3042 2 10.1163V7.68291C2 5.65731 3.706 4 5.7911 4H12.4362C12.7611 4 13.0251 4.25649 13.0251 4.57311V6.97827C13.0251 7.36348 13.354 7.68291 13.7505 7.68291C14.1567 7.68291 14.4758 7.36348 14.4758 6.97827V4.57311C14.4758 4.25649 14.7398 4 15.0658 4H18.2186C20.3075 4 22 5.64416 22 7.67352V10.0411C22 10.229 21.9226 10.4075 21.7872 10.539ZM13.7505 14.8702C14.1567 14.8702 14.4758 14.5508 14.4758 14.1656V10.4075C14.4758 10.0223 14.1567 9.70288 13.7505 9.70288C13.354 9.70288 13.0251 10.0223 13.0251 10.4075V14.1656C13.0251 14.5508 13.354 14.8702 13.7505 14.8702Z"
fill-rule="evenodd"/>
</svg>
</div>
<span data-mdb-slim="false">Invoice</span>
</a>
</li>
<!-- Schedule link -->
<li class="sidenav-item">
<a class="sidenav-link">
<div alt="Logo" class="me-3 pb-1">
<svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24"
xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M7.81 2H16.191C19.28 2 21 3.78 21 6.83V17.16C21 20.26 19.28 22 16.191 22H7.81C4.77 22 3 20.26 3 17.16V6.83C3 3.78 4.77 2 7.81 2ZM8.08 6.66V6.65H11.069C11.5 6.65 11.85 7 11.85 7.429C11.85 7.87 11.5 8.22 11.069 8.22H8.08C7.649 8.22 7.3 7.87 7.3 7.44C7.3 7.01 7.649 6.66 8.08 6.66ZM8.08 12.74H15.92C16.35 12.74 16.7 12.39 16.7 11.96C16.7 11.53 16.35 11.179 15.92 11.179H8.08C7.649 11.179 7.3 11.53 7.3 11.96C7.3 12.39 7.649 12.74 8.08 12.74ZM8.08 17.31H15.92C16.319 17.27 16.62 16.929 16.62 16.53C16.62 16.12 16.319 15.78 15.92 15.74H8.08C7.78 15.71 7.49 15.85 7.33 16.11C7.17 16.36 7.17 16.69 7.33 16.95C7.49 17.2 7.78 17.35 8.08 17.31Z"
fill-rule="evenodd"/>
</svg>
</div>
<span data-mdb-slim="false">Schedule</span>
</a>
</li>
<!-- Calendar link -->
<li class="sidenav-item">
<a class="sidenav-link" href="calendar.html">
<div alt="Logo" class="me-3 pb-1 ps-1">
<svg fill="currentColor" height="20" viewBox="0 0 18 20" width="18"
xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M13.4109 0.76862L13.4119 1.51824C16.1665 1.73414 17.9862 3.6112 17.9891 6.48975L18 14.9155C18.0039 18.054 16.0322 19.985 12.8718 19.99L5.15189 20C2.0112 20.004 0.0148232 18.027 0.0108739 14.8796L1.32771e-05 6.55272C-0.00393603 3.65517 1.75153 1.78311 4.50618 1.53024L4.50519 0.780614C4.5042 0.340834 4.83002 0.00999952 5.26445 0.00999952C5.69887 0.00900002 6.02469 0.338835 6.02568 0.778615L6.02666 1.47826L11.8914 1.47027L11.8904 0.770619C11.8894 0.330839 12.2152 0.00100402 12.6497 4.52073e-06C13.0742 -0.000994979 13.4099 0.32884 13.4109 0.76862ZM1.52149 6.86157L16.4696 6.84158V6.49175C16.4272 4.34283 15.349 3.21539 13.4139 3.04748L13.4148 3.81709C13.4148 4.24688 13.0801 4.58771 12.6556 4.58771C12.2212 4.58871 11.8944 4.24888 11.8944 3.81909L11.8934 3.0095L6.02864 3.01749L6.02962 3.82609C6.02962 4.25687 5.70479 4.5967 5.27037 4.5967C4.83595 4.5977 4.50914 4.25887 4.50914 3.82809L4.50815 3.05847C2.58286 3.25138 1.51754 4.38281 1.5205 6.55072L1.52149 6.86157ZM12.2399 11.4043V11.4153C12.2498 11.8751 12.625 12.2239 13.0801 12.2139C13.5244 12.2029 13.8789 11.8221 13.869 11.3623C13.8483 10.9225 13.4918 10.5637 13.0485 10.5647C12.5944 10.5747 12.2389 10.9445 12.2399 11.4043ZM13.0554 15.892C12.6013 15.882 12.235 15.5032 12.234 15.0435C12.2241 14.5837 12.5884 14.2029 13.0426 14.1919H13.0525C13.5165 14.1919 13.8927 14.5707 13.8927 15.0405C13.8937 15.5102 13.5185 15.891 13.0554 15.892ZM8.17213 11.4203C8.19187 11.8801 8.56804 12.2389 9.02222 12.2189C9.46651 12.1979 9.82096 11.8181 9.80122 11.3583C9.79036 10.9085 9.42505 10.5587 8.98075 10.5597C8.52658 10.5797 8.17114 10.9605 8.17213 11.4203ZM9.02617 15.8471C8.57199 15.8671 8.19681 15.5082 8.17608 15.0485C8.17608 14.5887 8.53053 14.2089 8.9847 14.1879C9.429 14.1869 9.79529 14.5367 9.80517 14.9855C9.8259 15.4463 9.47046 15.8261 9.02617 15.8471ZM4.10434 11.4553C4.12408 11.915 4.50025 12.2749 4.95442 12.2539C5.39872 12.2339 5.75317 11.8531 5.73244 11.3933C5.72257 10.9435 5.35725 10.5937 4.91197 10.5947C4.4578 10.6147 4.10335 10.9955 4.10434 11.4553ZM4.95837 15.8521C4.5042 15.8731 4.12902 15.5132 4.10828 15.0535C4.1073 14.5937 4.46274 14.2129 4.91691 14.1929C5.3612 14.1919 5.7275 14.5417 5.73738 14.9915C5.75811 15.4513 5.40366 15.8321 4.95837 15.8521Z"
fill-rule="evenodd"/>
</svg>
</div>
<span data-mdb-slim="false">Calendar</span>
</a>
</li>
<!-- Messages link -->
<li class="sidenav-item">
<a class="sidenav-link">
<div alt="Logo" class="me-3 pb-1">
<svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24"
xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M17.1801 4.41C17.1801 3.08 18.2601 2 19.5901 2C20.9201 2 22.0001 3.08 22.0001 4.41C22.0001 5.74 20.9201 6.82 19.5901 6.82C18.2601 6.82 17.1801 5.74 17.1801 4.41ZM13.33 14.7593L16.22 11.0303L16.18 11.0503C16.34 10.8303 16.37 10.5503 16.26 10.3003C16.151 10.0503 15.91 9.8803 15.651 9.8603C15.38 9.8303 15.111 9.9503 14.95 10.1703L12.531 13.3003L9.76 11.1203C9.59 10.9903 9.39 10.9393 9.19 10.9603C8.991 10.9903 8.811 11.0993 8.69 11.2593L5.731 15.1103L5.67 15.2003C5.5 15.5193 5.58 15.9293 5.88 16.1503C6.02 16.2403 6.17 16.3003 6.34 16.3003C6.571 16.3103 6.79 16.1893 6.93 16.0003L9.44 12.7693L12.29 14.9103L12.38 14.9693C12.7 15.1393 13.1 15.0603 13.33 14.7593ZM15.45 3.7803C15.41 4.0303 15.39 4.2803 15.39 4.5303C15.39 6.7803 17.21 8.5993 19.45 8.5993C19.7 8.5993 19.94 8.5703 20.19 8.5303V16.5993C20.19 19.9903 18.19 22.0003 14.79 22.0003H7.401C4 22.0003 2 19.9903 2 16.5993V9.2003C2 5.8003 4 3.7803 7.401 3.7803H15.45Z"
fill-rule="evenodd"/>
</svg>
</div>
<span class="me-4" data-mdb-slim="false">Messages</span>
<span class="badge rounded-pill badge-danger" data-mdb-slim="false">49</span>
</a>
</li>
<!-- Notification link -->
<li class="sidenav-item">
<a class="sidenav-link">
<div alt="Logo" class="me-3 pb-1">
<svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24"
xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M18.7071 8.79633C18.7071 10.0523 19.039 10.7925 19.7695 11.6456C20.3231 12.2741 20.5 13.0808 20.5 13.956C20.5 14.8302 20.2128 15.6601 19.6373 16.3339C18.884 17.1417 17.8215 17.6573 16.7372 17.747C15.1659 17.8809 13.5937 17.9937 12.0005 17.9937C10.4063 17.9937 8.83505 17.9263 7.26375 17.747C6.17846 17.6573 5.11602 17.1417 4.36367 16.3339C3.78822 15.6601 3.5 14.8302 3.5 13.956C3.5 13.0808 3.6779 12.2741 4.23049 11.6456C4.98384 10.7925 5.29392 10.0523 5.29392 8.79633V8.3703C5.29392 6.68834 5.71333 5.58852 6.577 4.51186C7.86106 2.9417 9.91935 2 11.9558 2H12.0452C14.1254 2 16.2502 2.98702 17.5125 4.62466C18.3314 5.67916 18.7071 6.73265 18.7071 8.3703V8.79633ZM9.07367 20.0608C9.07367 19.5573 9.53582 19.3266 9.96318 19.2279C10.4631 19.1222 13.5093 19.1222 14.0092 19.2279C14.4366 19.3266 14.8987 19.5573 14.8987 20.0608C14.8738 20.5402 14.5926 20.9653 14.204 21.2352C13.7001 21.628 13.1088 21.8767 12.4906 21.9664C12.1487 22.0107 11.8128 22.0117 11.4828 21.9664C10.8636 21.8767 10.2723 21.628 9.76938 21.2342C9.37978 20.9653 9.09852 20.5402 9.07367 20.0608Z"
fill-rule="evenodd"/>
</svg>
</div>
<span data-mdb-slim="false">Notification</span>
</a>
</li>
<!-- HTML Editor link -->
<li class="sidenav-item">
<a class="sidenav-link" href="html-editor.html">
<div alt="Logo" class="me-3 pb-1">
<svg width="22" height="21" viewBox="0 0 22 21" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M15.2402 0.333984H6.43679C2.61289 0.333984 0.333252 2.50507 0.333252 6.14688V14.5211C0.333252 18.1729 2.61289 20.344 6.43679 20.344H15.2297C19.0536 20.344 21.3332 18.1729 21.3332 14.5311V6.14688C21.3437 2.50507 19.0641 0.333984 15.2402 0.333984ZM8.87401 12.8402C9.17866 13.1304 9.17866 13.6106 8.87401 13.9007C8.71643 14.0508 8.51683 14.1209 8.31723 14.1209C8.11763 14.1209 7.91803 14.0508 7.76045 13.9007L5.14465 11.4095C4.52484 10.8192 4.52484 9.86873 5.14465 9.27844L7.76045 6.7872C8.0651 6.49706 8.56936 6.49706 8.87401 6.7872C9.17866 7.07734 9.17866 7.55758 8.87401 7.84773L6.2582 10.339L8.87401 12.8402ZM16.5323 11.3995L13.9165 13.8907C13.7589 14.0408 13.5593 14.1108 13.3597 14.1108C13.1601 14.1108 12.9605 14.0408 12.803 13.8907C12.4983 13.6006 12.4983 13.1204 12.803 12.8302L15.4188 10.339L12.803 7.83772C12.4983 7.54758 12.4983 7.06734 12.803 6.77719C13.1076 6.48705 13.6119 6.48705 13.9165 6.77719L16.5323 9.26844C17.1521 9.85873 17.1521 10.8192 16.5323 11.3995Z" fill-rule="evenodd"/>
</svg>
</svg>
</div>
<span data-mdb-slim="false">HTML Editor</span>
</a>
</li>
<!-- JSON Editor link -->
<li class="sidenav-item">
<a class="sidenav-link" href="json-editor.html">
<div alt="Logo" class="me-3 pb-1">
<svg fill="currentColor" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M14.1971 0H5.8129C2.17108 0 0 2.17 0 5.81V14.18C0 17.83 2.17108 20 5.8129 20H14.1871C17.8289 20 20 17.83 20 14.19V5.81C20.01 2.17 17.8389 0 14.1971 0ZM8.95446 15.51C8.66432 15.8 8.11404 16.08 7.71384 16.14L5.25262 16.49C5.16257 16.5 5.07253 16.51 4.98248 16.51C4.57228 16.51 4.19209 16.37 3.92195 16.1C3.59179 15.77 3.45172 15.29 3.53176 14.76L3.88193 12.3C3.94196 11.89 4.2121 11.35 4.51225 11.06L8.97447 6.6C9.05451 6.81 9.13455 7.02 9.24461 7.26C9.34466 7.47 9.45471 7.69 9.57477 7.89C9.67482 8.06 9.78488 8.22 9.87492 8.34C9.98498 8.51 10.115 8.67 10.1951 8.76C10.2451 8.83 10.2851 8.88 10.3051 8.9C10.5553 9.2 10.8454 9.48 11.0955 9.69C11.1656 9.76 11.2056 9.8 11.2256 9.81C11.3757 9.93 11.5257 10.05 11.6558 10.14C11.8159 10.26 11.976 10.37 12.1461 10.46C12.3462 10.58 12.5663 10.69 12.7864 10.8C13.0165 10.9 13.2266 10.99 13.4367 11.06L8.95446 15.51ZM15.3777 9.09L14.4572 10.02C14.3972 10.08 14.3171 10.11 14.2371 10.11C14.2071 10.11 14.1671 10.11 14.147 10.1C12.116 9.52 10.4952 7.9 9.91494 5.87C9.88493 5.76 9.91494 5.64 9.99498 5.57L10.9254 4.64C12.4462 3.12 13.8969 3.15 15.3877 4.64C16.148 5.4 16.5182 6.13 16.5182 6.89C16.5082 7.61 16.138 8.33 15.3777 9.09Z" fill-rule="evenodd"/>
</svg>
</div>
<span data-mdb-slim="false">JSON Editor</span>
</a>
</li>
<!-- Settings link -->
<li class="sidenav-item">
<a class="sidenav-link">
<div alt="Logo" class="me-3 pb-1">
<svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24"
xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M20.4023 13.58C20.76 13.77 21.036 14.07 21.2301 14.37C21.6083 14.99 21.5776 15.75 21.2097 16.42L20.4943 17.62C20.1162 18.26 19.411 18.66 18.6855 18.66C18.3278 18.66 17.9292 18.56 17.6022 18.36C17.3365 18.19 17.0299 18.13 16.7029 18.13C15.6911 18.13 14.8429 18.96 14.8122 19.95C14.8122 21.1 13.872 22 12.6968 22H11.3069C10.1215 22 9.18125 21.1 9.18125 19.95C9.16081 18.96 8.31259 18.13 7.30085 18.13C6.96361 18.13 6.65702 18.19 6.40153 18.36C6.0745 18.56 5.66572 18.66 5.31825 18.66C4.58245 18.66 3.87729 18.26 3.49917 17.62L2.79402 16.42C2.4159 15.77 2.39546 14.99 2.77358 14.37C2.93709 14.07 3.24368 13.77 3.59115 13.58C3.87729 13.44 4.06125 13.21 4.23498 12.94C4.74596 12.08 4.43937 10.95 3.57071 10.44C2.55897 9.87 2.23194 8.6 2.81446 7.61L3.49917 6.43C4.09191 5.44 5.35913 5.09 6.38109 5.67C7.27019 6.15 8.425 5.83 8.9462 4.98C9.10972 4.7 9.20169 4.4 9.18125 4.1C9.16081 3.71 9.27323 3.34 9.4674 3.04C9.84553 2.42 10.5302 2.02 11.2763 2H12.7172C13.4735 2 14.1582 2.42 14.5363 3.04C14.7203 3.34 14.8429 3.71 14.8122 4.1C14.7918 4.4 14.8838 4.7 15.0473 4.98C15.5685 5.83 16.7233 6.15 17.6226 5.67C18.6344 5.09 19.9118 5.44 20.4943 6.43L21.179 7.61C21.7718 8.6 21.4447 9.87 20.4228 10.44C19.5541 10.95 19.2475 12.08 19.7687 12.94C19.9322 13.21 20.1162 13.44 20.4023 13.58ZM9.10972 12.01C9.10972 13.58 10.4076 14.83 12.0121 14.83C13.6165 14.83 14.8838 13.58 14.8838 12.01C14.8838 10.44 13.6165 9.18 12.0121 9.18C10.4076 9.18 9.10972 10.44 9.10972 12.01Z"
fill-rule="evenodd"/>
</svg>
</div>
<span data-mdb-slim="false">Settings</span>
</a>
<ul class="sidenav-collapse">
<li class="sidenav-item disabled">
<span class="sidenav-link">Service pages:</span>
</li>
<li class="sidenav-item"><a class="sidenav-link" href="login.html">Login</a></li>
<li class="sidenav-item"><a class="sidenav-link" href="sign-up.html">Sign Up</a></li>
<li class="sidenav-item"><a class="sidenav-link" href="recover.html">Recover</a></li>
<li class="sidenav-item"><a class="sidenav-link" href="confirm.html">Confirm</a></li>
</ul>
</li>
</ul>
</div>
<!-- End bar section-->
<div class="end-bar d-flex flex-column justify-content-center mt-5 pb-1 pt-5 align-items-end">
<!-- Lamp section -->
<div class="text-center"
data-mdb-slim="false">
<div class="lamp-background-rectangle"></div>
<div class="shape">
<div class="shadow-point"></div>
</div>
<img alt="lamp" class="lamp" src="./img/object.svg">
<div class="shell">
<button class="btn btn-customer rounded-5 shadow-0"
onClick="window.location.reload()"
type="button">
Upgrade Now
</button>
</div>
</div>
<!-- Bottom sidebar section -->
<div class="container mt-3">
<div class="profile row justify-content-center align-items-center gy-3">
<div class="col-3">
<img alt="avatar" class="profile_pic" src="./img/avatar.jpg">
</div>
<div class="profile_info col-7 pe-0 ps-4">
<span class="h6"
data-mdb-slim="false"
id="user-name">
General Manager
</span><br>
<p class="my-0"
id="user-roll"
data-mdb-slim="false">
Owner</p>
</div>
<div alt="Logo" class="col-2">
<a href="login.html">
<!-- SVG - Logout icon door -->
<svg fill="currentColor" height="18" viewBox="0 0 18 18" width="18"
xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M7.24547 8.35964C6.88089 8.35964 6.59261 8.64297 6.59261 9.0013C6.59261 9.3513 6.88089 9.64297 7.24547 9.64297H12.3327V13.6263C12.3327 15.668 10.6454 17.3346 8.55967 17.3346H4.43055C2.35327 17.3346 0.666016 15.6763 0.666016 13.6346V4.3763C0.666016 2.3263 2.36175 0.667969 4.43903 0.667969H8.57663C10.6454 0.667969 12.3327 2.3263 12.3327 4.36797V8.35964H7.24547ZM15.3579 6.11814L17.7912 8.54314C17.9162 8.66814 17.9829 8.82647 17.9829 9.00147C17.9829 9.16814 17.9162 9.33481 17.7912 9.45147L15.3579 11.8765C15.2329 12.0015 15.0662 12.0681 14.9079 12.0681C14.7412 12.0681 14.5745 12.0015 14.4495 11.8765C14.1995 11.6265 14.1995 11.2181 14.4495 10.9681L15.7829 9.64314H12.3329V8.35981H15.7829L14.4495 7.03481C14.1995 6.78481 14.1995 6.37647 14.4495 6.12647C14.6995 5.86814 15.1079 5.86814 15.3579 6.11814Z"
fill-rule="evenodd"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- Sidenav-->
<main>
<div style="padding: 15px;" class="" id="slim-content">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-nav navbar-light sticky-top shadow-0 mb-2 mt-0 pt-0">
<!-- Container wrapper -->
<div class="container-fluid ps-0">
<label class="container-switch">
<input type="checkbox" checked="checked" data-mdb-toggle="sidenav" data-mdb-target="#sidenav-4" class="btn"
aria-controls="#sidenav-4" aria-haspopup="true">
<div class="checkmark">
<span></span>
<span></span>
<span></span>
</div>
</label>
<!-- Navbar brand -->
<a class="navbar-brand me-auto ps-2" href="#">
<h5>JSON editor</h5>
</a>
<!-- Collapsible wrapper -->
<div id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
</ul>
<!-- Date picker -->
<div class="w-auto form-outline datepicker">
<input type="text" class="form-control" id="exampleDatepicker2">
<label for="exampleDatepicker2" class="form-label">Example label</label>
</div>
<!-- Date picker -->
</div>
</div>
<!-- Container wrapper -->
</nav>
<!-- Navbar -->
<!-- Section: JSON Editor-->
<section class="mb-4">
<div class="row g-4">
<div class="col-lg-5 col-md-12 mb-4 mb-lg-0 hidden-arrow">
<div class="bg-card rounded-6 h-100">
<div class="ce-example__content _ce-example__content--small p-3">
<div class="ce-example__statusbar">
<!-- Readonly Button -->
<div class="form-check form-switch d-flex justify-content-end">
<input class="form-check-input" type="checkbox" role="switch" id="toggleReadOnlyButton" />
<label class="form-check-label" for="toggleReadOnlyButton">Readonly: <b id="readonly-state">
Off
</b></label>
</div>
<!-- Readonly Button -->
</div>
<div id="editorjs"></div>
</div>
</div>
<!-- Card -->
</div>
<div class="col-lg-7 mb-4 mb-lg-0">
<div class="ce-example__output rounded-6 p-3">
<div class="d-flex justify-content-end">
<button class="btn btn-primary mx-1" id="saveButton">Save</button>
<button class="btn btn-primary clipboard" data-mdb-clipboard-target="#output" id="copyButton"> Copy</button>
</div>
<pre class="ce-example__output-content" id="output"></pre>
</div>
</div>
</div>
</section>
<div class="ce-example">
<div class="ce-example__output-footer">
<div class="ce-example__footer">
<div class="ce-example__footer-menu">
<a href="https://github.com/editor-js" target="_blank">Plugins</a>
<a href="https://editorjs.io/usage" target="_blank">Usage</a>
<a href="https://editorjs.io/configuration" target="_blank">Configuration</a>
<a href="https://editorjs.io/creating-a-block-tool" target="_blank">API</a>
</div>
</div>
</div>
</div>
<!-- Section: JSON Editor-->
</div>
</main>
<script src="./js/theme.js"></script>
<script src="https://mdbootstrap.com/api/snippets/static/download/MDB5-Pro-Advanced_6.2.0/js/mdb.min.js"></script>
<script
src="https://mdbootstrap.com/api/snippets/static/download/MDB5-Pro-Advanced_6.2.0/plugins/js/all.min.js"></script>
<!-- Load Tools -->
<!--
You can upload Tools to your project's directory and connect them by relative links.
Also you can load each Tool from CDN or use NPM/Yarn packages.
Read more at Tools Connection doc:
https://editorjs.io/getting-started#tools-connection
-->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script><!-- Header -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script><!-- Image -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter@latest"></script><!-- Delimiter -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script><!-- List -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script><!-- Checklist -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script><!-- Quote -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script><!-- Code -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script><!-- Embed -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/table@latest"></script><!-- Table -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/link@latest"></script><!-- Link -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/warning@latest"></script><!-- Warning -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/marker@latest"></script><!-- Marker -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/inline-code@latest"></script><!-- Inline Code -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/image@2.3.0"></script><!-- Image -->
<!-- Load Editor.js's Core -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<!-- Initialization -->
<script>
/**
* To initialize the Editor, create a new instance with configuration object
* @see docs/installation.md for mode details
*/
const editor = new EditorJS({
/**
* Enable/Disable the read only mode
*/
readOnly: false,
/**
* Wrapper of Editor
*/
holder: 'editorjs',
/**
* Common Inline Toolbar settings
* - if true (or not specified), the order from 'tool' property will be used
* - if an array of tool names, this order will be used
*/
// inlineToolbar: ['link', 'marker', 'bold', 'italic'],
// inlineToolbar: true,
/**
* Tools list
*/
tools: {
/**
* Each Tool is a Plugin. Pass them via 'class' option with necessary settings {@link docs/tools.md}
*/
header: {
class: Header,
inlineToolbar: ['marker', 'link'],
config: {
placeholder: 'Header'
},
shortcut: 'CMD+SHIFT+H'
},
/**
* Or pass class directly without any configuration
*/
image: SimpleImage,
list: {
class: List,
inlineToolbar: true,
shortcut: 'CMD+SHIFT+L'
},
checklist: {
class: Checklist,
inlineToolbar: true,
},
quote: {
class: Quote,
inlineToolbar: true,
config: {
quotePlaceholder: 'Enter a quote',
captionPlaceholder: 'Quote\'s author',
},
shortcut: 'CMD+SHIFT+O'
},
warning: Warning,
marker: {
class: Marker,
shortcut: 'CMD+SHIFT+M'
},
code: {
class: CodeTool,
shortcut: 'CMD+SHIFT+C'
},
delimiter: Delimiter,
inlineCode: {
class: InlineCode,
shortcut: 'CMD+SHIFT+C'
},
linkTool: LinkTool,
embed: Embed,
table: {
class: Table,
inlineToolbar: true,
shortcut: 'CMD+ALT+T'
},
},
/**
* This Tool will be used as default
*/
// defaultBlock: 'paragraph',
/**
* Initial Editor data
*/
data: {
blocks: [
{
type: 'header',
data: {
text: 'Editor.js',
level: 2
}
},
{
type: 'paragraph',
data: {
text: 'Hey. Meet the new Editor. On this page you can see it in action — try to edit this text. Source code of the page contains the example of connection and configuration.'
}
},
{
type: 'header',
data: {
text: 'Key features',
level: 3
}
},
{
type: 'list',
data: {
items: [
'It is a block-styled editor',
'It returns clean data output in JSON',
'Designed to be extendable and pluggable with a simple API',
],
style: 'unordered'
}
},
{
type: 'header',
data: {
text: 'What does it mean «block-styled editor»',
level: 3
}
},
{
type: 'paragraph',
data: {
text: 'Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js <mark class=\"cdx-marker\">workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc</mark>. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor\'s Core.'
}
},
{
type: 'paragraph',
data: {
text: `There are dozens of <a href="https://github.com/editor-js">ready-to-use Blocks</a> and the <a href="https://editorjs.io/creating-a-block-tool">simple API</a> for creation any Block you need. For example, you can implement Blocks for Tweets, Instagram posts, surveys and polls, CTA-buttons and even games.`
}
},
{
type: 'header',
data: {
text: 'What does it mean clean data output',
level: 3
}
},
{
type: 'paragraph',
data: {
text: 'Classic WYSIWYG-editors produce raw HTML-markup with both content data and content appearance. On the contrary, Editor.js outputs JSON object with data of each Block. You can see an example below'
}
},
{
type: 'paragraph',
data: {
text: `Given data can be used as you want: render with HTML for <code class="inline-code">Web clients</code>, render natively for <code class="inline-code">mobile apps</code>, create markup for <code class="inline-code">Facebook Instant Articles</code> or <code class="inline-code">Google AMP</code>, generate an <code class="inline-code">audio version</code> and so on.`
}
},
{
type: 'paragraph',
data: {
text: 'Clean data is useful to sanitize, validate and process on the backend.'
}
},
{
type: 'delimiter',
data: {}
},
{
type: 'paragraph',
data: {
text: 'We have been working on this project more than three years. Several large media projects help us to test and debug the Editor, to make its core more stable. At the same time we significantly improved the API. Now, it can be used to create any plugin for any task. Hope you enjoy. 😏'
}
},
{
type: 'image',
data: {
url: 'https://codex.so/public/app/img/external/codex2x.png',
caption: '',
stretched: false,
withBorder: true,
withBackground: false,
}
},
]
},
onReady: function () {
saveButton.click();
},
onChange: function (api, event) {
console.log('something changed', event);
}
});
/**
* Saving button
*/
const saveButton = document.getElementById('saveButton');
/**
* Toggle read-only button
*/
const toggleReadOnlyButton = document.getElementById('toggleReadOnlyButton');
const readOnlyIndicator = document.getElementById('readonly-state');
/**
* Saving example
*/
saveButton.addEventListener('click', function () {
editor.save()
.then((savedData) => {
cPreview.show(savedData, document.getElementById('output'));
})
.catch((error) => {
console.error('Saving error', error);
});
});
/**
* Toggle read-only example
*/
toggleReadOnlyButton.addEventListener('click', async () => {
const readOnlyState = await editor.readOnly.toggle();
readOnlyIndicator.textContent = readOnlyState ? 'On' : 'Off';
});
</script>
<script>
/**
* Module to compose output JSON preview
*/
const cPreview = (function (module) {
/**
* Shows JSON in pretty preview
* @param {object} output - what to show
* @param {Element} holder - where to show
*/
module.show = function (output, holder) {
/** Make JSON pretty */
output = JSON.stringify(output, null, 4);
/** Encode HTML entities */
output = encodeHTMLEntities(output);
/** Stylize! */
output = stylize(output);
holder.innerHTML = output;
};
/**
* Converts '>', '<', '&' symbols to entities
*/
function encodeHTMLEntities(string) {
return string.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
}
/**
* Some styling magic
*/
function stylize(string) {
/** Stylize JSON keys */
string = string.replace(/"(\w+)"\s?:/g, '"<span class=sc_key>$1</span>" :');
/** Stylize tool names */
string = string.replace(/"(paragraph|quote|list|header|link|code|image|delimiter|raw|checklist|table|embed|warning)"/g, '"<span class=sc_toolname>$1</span>"');
/** Stylize HTML tags */
string = string.replace(/(<[\/a-z]+(>)?)/gi, '<span class=sc_tag>$1</span>');
/** Stylize strings */
string = string.replace(/"([^"]+)"/gi, '"<span class=sc_attr>$1</span>"');
/** Boolean/Null */
string = string.replace(/\b(true|false|null)\b/gi, '<span class=sc_bool>$1</span>');
return string;
}
return module;
})({});
</script>
<script>
const myClipboardEl = document.getElementById('copyButton')
myClipboardEl.addEventListener('copy.mdb.clipboard', () => {
this.textContent = 'Copied!';
})
</script>
<style>
.inline-code {
background: var(--light-pink);
color: var(--permanent-pink);
}
.cdx-marker {
background: #FF8F6B;
color: #fff;
}
.ce-popover__item--confirmation,
.ce-popover__item--confirmation:not(.ce-popover__item--no-visible-hover):hover {
background: var(--permanent-pink);
}
.cdx-checklist__item--checked .cdx-checklist__item-checkbox-check {
background: var(--main-indigo-color) !important;
border-color: var(--main-indigo-color) !important;
}
</style>
</body>
</html>