forked from DeFi-Coder-News-Letter/MlsetupBuilder-1
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
975 lines (954 loc) · 92.7 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
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
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MlsetupBuilder </title>
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src * 'unsafe-inline'; script-src *; img-src * data: 'unsafe-inline'; connect-src 'self'; worker-src blob: ;" ><!--
<meta http-equiv="X-Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'">-->
<meta name="author" content="Neurolinked">
<meta name="date" content="September 2021">
<!-- images on the help section
<link rel="preload" as="image" href="./images/system/mblends.jpg">
<link rel="preload" as="image" href="./images/system/prefs.jpg">
<link rel="preload" as="image" href="./images/system/repobuild.jpg">
<link rel="preload" as="image" href="./images/system/uncook.jpg">-->
<!-- end of help preload -->
<!-- Intro.js -->
<link rel="stylesheet" href="./node_modules/intro.js/minified/introjs.min.css" />
<link href="./node_modules/intro.js/themes/introjs-dark.css" rel="stylesheet">
<!-- End Intro -->
<!-- BOOtstrap 5 -->
<link href="./bs511/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="./bs511/js/bootstrap.bundle.min.js"></script>
<!--FontAwesome --><link rel="stylesheet" href="./public/fontawesome-free/css/all.min.css" />
<!--FontAwesome --><script type="text/javascript" src="./public/fontawesome-free/js/all.min.js" ></script>
<!-- If the require doesn't work, include first the jQuery file <script src="jquery-3.0.0.min.js"></script> -->
<script type="text/javascript" src='./js/jquery-3.6.0.min.js'></script>
<!--jstree library DB -->
<link rel="stylesheet" href="./js/jstree/themes/default/style.min.css" />
<link rel="stylesheet" href="./js/jstree/themes/default-dark/style.min.css" />
<script src="./js/jstree/jstree.min.js" data-source='https://www.jstree.com/' ></script>
<!--End jstree -->
<!--hardcoded help tree DB --><script src="./js/help.js" type="text/javascript"></script><!--hardcoded DB -->
<!--hardcoded normals DB //--><script src="./js/normList.js" type="text/javascript" ></script><!--hardcoded normal DB//-->
<!--hardcoded MaskList DB --><script src="./js/maskList.js" type="text/javascript"></script><!--hardcoded DB -->
<!--hardcoded default Model-only DB --><script src="./js/models.js" type="text/javascript"></script><!--hardcoded DB -->
<!--hardcoded default Model-only DB --><script src="./js/hairs.js" type="text/javascript"></script><!--hardcoded DB -->
<!--Material Tree --><script src="./js/materialTree.js"></script><!--Material Tree -->
<!--Tinny color libraries --><script src="./js/tinycolor.js" type="text/javascript" data-source='https://github.com/bgrins/TinyColor'></script>
<!-- Fabric.js http://fabricjs.com/ --><script src="./js/fabric.min.js" type="text/javascript" data-source='http://fabricjs.com/'></script>
<!--hardcoded microblends default //--><script type="text/javascript" src="./jsons/mbcore.json" ></script><!--hardcoded microblend DB//-->
<!--hardcoded material default //--><script type="text/javascript" src="./js/materialcore.js" ></script><!--hardcoded material DB//-->
<script type="text/javascript" src='./js/interface.js'></script>
<link rel="stylesheet" href="./css/base.css" />
<link rel="stylesheet" href="./css/iconmoon.css" />
<style id="addedCSS" type="text/css">.offcanvas-hair {top: 0;right: 0;border-left: 1px solid rgba(0,0,0,.2);transform: translateX(100%);}</style>
<style id="mlLibCSS" type="text/css"> </style>
<style id="minfoCSS" type="text/css"> </style>
</head>
<body class="px-1">
<div id="floatMat" class="d-none position-absolute"> </div>
<!--hardcoded material DB //--><script type="text/javascript" src="./jsons/material_overrides.json" ></script><!--hardcoded material DB//-->
<div id="dat-container"></div>
<!--THREE.js libraries -->
<script src='./js/threejs/build/three.min.js'></script>
<script src='./js/threejs/examples/js/controls/OrbitControls.js'></script>
<script type='module' src='./js/threejs/src/math/MathUtils.js'></script>
<script type='module' src='./js/threejs/src/math/Color.js'></script>
<script type='module' src='./js/threejs/src/scene/Fog.js'></script>
<!--
<script src='./js/threejs/examples/js/libs/fflate.min.js'></script>
<script src='./js/threejs/examples/js/loaders/FBXLoader.js'></script>
-->
<script src='./js/threejs/examples/js/loaders/GLTFLoader.js'></script>
<script src='./js/threejs/examples/js/libs/dat.gui.min.js'></script>
<!--model Library -->
<div class="offcanvas offcanvas-start offcanvas-models bg-dark bg-gradient text-light" tabindex="-1" id="ModelLibrary" aria-labelledby="ModelLibraryLabel" data-bs-backdrop="false">
<div class="offcanvas-header">
<h5 class="offcanvas-title " id="ModelLibraryLabel">Model Library</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-command">
<div>List of displayable models</div>
<textarea id="txtFolderScanner" class="d-none"></textarea>
<div class="input-group layer-4">
<input id="modelFinder" class="form-control " type="text" placeholder="Search in the models library" aria-label="models searcher">
<button type="button" id="modelFinderCleared" data-toggle="tooltip" title="Clear the search field" class="btn text-warning"><i class="fa fa-times"></i> </button>
</div>
<nav class="navbar navbar-expand-lg navbar-dark ">
<div class="container-fluid">
<button type="button" class="btn btn-outline-warning" id="mlPosX" title='Move me'><i class="fas fa-caret-right"></i></button>
<div class="btn-group mt-1" role="group" aria-label="models filtering">
<button type="button" id="modelFinderCloser" data-toggle="tooltip" title="Reset the tree to the default state" class="btn bg-transparent text-warning"><i class="fas fa-door-closed"></i> </button>
<button type="button" id="FolderScan" data-toggle="tooltip" title="Search and import custom folder assets" class="btn bg-transparent btn-outline-danger"><i class="fas fa-magnifying-glass"></i> Import</button>
<button type="button" class="btn btn-outline-warning" disabled>...category filtering...</button>
</div>
</div>
</nav>
</div>
<div class="offcanvas-body">
<div id="modelsTree" class="layer-1 px-1 pb-1 mt-2 shadow"></div>
</div>
</div>
<!--Notification Area -->
<div class="offcanvas offcanvas-bottom bg-dark bg-gradient text-light" tabindex="-1" id="NotificationCenter" aria-labelledby="NCLabel">
<div class="offcanvas-header bg-info">
<h5 class="offcanvas-title text-dark" id="NCLabel">Notification center</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body m-2 p-2"></div>
</div>
<!-- -->
<div class="offcanvas offcanvas-end offcanvas-hair bg-dark bg-gradient text-light" data-bs-backdrop="false" tabindex="-1" id="HairTool" aria-labelledby="HTLabel" >
<div class="offcanvas-header bg-dark">
<h5 class="offcanvas-title text-light" id="HTLabel">Hair tool</h5>
<button type="button" class="btn text-reset text-light" data-bs-dismiss="offcanvas" aria-label="Close"><i class="fa-solid fa-xmark"></i></button>
</div>
<div class="offcanvas-body m-2 p-2">
<span class='experimental'>
<div class="row gx-0 ">
<div class="col-11">
<div id="hairSwatches" class=''></div>
<div id="hairprofileBuilder" class="layer-1 rounded-0 "><!-- maximum shades will be 5 at the start-->
<span class="badge layer-0 w-100 rounded-0">Shades planner</span>
<div class="p-2">
<div class="row gx-0 mb-2"><span class="col-2 badge py-auto text-end pt-2 pe-2 eq-lay1">RootToTip</span><div class="col-10 grad" id="hRootToTip"> </div></div>
<div class="row gx-0" ><span class="col-2 badge py-auto text-end pt-2 pe-2 eq-lay1">ID</span><div class="col-10 grad" id="hID" > </div></div>
</div>
</div>
</div>
<div class="col-1 d-flex justify-content-center flex-wrap" id="sp-gradients">
<div></div>
<div></div>
<input type="color" class="d-block m-auto" id="bkgshades">
</div>
</div>
<div class="row gx-0 ">
<canvas class="m-1" style="max-width:256px;max-height:256px;border: 1px solid var(--layer-9);" height="256" width="256" id="hairTex" ></canvas>
</div>
</span>
</div>
</div>
<!-- offcanvas for model information -->
<div class="offcanvas offcanvas-end ocModelInfo bg-dark text-light" data-bs-backdrop="false" tabindex="-1" id="InfoModel" aria-labelledby="HTLabel" >
<div class="offcanvas-header border border-info p-1">
<h5 class="offcanvas-title text-info" id="HTLabel">Model Information</h5>
<button type="button" class="btn text-reset text-dark" data-bs-dismiss="offcanvas" aria-label="Close"><i class="fa-solid fa-xmark"></i></button>
</div>
<div class="offcanvas-body m-1 p-0 experimental">
<div>
</div><!--end first element -->
<div class="text-center">
<ul class="nav nav-pills layer-1 px-2" id="textureTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="info-tab" data-bs-toggle="tab" data-bs-target="#infotab" type="button" role="tab" aria-controls="infotab" aria-selected="false">information</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="masks-tab" data-bs-toggle="tab" data-bs-target="#maskstab" type="button" role="tab" aria-controls="maskstab" aria-selected="false">Masks</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="norm-tab" data-bs-toggle="tab" data-bs-target="#normtab" type="button" role="tab" aria-controls="Normal map" aria-selected="true">Normal map</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="uvmap-tab" data-bs-toggle="tab" data-bs-target="#uvmaptab" type="button" role="tab" aria-controls="uvmap map" aria-selected="true">UV map</button>
</li>
</ul>
<div class="tab-content" id="OffcanvasInfo">
<div class="tab-pane fade show active" id="infotab" role="tabpanel" aria-labelledby="info-tab">
<div>
<span class='d-block p-1'>Object Paths</span>
<form id='modelUserDataForm' class="p-2 eq-lay1">
<input type="text" class='d-none' id="lastCustomMDL" readonly />
<input type="number" class="d-none" id="maskLayer" value="0" min="0" max="20" />
<input type="number" class="d-none" id="maxLayers" value="19" min="0" max="19" />
<div class="input-group input-group-sm mb-2">
<span class="input-group-text bg-dark text-info border-info" ><i class="fas fa-cube"></i></span>
<input type="text" size="10" class="form-control" loaded="false" id="modelTarget" placeholder="path to the model" readonly />
<button id="modelCopyPath" type="button" class="btn btn-outline-info " data-toggle="tooltip" title="Copy folder path information on glb model"><i class="fas fa-copy"></i></button>
</div>
<div class="input-group input-group-sm border-secondary mb-2">
<span class="input-group-text bg-dark text-info border-info"><i class="fas fa-mask"></i></span>
<input type="text" class="form-control form-control-sm" id="masksTemplate" placeholder="path to the masks" readonly>
<!--<button id="CusModelTex" type="button" class="btn btn-outline-info " data-toggle="tooltip" title="Connect a masksset "><i class="fas fa-anchor"></i></button>-->
<button id="modelTexPath" type="button" class="btn btn-outline-info " data-toggle="tooltip" title="Copy folder path information for the maskset "><i class="fas fa-copy"></i></button>
</div>
<div class="input-group input-group-sm border-secondary">
<span class="input-group-text bg-dark text-info border-info"><i class="fas fa-compress-alt"></i></span>
<input type="text" class="form-control form-control-sm" id="normTemplate" placeholder="path to the normal map" readonly>
<!--
<button id="CusModelTex" type="button" class="btn btn-outline-info " data-toggle="tooltip" title="Connect a masksset "><i class="fas fa-anchor"></i></button>-->
<button id="modelNorPath" type="button" class="btn btn-outline-info " data-toggle="tooltip" title="Copy folder path information for normal map "><i class="fas fa-copy"></i></button>
</div>
</form>
</div>
<div id="theMinformator "class="d-flex align-items-start m-1 p-1 border border-info">
<div class="nav flex-column nav-pills me-3 " id="v-pills-sMesh" role="tablist" aria-orientation="vertical"> </div>
<div class="tab-content" id="v-pills-tabContent"> </div>
</div><!--end second element -->
</div>
<div class="tab-pane fade" id="normtab" role="tabpanel" aria-labelledby="norm-tab">
<canvas id="normalMe" class="my-1" ></canvas>
</div>
<div class="tab-pane fade " id="maskstab" role="tabpanel" aria-labelledby="masks-tab">
<div class="row no-gutters">
<div class="col-2" id="panelPain">
<div class="my-2">
<span class="d-block badge rounded-0 txt-secondary">layers</span>
<ul id="masksPanel" class="list-group rounded-0 list-group-horizontal justify-content-center">
<li class="list-group-item rounded-0">0</li>
<li class="list-group-item">1</li>
<li class="list-group-item">2</li>
<li class="list-group-item">3</li>
<li class="list-group-item">4</li>
<li class="list-group-item">5</li>
<li class="list-group-item">6</li>
<li class="list-group-item">7</li>
<li class="list-group-item">8</li>
<li class="list-group-item">9</li>
<li class="list-group-item">10</li>
<li class="list-group-item">11</li>
<li class="list-group-item">12</li>
<li class="list-group-item">13</li>
<li class="list-group-item">14</li>
<li class="list-group-item">15</li>
<li class="list-group-item">16</li>
<li class="list-group-item">17</li>
<li class="list-group-item">18</li>
<li class="list-group-item rounded-0">19</li>
</ul>
<div class="text-center my-1 py-1 layer-1 rounded">
<span class="d-block badge rounded-0 txt-secondary">Tools</span>
<span id="wipeMsk" class="btn btn-sm text-secondary" title="Revert to the last loaded"><i class="fas fa-eraser fa-2x"></i></span>
<span id="stepbackMsk" class="btn btn-sm text-secondary" title="Back one snapshot" ><i class="fa-solid fa-clock-rotate-left fa-2x"></i></span>
<hr class="dropdown-divider">
<span id="snapsMsk" class="btn btn-sm text-secondary" title="Take a snapshot"><i class="fa-solid fa-camera-retro fa-2x"></i></span>
<a href="#" id="expMsk" class="btn btn-sm text-secondary" title="Export the current image"><i class="fas fa-file-export fa-2x"></i></a>
</div>
<div class="d-flex justify-content-center my-1 py-1 layer-1 rounded">
<input id="strokeMsk" type="range" min="0.2" max="50" value="0.2" step="0.1">
</div>
<div class="d-flex justify-content-center my-1 py-1 layer-1 rounded">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="gScalePaint">
<label class="form-check-label" for="gScalePaint">Grayscale</label>
</div>
</div>
<div id="resetShades" class="d-flex justify-content-center my-1 py-1 layer-1 rounded">
<span class="choose" data-color="000000" style="background-color:#000000"> </span>
<span class="choose" data-color="FF0000" style="background-color:#FF0000"> </span>
</div>
<div class="my-1 py-1 layer-1 rounded">
<span id="maskoolor" class="choose mx-auto d-block" data-color="800000" style="background-color:#800000"> </span>
<input id="slidemask" type="range" min="0" max="255" value="128" step="1">
</div>
<div class="my-2 border outline-secondary rounded" style="min-height:2rem;">
<span class="d-block badge rounded-0 txt-secondary"><i class="fa-solid fa-camera-retro"></i> States</span>
<div id="Snapshots" class="py-1"> </div>
</div>
</div>
</div>
<div class="col-10">
<canvas id="maskPainter" class="my-1" width="768" height="768" ></canvas>
</div>
</div>
</div>
<div class="tab-pane fade" id="uvmaptab" role="tabpanel" aria-labelledby="uvmap-tab">
<div class="row no-gutters">
<div class="col-2">
<div class="d-grid my-2">
<button type="button" class="btn btn-sm btn-outline-warning" id="UVGen"><i class="fa-solid fa-hammer"></i> Build UVs</button>
</div>
<div id="unChecksMesh" class=" mx-auto"> </div>
<div class="d-grid">
<a href="#" class="btn btn-sm btn-outline-danger" id="UVSave"><i class="fa-solid fa-file-export"></i> Export</a>
</div>
</div>
<div class="col-10">
<canvas id="UVMapMe" class="my-1 experimental" width="768" height="768"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- -->
<div class="offcanvas offcanvas-end bg-dark bg-gradient text-light" tabindex="-1" id="HowDoI" aria-labelledby="HDILabel" data-bs-backdrop="false">
<div class="offcanvas-header bg-info">
<h5 class="offcanvas-title text-dark" id="HDILabel">Documentation</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body m-2 p-2">
<div id="HelpTree" class="layer-1 px-1 pb-1 mt-2 shadow rounded "></div>
</div>
</div>
<div id="interface">
<span id="withbones"><i class="fa-solid fa-bone fa-2x"></i> <i class="icon-normals fa-2x"></i></span><!-- -->
<div id="withthacanvas">
<canvas id="thacanvas"></canvas>
<div id="modelsInformation" class="p-2 rounded layer-1">
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
<input type="checkbox" class="d-none" id="prefloaded" disabled />
<input class="d-none" type="text" name="prefxunbundle" id="prefxunbundle" val="" />
<button id="notyCounter" type="button" class="btn btn-outline-info btn-sm text-start" data-bs-toggle="offcanvas" data-bs-target="#NotificationCenter" data-toggle="tooltip" title="Click to see notification messages and errors"><i class="fas fa-exclamation-triangle"></i> <span class="badge bg-warning text-dark"></span></button>
<input type="checkbox" class="btn-check" id="onlyOneSide" autocomplete="off"><label class="btn btn-outline-warning" for="onlyOneSide">1-side</label>
<input type="checkbox" data-toggle="tooltip" title="display wireframe" class="btn-check" id="wireFrame" autocomplete="off"><label class="btn btn-outline-warning" for="wireFrame"><i class="fas fa-border-none"></i></label>
<a class="btn btn-outline-info" href="#" id="takeashot" ><i class="fas fa-camera-retro"></i></a>
</div>
<div class="btn-group ms-2 me-1" role="group" aria-label="model loading">
<button type="button" data-bs-toggle="offcanvas" data-bs-target="#ModelLibrary" class="btn btn-out-Prim">
<span class="icon-mesh text-warning"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span></span> Library</button>
<button type="button" id="btnMdlLoader" data-toggle="tooltip" title="load or reload the last 3d model" class="btn btn-out-Prim"><i class="fas fa-redo"></i></button>
</div>
<div class="btn-group" role="group" aria-label="model loading">
<button type="button" id="cstMdlLoader" data-toggle="tooltip" title="Upload in the viewport a 3d asset" class="btn btn-out-Prim"><i class="fas fa-box-open"></i></button>
<!--<button type="button" id="FolderScan" data-toggle="tooltip" title="Search and import assets" class="btn btn-outline-danger"><i class="fas fa-magnifying-glass"></i></button>-->
</div>
<div class="btn-group " role="group" aria-label="information and data">
<button class="btn btn-outline-info" type="button" data-bs-toggle="offcanvas" data-bs-target="#InfoModel" ><i class="fa-solid fa-hammer"></i> <i class="fas fa-info"></i></button>
</div>
<i id="paintActive" class="text-secondary fa-solid fa-brush fa-2x ms-2 align-bottom"></i>
</div>
</div>
<div id="Filemanager" class="p-2 text-white bs-dark layer-1 rounded" style="display:grid;">
<div>
<div class="input-group input-group-sm">
<input type="file" class="form-control" accept=".json" placeholder="Load JSON mlsetup" id="importTech" />
<button class="btn btn-Prim" type="button" id="TheMagicIsHere" data-toggle="tooltip" data-bs-placement="right" title="Import a json file"><i class="fas fa-file-upload"></i></button>
</div>
<textarea id="passaggio" class="d-none"></textarea>
</div>
<div id="pBar" class="progress fade mx-2">
<div class="progress-bar progress-bar-striped bg-danger progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>
<div>
<div class="input-group input-group-sm">
<input type="text" value="" class="form-control " aria-label="emptyLevel" id="nametoexport" placeholder="filename without extension" accept=".json" />
<div class="dropdown">
<button class="btn btn-sm dropdown-toggle btn-Prim rounded-0 p-1" type="button" id="exportversions" data-bs-toggle="dropdown" aria-expanded="false" title="Export the actual layer structure to json format to be transformed by the Wkit family tools in .mlsetup" ><i class="fas fa-save"></i> Export</button>
<ul id="xport_dm" class="dropdown-menu" aria-labelledby="exportversions">
<li><a class="dropdown-item xportJSON" href="#" id="exportJason_v2" data-version="2">Json v0.0.2 (Wkit 8.7)</a></li>
<li><a class="dropdown-item xportJSON" href="#" id="exportJason_v1" data-version="1">Json v0.0.1 (Wkit 8.5)</a></li>
<li><a class="dropdown-item xportJSON" href="#" id="exportJason" data-version="0">pre-Wkit 8.5</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="MlEditor" class="text-white layer-1 rounded">
<span class="badge w-100 rounded-0 ">Layers</span>
<div class="d-grid"><button class="btn btn-out-Prim btn-sm" id="applytoMyLayer" type="button" data-toggle="tooltip" data-bs-placement="left" title="Apply edits to the current selected layer"><i class="fas fa-paint-roller"></i> Apply edits</button></div>
<ul id="layeringsystem" class="layer-2">
<li data-labels="(null_null) unused" class="" data-mattile="1.0" data-material="base\surfaces\materials\special\unused.mltemplate" data-opacity="1.0" data-color="null_null" data-normal="null" data-roughin="null" data-roughout="null" data-metalin="null" data-metalout="null" data-offsetu="0.0" data-offsetv="0.0" data-mblend="base\surfaces\microblends\default.xbm" data-mbtile="1.0" data-mbcontrast="0.0" data-mbnormal="1.0" data-mboffu="0" data-mboffv="0" >0</li>
<li data-labels="(null_null) unused" class="" data-mattile="1.0" data-material="base\surfaces\materials\special\unused.mltemplate" data-opacity="1.0" data-color="null_null" data-normal="null" data-roughin="null" data-roughout="null" data-metalin="null" data-metalout="null" data-offsetu="0.0" data-offsetv="0.0" data-mblend="base\surfaces\microblends\default.xbm" data-mbtile="1.0" data-mbcontrast="0.0" data-mbnormal="1.0" data-mboffu="0" data-mboffv="0" >1</li>
<li data-labels="(null_null) unused" class="" data-mattile="1.0" data-material="base\surfaces\materials\special\unused.mltemplate" data-opacity="1.0" data-color="null_null" data-normal="null" data-roughin="null" data-roughout="null" data-metalin="null" data-metalout="null" data-offsetu="0.0" data-offsetv="0.0" data-mblend="base\surfaces\microblends\default.xbm" data-mbtile="1.0" data-mbcontrast="0.0" data-mbnormal="1.0" data-mboffu="0" data-mboffv="0" >2</li>
<li data-labels="(null_null) unused" class="" data-mattile="1.0" data-material="base\surfaces\materials\special\unused.mltemplate" data-opacity="1.0" data-color="null_null" data-normal="null" data-roughin="null" data-roughout="null" data-metalin="null" data-metalout="null" data-offsetu="0.0" data-offsetv="0.0" data-mblend="base\surfaces\microblends\default.xbm" data-mbtile="1.0" data-mbcontrast="0.0" data-mbnormal="1.0" data-mboffu="0" data-mboffv="0" >3</li>
<li data-labels="(null_null) unused" class="" data-mattile="1.0" data-material="base\surfaces\materials\special\unused.mltemplate" data-opacity="1.0" data-color="null_null" data-normal="null" data-roughin="null" data-roughout="null" data-metalin="null" data-metalout="null" data-offsetu="0.0" data-offsetv="0.0" data-mblend="base\surfaces\microblends\default.xbm" data-mbtile="1.0" data-mbcontrast="0.0" data-mbnormal="1.0" data-mboffu="0" data-mboffv="0" >4</li>
<li data-labels="(null_null) unused" class="" data-mattile="1.0" data-material="base\surfaces\materials\special\unused.mltemplate" data-opacity="1.0" data-color="null_null" data-normal="null" data-roughin="null" data-roughout="null" data-metalin="null" data-metalout="null" data-offsetu="0.0" data-offsetv="0.0" data-mblend="base\surfaces\microblends\default.xbm" data-mbtile="1.0" data-mbcontrast="0.0" data-mbnormal="1.0" data-mboffu="0" data-mboffv="0" >5</li>
<li data-labels="(null_null) unused" class="" data-mattile="1.0" data-material="base\surfaces\materials\special\unused.mltemplate" data-opacity="1.0" data-color="null_null" data-normal="null" data-roughin="null" data-roughout="null" data-metalin="null" data-metalout="null" data-offsetu="0.0" data-offsetv="0.0" data-mblend="base\surfaces\microblends\default.xbm" data-mbtile="1.0" data-mbcontrast="0.0" data-mbnormal="1.0" data-mboffu="0" data-mboffv="0" >6</li>
<li data-labels="(null_null) unused" class="" data-mattile="1.0" data-material="base\surfaces\materials\special\unused.mltemplate" data-opacity="1.0" data-color="null_null" data-normal="null" data-roughin="null" data-roughout="null" data-metalin="null" data-metalout="null" data-offsetu="0.0" data-offsetv="0.0" data-mblend="base\surfaces\microblends\default.xbm" data-mbtile="1.0" data-mbcontrast="0.0" data-mbnormal="1.0" data-mboffu="0" data-mboffv="0" >7</li>
<li data-labels="(null_null) unused" class="" data-mattile="1.0" data-material="base\surfaces\materials\special\unused.mltemplate" data-opacity="1.0" data-color="null_null" data-normal="null" data-roughin="null" data-roughout="null" data-metalin="null" data-metalout="null" data-offsetu="0.0" data-offsetv="0.0" data-mblend="base\surfaces\microblends\default.xbm" data-mbtile="1.0" data-mbcontrast="0.0" data-mbnormal="1.0" data-mboffu="0" data-mboffv="0" >8</li>
<li data-labels="(null_null) unused" class="" data-mattile="1.0" data-material="base\surfaces\materials\special\unused.mltemplate" data-opacity="1.0" data-color="null_null" data-normal="null" data-roughin="null" data-roughout="null" data-metalin="null" data-metalout="null" data-offsetu="0.0" data-offsetv="0.0" data-mblend="base\surfaces\microblends\default.xbm" data-mbtile="1.0" data-mbcontrast="0.0" data-mbnormal="1.0" data-mboffu="0" data-mboffv="0" >9</li>
<li data-labels="(null_null) unused" class="" data-mattile="1.0" data-material="base\surfaces\materials\special\unused.mltemplate" data-opacity="1.0" data-color="null_null" data-normal="null" data-roughin="null" data-roughout="null" data-metalin="null" data-metalout="null" data-offsetu="0.0" data-offsetv="0.0" data-mblend="base\surfaces\microblends\default.xbm" data-mbtile="1.0" data-mbcontrast="0.0" data-mbnormal="1.0" data-mboffu="0" data-mboffv="0" >10</li>
<li data-labels="(null_null) unused" class="" data-mattile="1.0" data-material="base\surfaces\materials\special\unused.mltemplate" data-opacity="1.0" data-color="null_null" data-normal="null" data-roughin="null" data-roughout="null" data-metalin="null" data-metalout="null" data-offsetu="0.0" data-offsetv="0.0" data-mblend="base\surfaces\microblends\default.xbm" data-mbtile="1.0" data-mbcontrast="0.0" data-mbnormal="1.0" data-mboffu="0" data-mboffv="0" >11</li>
<li data-labels="(null_null) unused" class="" data-mattile="1.0" data-material="base\surfaces\materials\special\unused.mltemplate" data-opacity="1.0" data-color="null_null" data-normal="null" data-roughin="null" data-roughout="null" data-metalin="null" data-metalout="null" data-offsetu="0.0" data-offsetv="0.0" data-mblend="base\surfaces\microblends\default.xbm" data-mbtile="1.0" data-mbcontrast="0.0" data-mbnormal="1.0" data-mboffu="0" data-mboffv="0" >12</li>
<li data-labels="(null_null) unused" class="" data-mattile="1.0" data-material="base\surfaces\materials\special\unused.mltemplate" data-opacity="1.0" data-color="null_null" data-normal="null" data-roughin="null" data-roughout="null" data-metalin="null" data-metalout="null" data-offsetu="0.0" data-offsetv="0.0" data-mblend="base\surfaces\microblends\default.xbm" data-mbtile="1.0" data-mbcontrast="0.0" data-mbnormal="1.0" data-mboffu="0" data-mboffv="0" >13</li>
<li data-labels="(null_null) unused" class="" data-mattile="1.0" data-material="base\surfaces\materials\special\unused.mltemplate" data-opacity="1.0" data-color="null_null" data-normal="null" data-roughin="null" data-roughout="null" data-metalin="null" data-metalout="null" data-offsetu="0.0" data-offsetv="0.0" data-mblend="base\surfaces\microblends\default.xbm" data-mbtile="1.0" data-mbcontrast="0.0" data-mbnormal="1.0" data-mboffu="0" data-mboffv="0" >14</li>
<li data-labels="(null_null) unused" class="" data-mattile="1.0" data-material="base\surfaces\materials\special\unused.mltemplate" data-opacity="1.0" data-color="null_null" data-normal="null" data-roughin="null" data-roughout="null" data-metalin="null" data-metalout="null" data-offsetu="0.0" data-offsetv="0.0" data-mblend="base\surfaces\microblends\default.xbm" data-mbtile="1.0" data-mbcontrast="0.0" data-mbnormal="1.0" data-mboffu="0" data-mboffv="0" >15</li>
<li data-labels="(null_null) unused" class="" data-mattile="1.0" data-material="base\surfaces\materials\special\unused.mltemplate" data-opacity="1.0" data-color="null_null" data-normal="null" data-roughin="null" data-roughout="null" data-metalin="null" data-metalout="null" data-offsetu="0.0" data-offsetv="0.0" data-mblend="base\surfaces\microblends\default.xbm" data-mbtile="1.0" data-mbcontrast="0.0" data-mbnormal="1.0" data-mboffu="0" data-mboffv="0" >16</li>
<li data-labels="(null_null) unused" class="" data-mattile="1.0" data-material="base\surfaces\materials\special\unused.mltemplate" data-opacity="1.0" data-color="null_null" data-normal="null" data-roughin="null" data-roughout="null" data-metalin="null" data-metalout="null" data-offsetu="0.0" data-offsetv="0.0" data-mblend="base\surfaces\microblends\default.xbm" data-mbtile="1.0" data-mbcontrast="0.0" data-mbnormal="1.0" data-mboffu="0" data-mboffv="0" >17</li>
<li data-labels="(null_null) unused" class="" data-mattile="1.0" data-material="base\surfaces\materials\special\unused.mltemplate" data-opacity="1.0" data-color="null_null" data-normal="null" data-roughin="null" data-roughout="null" data-metalin="null" data-metalout="null" data-offsetu="0.0" data-offsetv="0.0" data-mblend="base\surfaces\microblends\default.xbm" data-mbtile="1.0" data-mbcontrast="0.0" data-mbnormal="1.0" data-mboffu="0" data-mboffv="0" >18</li>
<li data-labels="(null_null) unused" class="" data-mattile="1.0" data-material="base\surfaces\materials\special\unused.mltemplate" data-opacity="1.0" data-color="null_null" data-normal="null" data-roughin="null" data-roughout="null" data-metalin="null" data-metalout="null" data-offsetu="0.0" data-offsetv="0.0" data-mblend="base\surfaces\microblends\default.xbm" data-mbtile="1.0" data-mbcontrast="0.0" data-mbnormal="1.0" data-mboffu="0" data-mboffv="0" >19</li>
</ul>
<div class="text-center">
<div class="btn-group btn-group-sm m-1 " role="group" aria-label="Layers randomizer">
<button type="button" class="btn btn-outline-warning" id="layerRandomizer" data-toggle="tooltip" title="Randomize layers"><i class="fas fa-random"></i></button>
<input id="layerRandomCfg" class="form-control rounded-0 border border-warning" type="text" placeholder="Ex. 0-19 or 0,2,7-13" aria-label="models searcher" />
<!--<button type="button" class="btn btn-outline-warning" id="randomTrScribe" data-toggle="tooltip" title="Transcribe actual enabled layer setup"><i class="fab fa-buffer"></i></button>
<button type="button" class="btn btn-outline-warning" id="randomicOpt" data-bs-toggle="modal" data-toggle="tooltip" data-bs-target="#RandOptmodal" title="Option setting for the randomizer"><i class="fas fa-cogs"></i></button>
<!--class="dropdown d-inline-block " -->
<div class="btn-group dropend" role="group">
<button id="dropRandOpt" type="button" class="btn btn-sm btn-outline-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" title="Option setting for the randomizer" data-bs-auto-close="outside"><i class="fas fa-cogs"></i> </button>
<div id="randOptbody" aria-labelledby="dropRandOpt" class="dropdown-menu eq-lay1 border border-warning p-2" style="width:22rem;">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="rndOnOff">
<label class="form-check-label" for="rndOnOff"><details><summary>Turn On/Off layers</summary>It enable activation of un-active layers ( un-active layers are identified by Opacity=0 ).</details></label>
</div><!--
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="rndAll" disabled>
<label class="form-check-label" for="rndAll" ><details><summary>Randomize all layers</summary>Without this option ONLY the already active layers can obtain randomized values.</details></label>
</div> //-->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="rndMbWild">
<label class="form-check-label" for="rndMbWild"><details><summary>Wild randomize microblends</summary>On a basis, the microblend are setup to use the flat default microblend, the last two are assigned with dirts and only one is chosen to get a possible randomized one. Enabling this option remove this system and just randomize every layer filtered from the previous options.</details></label>
</div>
</div>
</div>
</div>
</div>
<div class="my-2 text-center">
<div class="btn-group">
<button class="btn btn-sm btn-outline-secondary " type="button" id="clean-Layer" data-toggle="tooltip" data-bs-placement="bottom" title="Reset to blank the selected layer"><i class="fas fa-eraser fa-2x"></i></button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-end text-right">
<li><a class="dropdown-item" href="#" id="wipe-layer"><i class="fas fa-eraser"></i> wipe all layers</a></li>
<li><a class="dropdown-item" href="#" id="wash-layers"><i class="fas fa-soap"></i> clean all layers</a></li>
</ul>
</div>
<button class="btn btn-sm btn-outline-warning" type="button" id="actlast-Layer" data-toggle="tooltip" data-bs-placement="bottom" title="Activate the last unactive layer"><i class="fas fa-plug fa-2x"></i></button>
<!--<button class="btn btn-outline-danger" type="button" id="wipe-layer" data-toggle="tooltip" data-bs-placement="bottom" title="Wipe all layers configuration"><i class="fas fa-soap"></i> </button>-->
</div>
<div class="twoColGrid">
<div class="layer-1 m-2"><span class="badge w-100 rounded-0 "> Ratio </span>
<input type="number" class="form-control rounded-0" data-toggle="tooltip" title="Horizontal/vertical ratio of the application of material maps over the model. value lower than 1 stretch horizontally, value higher than 1 stretch vertically" id="layerRatio" value="1.0" step="0.01">
</div>
<div class="layer-1 m-2"><span class="badge w-100 rounded-0 "> Normal </span>
<div class="form-check form-switch d-flex justify-content-center">
<input class="form-check-input " type="checkbox" role="switch" id="useNormals" checked>
<!--<label class="form-check-label ml-2" for="flexSwitchCheckDefault">ON</label>-->
</div>
</div>
</div>
</div>
<div id="layer_settings" class="layer-1 rounded">
<span class="badge w-100 rounded-0">Material</span>
<div id="matdisplay" class=" no-gutters layer-3" >
<img id="materialChoser" src="images/material/unused.jpg" width="170" height="170" data-bs-toggle="modal" data-bs-target="#materialModal" title="Click to choose a new material for the selected layer" />
<div>
<div>
<div>
<div class="input-group input-group-sm">
<div class="badge my-auto">Tiles</div>
<input type="number" class="form-control rounded-0" id="layerTile" value="1.0" step="0.1" >
</div>
<div class="input-group input-group-sm">
<div class="badge my-auto">Opacity</div>
<input type="number" class="form-control form rounded-0" id="layerOpacity" value="1.0" step="0.01" min="0">
</div>
</div>
<div class="eq-lay2">
<div class="input-group input-group-sm">
<div class="badge my-auto">Offset U</div>
<input type="number" class="form-control rounded-0" id="layerOffU" value="0.0" step="0.01">
</div>
<div class="input-group input-group-sm">
<div class="badge my-auto">Offset V</div>
<input type="number" class="form-control rounded-0" id="layerOffV" value="0.0" step="0.01">
</div>
</div>
</div>
</div>
</div>
<details id="legacyMatSector"><summary id="materialSummary" >unused</summary>
<div class="input-group mb-1">
<input type="text" class="form-control rounded-0 " id="matInput" data-default="base\surfaces\materials\special\unused.mltemplate" value="base\surfaces\materials\special\unused.mltemplate">
</div>
<div class="input-group layer-4">
<input id="legacyMatFinder" class="form-control" type="text" placeholder="Filter the materials" aria-label="material searcher">
<button type="button" id="legacyMatFinderCleared" data-toggle="tooltip" title="Clear the search field" class="btn text-warning"><i class="fa fa-times"></i> </button>
</div>
<div id="legacyMaterial" >
<ul class="p-0" id="materiaList">
</ul>
</div>
</details>
<div class="twoColGrid layer-1">
<div>
<span class="badge w-100 rounded-0 ">Normals</span>
<select class="form-select rounded-0" id="layerNormal" aria-label="microblends selection lists">
<optgroup id="defaultNormal" label='Reset'>
<option value="null">null</option>
</optgroup>
<optgroup id="Norm_Pow_values" label='Materials'></optgroup>
</select>
</div>
<div>
<span class="badge w-100 rounded-0 ">Metal Out</span>
<select class="form-select rounded-0" id="layerMetalOut" aria-label="metallness Out">
<optgroup id="defaultMetalOut" label='Reset'>
<option value="null">null</option>
</optgroup>
<optgroup id="Metal_Out_values" label='material'></optgroup>
</select>
</div>
<div>
<span class="badge w-100 rounded-0 ">Rough In</span>
<select class="form-select rounded-0" id="layerRoughIn" aria-label="metallness Out">
<optgroup label="Reset"><option value="null" >null</option></optgroup>
<optgroup id="Rough_In_values" label="Material"></optgroup>
</select>
</div>
<div>
<span class="badge w-100 rounded-0 ">Rough Out</span>
<select class="form-select rounded-0" id="layerRoughOut" aria-label="RoughnessOut">
<optgroup label="Reset"><option value="null" >null</option></optgroup>
<optgroup label="Material specific" id="Rough_out_values"></optgroup>
</select>
</div>
</div>
<div id="colorGrid">
<div><span class="badge w-100 rounded-0">ColorCode</span><input type="text" class="form-control rounded-0" id="layerColor" value="null_null" maxlength="13"></div>
<div><span class="badge w-100 rounded-0">Color list</span>
<select class="form-select rounded-0" id="LayerColorL" aria-label="microblends selection lists">
<option selected disabled>select a color</option>
<optgroup id="defaultcolors" label='Default'>
<option style="color:rgb(50%,50%,50%);" value="rgb(50%,50%,50%);" >null_null</option>
</optgroup>
<optgroup id="materialcolors" label='Materials'></optgroup>
</select>
</div>
<div><span class="badge w-100 rounded-0" id="colorPntage">rgb();</span><span class="badge border border-secondary w-100 rounded-0 tint" > </span></div>
<div class="text-center"><span class="badge w-100 rounded-0"> </span>
<!--<button type="button" id="" data-toggle="tooltip" title="resort colors by" class="btn btn-sm btn-outline-warning"><i class="fa-solid fa-sort"></i></button>-->
<input type="checkbox" class="btn-check" id="colororder" checked autocomplete="off">
<label class="btn btn-outline-warning btn-sm" for="colororder"><i class="fa-solid fa-sort"></i></label>
</div>
</div>
<div id="colordisplay" class="layer-1">
<div id="cagecolors"><span style="background-color:rgb(50%,50%,50%);" title='null_null' > </span></div>
</div>
</div>
<div id="micropanel" class="layer-1 rounded">
<div>
<span class="badge w-100 rounded-0">µblends</span>
<div class="input-group input-group-sm mb-1">
<input type="text" class="form-control rounded-0 " id="mbInput" data-default="base\surfaces\microblends\default.xbm" value="base\surfaces\microblends\default.xbm" />
<button class="btn btn-outline-danger rounded-0" id="resetMB" data-toggle='tooltip' title="Reset to default microblend" type="button"><i class="fas fa-times"></i></button>
</div>
<select class="form-select rounded-0" id="mbSelect" aria-label="microblends selection lists">
<optgroup label='core'>
<option data-package="source" data-thumbnail="./images/default.gif" value="base\surfaces\microblends\default.xbm" selected >default</option>
</optgroup>
</select>
<span class="badge w-100 rounded-0 ">Preview</span>
<img id="mb-preview" style="background-color:#000;" alt="microblend preview" src='./images/default.gif' >
<div class='row gx-0'>
<div class="col-10 m-0">
<input id="bg-changer" type="color" value="#000000" data-toggle="tooltip" title="Background color check for microblend">
</div>
<div class="col-2 m-0">
<div class="btn-group btn-group-sm w-100" role="group" aria-label="microblend fx">
<button class="btn btn-outline-info rounded-0" id="cleanFX" data-toggle='tooltip' title="Cleanup effects on microblend preview" type="button"><i class="fas fa-chalkboard"></i></button>
</div>
<div class="btn-group btn-group-sm w-100" role="group" aria-label="microblend fx">
<button class="btn btn-outline-warning rounded-0" id="lumiFX" data-toggle='tooltip' title="Luminosity FX" type="button"><i class="fas fa-lightbulb"></i></button>
</div>
</div>
</div>
<div id="MicroblendsLibrary">
<span class="badge w-100 rounded-0" >core microblends</span>
<div id="microdisplay" class="layer-1">
<div id="cagethemicroblends" >
<li style="background-image:url('./images/thumbs/default.gif');" data-package='source' data-toggle="tooltip" title="default"> </li>
</div>
</div>
</div>
<div id="CustMicroblendsGallery">
<span class="badge w-100 rounded-0" >custom microblends <div class="btn-group btn-tiny" role="group" aria-label="Custom microblends button">
<button type="button" id="btn_dis_cBlend" class="btn btn-outline-warning"><i class="fa-solid fa-eye"></i></button>
</div></span>
<div id="cu_mu_display" class="layer-1 d-none">
<div id="cagetheCuMBlends" ></div>
</div>
</div>
<!-- microblends-data -->
<div class="input-group input-group-sm layer-1 my-1"> <div class="badge my-auto">µblend Tile</div> <input type="number" class="form-control rounded-0 " id="mbTile" value="1.0" step="0.01"> </div>
<div class="input-group input-group-sm layer-1 mb-1">
<div class="badge my-auto">µblend contrast</div>
<input type="number" class="form-control rounded-0" id="mbCont" value="0.0" step="0.1" data-toggle="tooltip" title="It affect the blending of the microblend trasparency (from 0 to 1) lower value -> lower blending of the transparency, higher value -> better blending and less crisp blending edge" >
</div>
<div class="input-group input-group-sm layer-1 mb-1">
<div class="badge my-auto">µblend normals</div>
<input type="number" class="form-control rounded-0" id="mbNorm" value="1.0" step="0.1">
</div>
<div class="layer-3 m-1 p-1">
<span class="badge w-100 rounded-0 ">µblend offset</span>
<div class="treeColGrid my-1">
<div class="input-group input-group-sm">
<span class="input-group-text rounded-0 bg-dark text-warning border-0">U</span> <input type="number" class="form-control rounded-0 text-end" id="mbOffU" value="0" step="0.01">
</div>
<div class="input-group input-group-sm">
<span class="input-group-text rounded-0 bg-dark text-warning border-0">V</span> <input type="number" class="form-control rounded-0 text-end" id="mbOffV" value="0" step="0.01">
</div>
<button class="btn btn-Prim rounded-0 btn-sm" data-bs-toggle="modal" data-bs-target="#AimBlend" type="button"><i class="fas fa-crosshairs"></i> µ Aim</button>
</div><!--
<div class="d-grid">
</div>
--></div>
</div>
<div id="versionDisplay">
<a href="#" class="d-none" data-bs-toggle="modal" data-bs-target="#LicenseModal">License</a>
<a href="#" class="d-none" data-bs-toggle="offcanvas" data-bs-target="#HowDoI">?</a>
<a href="#" class="d-none" data-bs-toggle="modal" data-bs-target="#unCookModal">unCook</a>
<a href="#" class="d-none" data-bs-toggle="offcanvas" data-bs-target="#HairTool">Hair Tool</a>
<a href="#" class="d-none" data-bs-toggle="modal" data-bs-target="#uncookMicro">Microblend Build</a>
</div>
</div>
</div>
</div>
<div class="modal fade " id="materialModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl rounded-0">
<div class="modal-content rounded-0">
<div class="modal-body p-0">
<div>
<div class="input-group">
<input type="text" id="matModFinder" class="form-control rounded-0" placeholder="filter by material name" aria-label="Material name">
<!--<button class="btn btn-Prim rounded-0" type="button" id="matModSearch">search</button>-->
<button type="button" id="matModFinderCleared" data-bs-toggle="tooltip" title="clean-up the searching field" class="btn text-warning layer-3"><i class="fa fa-times"></i> </button>
</div>
</div>
<div ><div id="cagemLibrary" class="matColGrid_spaced" > </div></div>
<div id='matfindresults' class="p-1 pb-2"></div>
</div>
</div>
</div>
</div>
<div class="modal fade " id="masksModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl rounded-0">
<div class="modal-content rounded-0">
<div class="modal-header bg-secondary text-warning p-1 border-bottom-0">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<div>
<div class="input-group input-group-sm">
<button type="button" id="masksFinderClearer" data-bs-toggle="tooltip" title="clean-up the searching field" class="btn text-warning layer-3"><i class="fa fa-eraser"></i></button>
<input type="text" id="masksCFinder" class="form-control rounded-0" placeholder="search in the masklist" aria-label="Masks paths">
<!--<button class="btn btn-Prim rounded-0" type="button" id="matModSearch">search</button>-->
</div>
</div>
<div>
<div class="input-group input-group-sm">
<span class="input-group-text bg-secondary text-dark border-0 rounded-0"><i class="fas fa-mask"></i></span>
<span id="lblmaskselected" class="input-group-text text-secondary flex-grow-1 border-0 rounded-0 fs-80">none</span>
<button type="button" id="choseThisMask" class="btn btn-outline-error rounded-0"><i class="fa fa-link"></i> Choose</button>
</div>
<select id="customMaskSelector" class="form-select rounded-0 p-0" size="20" aria-label="size 3 select example">
</select>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade " id="unCookModal" data-bs-backdrop="static" data-bs-keyboard="true" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl rounded-0">
<div class="modal-content rounded-0">
<div class="modal-body p-0 ">
<div class="row no-gutters">
<div id='uncookCheck' class="col-7 p-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="arc_NC3" checked>
<span class="badge bg-warning text-dark">basegame_3_nightcity.archive</span>
</div>
<div class="progress border border-dark my-1 layer-0" style="height: 1.5rem;" >
<div id="uncook_step1" class="progress-bar bg-warning progress-bar-striped progress-bar-animated text-dark" style="width:0%;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
<div id="uncook_step2" class="border-start border-dark progress-bar bg-normal progress-bar-striped progress-bar-animated text-dark" style="width:0%;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="arc_AP4" checked>
<span class="badge bg-warning text-dark">basegame_4_appearance.archive</span>
</div>
<div class="progress border border-dark my-1 layer-0" style="height: 1.5rem;" >
<div id="uncook_step3" class="progress-bar bg-warning progress-bar-striped progress-bar-animated text-dark" style="width:0%;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
<div id="uncook_step4" class="border-start border-dark progress-bar bg-normal progress-bar-striped progress-bar-animated text-dark" style="width:0%;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="arc_GA4" checked>
<span class="badge bg-warning text-dark">basegame_4_gamedata.archive</span>
</div>
<div class="progress border border-dark my-1 layer-0" style="height: 1.5rem;" >
<div id="uncook_step5" class="progress-bar bg-warning progress-bar-striped progress-bar-animated text-dark" style="width:0%;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
<div id="uncook_step6" class="border-start border-dark progress-bar bg-normal progress-bar-striped progress-bar-animated text-dark" style="width:0%;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
<!-- TODO to this code-->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="arc_DEC4" checked>
<span class="badge bg-warning text-dark">Decal materials</span>
</div>
<div class="progress border border-dark my-1 layer-0" style="height: 1.5rem;" >
<div id="uncook_step7" class="border-start border-dark progress-bar bg-success progress-bar-striped progress-bar-animated text-dark" style="width:0%;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
<div id="uncook_step8" class="border-start border-dark progress-bar bg-warning progress-bar-striped progress-bar-animated text-dark" style="width:0%;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
<!-- TODO to this code-->
<div class="text-center mt-3"><i id="uncookCog" class="fas fa-cog fa-pulse fa-4x text-danger d-none"></i></div>
</div>
<div id="uncookLogger" class="col-5 p-1 layer-0" >
<div class="text-muted"> </div>
</div>
</div>
</div>
<div class="modal-footer justify-content-between p-1">
<button type="button" class="btn btn-sm btn-outline-warning" id="triggerUncook" >Uncook</button>
<button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade " id="uncookMicro" data-bs-backdrop="static" data-bs-keyboard="true" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg rounded-0">
<div class="modal-content rounded-0">
<div class="modal-body p-0 ">
<div class="row no-gutters">
<div id='microprep' class="col-4 p-3">
<span class="experimental ">µblends Creation</span>
<span class="badge d-block bg-warning text-dark mt-4">Uncook</span>
<div class="progress border border-dark mb-3 layer-0" style="height: 1.5rem;" >
<div id="uncook_micro_opt01" class="progress-bar bg-info progress-bar-striped progress-bar-animated text-dark" style="width:0%;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
<div id="uncook_micro_opt02" class="progress-bar bg-info progress-bar-striped progress-bar-animated text-dark" style="width:0%;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
<div id="uncook_micro_opt03" class="progress-bar bg-info progress-bar-striped progress-bar-animated text-dark" style="width:0%;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
<span class="badge d-block bg-warning text-dark">Resize</span>
<div class="progress border border-dark mb-3 layer-0" style="height: 1.5rem;" >
<div id="uncook_mresize" class="progress-bar bg-info progress-bar-striped progress-bar-animated text-dark" style="width:0%;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
<span class="badge d-block bg-warning text-dark">Thumb</span>
<div class="progress border border-dark mb-3 layer-0" style="height: 1.5rem;" >
<div id="uncook_mthumbs" class="progress-bar bg-info progress-bar-striped progress-bar-animated text-dark" style="width:0%;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
<div class="text-center mt-3"><i id="mycroCog" class="fas fa-cog fa-pulse fa-4x text-warning d-none"></i></div>
</div>
<div id="microLogger" class="col-8 p-1 layer-0" >
<div class="text-muted"> </div>
</div>
</div>
</div>
<div class="modal-footer justify-content-between p-1">
<button type="button" class="btn btn-sm btn-outline-warning" id="MycroMe" >Start</button>
<button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--
<div class="modal fade" id="modalInfo" tabindex="-1" aria-labelledby="modelsInfoH" aria-hidden="true" data-focus="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content ">
<div class="modal-header bg-info text-dark">
<h5 class="modal-title" id="modelsInfoH"><i class="fas fa-info-circle"></i> Model information</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="row no-gutter">
<div class="col-4"><div class="modal-body text-white" style="background-color:#121212;min-height:100%"></div></div>
<div class="col-8 text-center"> </div>
</div>
</div>
</div>
</div>
-->
<!-- A modal for the setup of the option randomizer -->
<!-- windows for aiming the microblend over the masks -->
<div class="modal fade" id="AimBlend" tabindex="-1" aria-labelledby="aimblendLBL" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!--<div class="modal-header bg-secondary text-white">
<h5 class="modal-title" id="aimblendLBL">µblend aiming</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>-->
<div class="modal-body text-white">
<div id="aimGRID">
<!--both canvas -->
<canvas id="MaskTargettoAim" class="border border-dark" height="512" width="512"></canvas>
<canvas contenteditable="true" id="maskFabric" style="display: block;position: absolute;float: left;left: calc(1rem + 21px);"class="border border-info" height="512" width="512" > </canvas>
<!--microblend application -->
<div id="aimPanels" class="layer-1">
<span class="badge w-100 rounded-0 layer-1">horizontal: <span id="dispAimU"></span></span>
<input id="AimU" class="w-100" type="range" min="-10.0" max="10.0" value="0.0" step="0.001">
<span class="badge w-100 rounded-0 layer-1">vertical: <span id="dispAimV"></span></span>
<input id="AimV" class="w-100" type="range" min="-10.0" max="10.0" value="0.0" step="0.001">
<span class="badge w-100 rounded-0 layer-1">mbTile: <span id="dispAimTile"></span></span>
<input id="AimMTile" class="w-100" type="range" min="0.05" max="80.0" value="0.0" step="0.001">
<!--<span class="badge w-100 rounded-0 layer-1">Chained To the Layer</span>-->
<div class="form-check form-switch my-2 ">
<input class="form-check-input ml-3" type="checkbox" id="AimChain" >
<label class="form-check-label" for="AimChain">Chained To the Layer</label>
</div>
<!--<input id="AimChain" class="w-100" min="0.01" max="4.0" value="0.0" step="0.01">-->
<div class="d-grid gap-2 col-6 mx-auto">
<button id="confirmAim" class="btn btn-sm btn-block btn-outline-warning" >Done</button>
<button id="reloadAim" class="btn btn-sm btn-block btn-outline-danger" >Reset</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalHelp" tabindex="-1" aria-labelledby="modelsHelpH" aria-hidden="true" data-focus="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content ">
<div class="modal-header bg-info text-dark">
<h5 class="modal-title" id="modelsHelpH"><i class="fas fa-question"></i> How to use the software</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-white">
The software is ment to help in creating .json files that can be compiled in .mlsetup format and assigned with everything that use the Cyberpunk 2077 multilayer systems
<ul>
<li>The multilayer editor system does not need a model to be displayed in the viewport to work</li>
<li>It has a 3d viewport to load exported 3d models from the game useful to see a corrispondence between masks and the layer you are editing on the mesh.</li>
<li>A searchable library with simble indication on model use (car bike, garment for men, woman or kid)</li>
<li>It can import .mlsetup files exported to json format</li>
<li>There is a material database that include every basic material the game use and automatically load value for normals, colors,metalness and roughness</li>
<li>There is a color picker with swatches compiled from the loaded materials</li>
<li>There is a microblend preview display</li>
<li>Developed a visual system for microblend positioning over the current layer mlmasks, with that you can:
<ul>
<li>Resize the microblend to fit the masks space</li>
<li>Position vertically and horizontally the microblend</li>
<li>Sync the microblend values with the layers one. Useful to get the perfect corrispondence when you are placing graphic_logos microblend and materials </li>
</ul>
</li>
<li>You can explicit custom path for materials and microblends</li>
<li>Property randomizer for layers with simple configuration window</li>
</ul>
</div>
</div>
</div>
</div>
<!-- License agreement -->
<div class="modal fade " id="LicenseModal" tabindex="-1" aria-labelledby="LicenseModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl rounded-0">
<div class="modal-content rounded-0">
<div class="modal-body p-0">
<div class="row m-0">
<div class="col mlsblogo">
<img src="./images/system/MlsbLogo.gif">
</div><div class="col">
<ul class="nav nav-tabs" id="LicenseTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="mainTab" data-bs-toggle="tab" data-bs-target="#mainL" type="button" role="tab" aria-controls="mainL" aria-selected="true">MlsetupBuilder License</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="threejsTab" data-bs-toggle="tab" data-bs-target="#threejslicense" type="button" role="tab" aria-controls="threejslicense" aria-selected="false">Three.js License</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="JQColTab" data-bs-toggle="tab" data-bs-target="#jquerylicense" type="button" role="tab" aria-controls="jquerylicense" aria-selected="false">Jquery 3.6.0 License</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="TinyColTab" data-bs-toggle="tab" data-bs-target="#tinycollicense" type="button" role="tab" aria-controls="tinycollicense" aria-selected="false">Tinicolor.js License</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="jstreeTab" data-bs-toggle="tab" data-bs-target="#jstreelicense" type="button" role="tab" aria-controls="jstreelicense" aria-selected="false">jstree License</button>
</li>
</ul>
<div class="tab-content" id="tabLicenseBox">
<div class="tab-pane fade " id="jquerylicense" role="tabpanel" aria-labelledby="JQColTab"><code class="text-light">
<p class="text-center">Copyright OpenJS Foundation and other contributors, https://openjsf.org/</p>
<p>Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:</p>
<p>The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.</p>
<p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
</code></div>
<div class="tab-pane fade " id="tinycollicense" role="tabpanel" aria-labelledby="TinyColTab"><code class="text-light">
<p class="text-center">Copyright (c), Brian Grinstead, http://briangrinstead.com</p>
<p>Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:</p>
<p>The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.</p>
<p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
</code>
</div>
<div class="tab-pane fade" id="jstreelicense" role="tabpanel" aria-labelledby="jstreeTab"><code class="text-light">
<p class="text-center">Copyright (c) 2014 Ivan Bozhanov</p>
<p>Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:</p>
<p>The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.</p>
<p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.</p></code>
</div>
<div class="tab-pane fade" id="threejslicense" role="tabpanel" aria-labelledby="threejsTab"><code class="text-light">
<p class="text-center">Copyright © 2010-2021 three.js authors</p>
<p>Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:</p>
<p>The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.</p>
<p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.</p>
</div></code>
<div class="tab-pane fade show active" id="mainL" role="tabpanel" aria-labelledby="home-tab"><code class="text-light">
<p>This is MlsetupBuilder a web application ment to create json .mlsetup files usable in the modding workflow of the game Cyberpunk 2077</p>
<p class="text-center">Copyright (C) 2021 Neurolinked</p>
<p>This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.</p>
<p>This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.</p><p>You should have received a copy of the GNU General Public License along with this program. If not, see <a href="https://www.gnu.org/licenses/">https://www.gnu.org/licenses/</a>.</p>
<p>You can contact me sending an e-mail to [email protected]</p></code>
</div>
</div>
</div>
<svg id="KofiSupportPage" width="223px" height="30px" viewBox="0 0 223 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
<title>Support Me on Kofi</title>
<desc>Created with Sketch.</desc>
<g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#000000" x="0" y="0" width="223" height="30" rx="8" stroke="#DD5404" stroke-width="2"></rect>
<g id="Group" transform="translate(24.000000, 7.000000)" fill-rule="nonzero">
<path d="M17.417931,-1.74615877e-12 L19.0255476,-1.74615877e-12 C22.126324,-1.74672838e-12 24.64,2.51367595 24.64,5.61445238 L24.64,5.94446654 C24.64,9.04524297 22.126324,11.5589189 19.0255476,11.5589189 L17.417931,11.5589189 L17.417931,13.2487143 C17.417931,14.6798419 16.2577729,15.84 14.8266453,15.84 L2.59128571,15.84 C1.16015813,15.84 -2.90320252e-13,14.6798419 -2.91766611e-13,13.2487143 L-2.91544566e-13,1.29564286 C-2.91632198e-13,0.580079066 0.580079066,-1.74624937e-12 1.29564286,-1.74638082e-12 L17.417931,-1.74615877e-12 Z M17.417931,2.99675676 L17.417931,8.56216216 L18.8835042,8.56216216 C20.4203485,8.56216216 21.6662069,7.31630373 21.6662069,5.77945946 C21.6662069,4.24261519 20.4203485,2.99675676 18.8835042,2.99675676 L17.417931,2.99675676 Z" id="Rectangle-2" fill="#FFFFFF"></path>
<path d="M8.36,5.27684576 C8.76029424,4.10561525 9.70894135,3.52 11.2059413,3.52 C13.4514413,3.52 14.2839059,6.3136503 13.106875,8.14 C12.3221877,9.35756646 10.7398961,10.8975665 8.36,12.76 C5.98010394,10.8975665 4.39781228,9.35756646 3.61312502,8.14 C2.43609412,6.3136503 3.26855871,3.52 5.51405867,3.52 C7.01105865,3.52 7.95970576,4.10561525 8.36,5.27684576 Z" id="Path-2" fill="#FF5E5B"></path>
</g>
<path d="M66.2,19.14 C65.5279966,19.14 64.9306693,19.0560008 64.408,18.888 C63.8853307,18.7199992 63.3953356,18.4353353 62.938,18.034 C62.6859987,17.8099989 62.56,17.562668 62.56,17.292 C62.56,17.0773323 62.6393325,16.8883341 62.798,16.725 C62.9566675,16.5616659 63.1479989,16.48 63.372,16.48 C63.5493342,16.48 63.7079993,16.5359994 63.848,16.648 C64.2213352,16.9560015 64.5853316,17.1799993 64.94,17.32 C65.2946684,17.4600007 65.7146642,17.53 66.2,17.53 C66.7226693,17.53 67.1729981,17.4133345 67.551,17.18 C67.9290019,16.9466655 68.118,16.6573351 68.118,16.312 C68.118,15.8919979 67.9313352,15.5630012 67.558,15.325 C67.1846648,15.0869988 66.5920041,14.9073339 65.78,14.786 C63.7359898,14.4873318 62.714,13.5353414 62.714,11.93 C62.714,11.3419971 62.8679985,10.8310022 63.176,10.397 C63.4840015,9.96299783 63.9039973,9.63166781 64.436,9.403 C64.9680027,9.17433219 65.5606634,9.06 66.214,9.06 C66.8020029,9.06 67.3549974,9.14866578 67.873,9.326 C68.3910026,9.50333422 68.8226649,9.73666522 69.168,10.026 C69.438668,10.2406677 69.574,10.4879986 69.574,10.768 C69.574,10.9826677 69.4946675,11.1716659 69.336,11.335 C69.1773325,11.4983341 68.9906677,11.58 68.776,11.58 C68.6359993,11.58 68.5100006,11.5380004 68.398,11.454 C68.1553321,11.257999 67.8170022,11.0783341 67.383,10.915 C66.9489978,10.7516659 66.5593351,10.67 66.214,10.67 C65.6259971,10.67 65.1710016,10.7796656 64.849,10.999 C64.5269984,11.2183344 64.366,11.5053316 64.366,11.86 C64.366,12.2613353 64.531665,12.5646656 64.863,12.77 C65.194335,12.9753344 65.7146631,13.1433327 66.424,13.274 C67.2266707,13.4140007 67.8683309,13.5936656 68.349,13.813 C68.8296691,14.0323344 69.1913321,14.3309981 69.434,14.709 C69.6766679,15.0870019 69.798,15.5886635 69.798,16.214 C69.798,16.8020029 69.632335,17.3176645 69.301,17.761 C68.969665,18.2043355 68.5286694,18.5449988 67.978,18.783 C67.4273306,19.0210012 66.8346698,19.14 66.2,19.14 Z M76.826,11.51 C77.0686679,11.51 77.2693325,11.5916659 77.428,11.755 C77.5866675,11.9183341 77.666,12.1213321 77.666,12.364 L77.666,15.92 C77.666,16.928005 77.3883361,17.7166638 76.833,18.286 C76.2776639,18.8553362 75.4866718,19.14 74.46,19.14 C73.4333282,19.14 72.6446694,18.8553362 72.094,18.286 C71.5433306,17.7166638 71.268,16.928005 71.268,15.92 L71.268,12.364 C71.268,12.1213321 71.3473325,11.9183341 71.506,11.755 C71.6646675,11.5916659 71.8653321,11.51 72.108,11.51 C72.3506679,11.51 72.5513325,11.5916659 72.71,11.755 C72.8686675,11.9183341 72.948,12.1213321 72.948,12.364 L72.948,15.92 C72.948,16.4893362 73.0739987,16.9116653 73.326,17.187 C73.5780013,17.4623347 73.9559975,17.6 74.46,17.6 C74.9733359,17.6 75.3559987,17.4623347 75.608,17.187 C75.8600013,16.9116653 75.986,16.4893362 75.986,15.92 L75.986,12.364 C75.986,12.1213321 76.0653325,11.9183341 76.224,11.755 C76.3826675,11.5916659 76.5833321,11.51 76.826,11.51 Z M83.364,11.37 C84.0080032,11.37 84.5913307,11.535665 85.114,11.867 C85.6366693,12.198335 86.0496652,12.6579971 86.353,13.246 C86.6563349,13.8340029 86.808,14.5013296 86.808,15.248 C86.808,15.9946704 86.6586682,16.6643304 86.36,17.257 C86.0613318,17.8496696 85.6530026,18.311665 85.135,18.643 C84.6169974,18.974335 84.0453365,19.14 83.42,19.14 C82.9719978,19.14 82.5496687,19.0490009 82.153,18.867 C81.7563313,18.6849991 81.4273346,18.4633346 81.166,18.202 L81.166,20.946 C81.166,21.1886679 81.0866675,21.3916658 80.928,21.555 C80.7693325,21.7183342 80.5686679,21.8 80.326,21.8 C80.0833321,21.8 79.8826675,21.7206675 79.724,21.562 C79.5653325,21.4033325 79.486,21.1980013 79.486,20.946 L79.486,12.364 C79.486,12.1213321 79.5653325,11.9183341 79.724,11.755 C79.8826675,11.5916659 80.0833321,11.51 80.326,11.51 C80.5686679,11.51 80.7693325,11.5916659 80.928,11.755 C81.0866675,11.9183341 81.166,12.1213321 81.166,12.364 L81.166,12.42 C81.3900011,12.1399986 81.7026647,11.895001 82.104,11.685 C82.5053353,11.4749989 82.9253311,11.37 83.364,11.37 Z M83.154,17.6 C83.7513363,17.6 84.2413314,17.3760022 84.624,16.928 C85.0066686,16.4799978 85.198,15.9200034 85.198,15.248 C85.198,14.5759966 85.0090019,14.0183355 84.631,13.575 C84.2529981,13.1316644 83.7606697,12.91 83.154,12.91 C82.5473303,12.91 82.0526686,13.1316644 81.67,13.575 C81.2873314,14.0183355 81.096,14.5759966 81.096,15.248 C81.096,15.9200034 81.2873314,16.4799978 81.67,16.928 C82.0526686,17.3760022 82.5473303,17.6 83.154,17.6 Z M92.086,11.37 C92.7300032,11.37 93.3133307,11.535665 93.836,11.867 C94.3586693,12.198335 94.7716652,12.6579971 95.075,13.246 C95.3783349,13.8340029 95.53,14.5013296 95.53,15.248 C95.53,15.9946704 95.3806682,16.6643304 95.082,17.257 C94.7833318,17.8496696 94.3750026,18.311665 93.857,18.643 C93.3389974,18.974335 92.7673365,19.14 92.142,19.14 C91.6939978,19.14 91.2716687,19.0490009 90.875,18.867 C90.4783313,18.6849991 90.1493346,18.4633346 89.888,18.202 L89.888,20.946 C89.888,21.1886679 89.8086675,21.3916658 89.65,21.555 C89.4913325,21.7183342 89.2906679,21.8 89.048,21.8 C88.8053321,21.8 88.6046675,21.7206675 88.446,21.562 C88.2873325,21.4033325 88.208,21.1980013 88.208,20.946 L88.208,12.364 C88.208,12.1213321 88.2873325,11.9183341 88.446,11.755 C88.6046675,11.5916659 88.8053321,11.51 89.048,11.51 C89.2906679,11.51 89.4913325,11.5916659 89.65,11.755 C89.8086675,11.9183341 89.888,12.1213321 89.888,12.364 L89.888,12.42 C90.1120011,12.1399986 90.4246647,11.895001 90.826,11.685 C91.2273353,11.4749989 91.6473311,11.37 92.086,11.37 Z M91.876,17.6 C92.4733363,17.6 92.9633314,17.3760022 93.346,16.928 C93.7286686,16.4799978 93.92,15.9200034 93.92,15.248 C93.92,14.5759966 93.7310019,14.0183355 93.353,13.575 C92.9749981,13.1316644 92.4826697,12.91 91.876,12.91 C91.2693303,12.91 90.7746686,13.1316644 90.392,13.575 C90.0093314,14.0183355 89.818,14.5759966 89.818,15.248 C89.818,15.9200034 90.0093314,16.4799978 90.392,16.928 C90.7746686,17.3760022 91.2693303,17.6 91.876,17.6 Z M104.126,15.262 C104.126,16.0086704 103.958002,16.6783304 103.622,17.271 C103.285998,17.8636696 102.826336,18.3233317 102.243,18.65 C101.659664,18.9766683 101.018004,19.14 100.318,19.14 C99.6086631,19.14 98.9646696,18.9766683 98.386,18.65 C97.8073304,18.3233317 97.3500017,17.8636696 97.014,17.271 C96.6779983,16.6783304 96.51,16.0086704 96.51,15.262 C96.51,14.5153296 96.6779983,13.8456696 97.014,13.253 C97.3500017,12.6603304 97.8073304,12.198335 98.386,11.867 C98.9646696,11.535665 99.6086631,11.37 100.318,11.37 C101.018004,11.37 101.659664,11.535665 102.243,11.867 C102.826336,12.198335 103.285998,12.6603304 103.622,13.253 C103.958002,13.8456696 104.126,14.5153296 104.126,15.262 Z M102.446,15.262 C102.446,14.8046644 102.350334,14.3963351 102.159,14.037 C101.967666,13.6776649 101.711002,13.400001 101.389,13.204 C101.066998,13.007999 100.710002,12.91 100.318,12.91 C99.925998,12.91 99.5690016,13.007999 99.247,13.204 C98.9249984,13.400001 98.6683343,13.6776649 98.477,14.037 C98.2856657,14.3963351 98.19,14.8046644 98.19,15.262 C98.19,15.7193356 98.2856657,16.1253316 98.477,16.48 C98.6683343,16.8346684 98.9249984,17.109999 99.247,17.306 C99.5690016,17.502001 99.925998,17.6 100.318,17.6 C100.710002,17.6 101.066998,17.502001 101.389,17.306 C101.711002,17.109999 101.967666,16.8346684 102.159,16.48 C102.350334,16.1253316 102.446,15.7193356 102.446,15.262 Z M109.418,11.37 C109.698001,11.37 109.933666,11.4493325 110.125,11.608 C110.316334,11.7666675 110.412,11.9533323 110.412,12.168 C110.412,12.4573348 110.337334,12.6743326 110.188,12.819 C110.038666,12.9636674 109.861334,13.036 109.656,13.036 C109.515999,13.036 109.357334,13.0033337 109.18,12.938 C109.152,12.9286666 109.089,12.9100001 108.991,12.882 C108.893,12.8539999 108.788001,12.84 108.676,12.84 C108.433332,12.84 108.200001,12.9146659 107.976,13.064 C107.751999,13.2133341 107.567667,13.4396651 107.423,13.743 C107.278333,14.0463349 107.206,14.4079979 107.206,14.828 L107.206,18.146 C107.206,18.3886679 107.126667,18.5916658 106.968,18.755 C106.809333,18.9183341 106.608668,19 106.366,19 C106.123332,19 105.922667,18.9183341 105.764,18.755 C105.605333,18.5916658 105.526,18.3886679 105.526,18.146 L105.526,12.364 C105.526,12.1213321 105.605333,11.9183341 105.764,11.755 C105.922667,11.5916659 106.123332,11.51 106.366,11.51 C106.608668,11.51 106.809333,11.5916659 106.968,11.755 C107.126667,11.9183341 107.206,12.1213321 107.206,12.364 L107.206,12.546 C107.420668,12.1633314 107.728665,11.8716677 108.13,11.671 C108.531335,11.4703323 108.960664,11.37 109.418,11.37 Z M115.214,17.418 C115.344667,17.418 115.463666,17.4809994 115.571,17.607 C115.678334,17.7330006 115.732,17.8986656 115.732,18.104 C115.732,18.3560013 115.594335,18.5683325 115.319,18.741 C115.043665,18.9136675 114.733335,19 114.388,19 C113.80933,19 113.321669,18.8763346 112.925,18.629 C112.528331,18.3816654 112.33,17.8566707 112.33,17.054 L112.33,13.19 L111.686,13.19 C111.461999,13.19 111.275334,13.1153341 111.126,12.966 C110.976666,12.8166659 110.902,12.6300011 110.902,12.406 C110.902,12.1913323 110.976666,12.0116674 111.126,11.867 C111.275334,11.7223326 111.461999,11.65 111.686,11.65 L112.33,11.65 L112.33,10.754 C112.33,10.5113321 112.411666,10.3083342 112.575,10.145 C112.738334,9.98166585 112.941332,9.9 113.184,9.9 C113.417334,9.9 113.613333,9.98166585 113.772,10.145 C113.930667,10.3083342 114.01,10.5113321 114.01,10.754 L114.01,11.65 L115.004,11.65 C115.228001,11.65 115.414666,11.7246659 115.564,11.874 C115.713334,12.0233341 115.788,12.2099989 115.788,12.434 C115.788,12.6486677 115.713334,12.8283326 115.564,12.973 C115.414666,13.1176674 115.228001,13.19 115.004,13.19 L114.01,13.19 L114.01,16.984 C114.01,17.180001 114.061333,17.3223329 114.164,17.411 C114.266667,17.4996671 114.406666,17.544 114.584,17.544 C114.658667,17.544 114.761333,17.5253335 114.892,17.488 C115.004001,17.4413331 115.111333,17.418 115.214,17.418 Z M129.886,11.37 C130.810005,11.37 131.449332,11.6523305 131.804,12.217 C132.158668,12.7816695 132.336,13.5633283 132.336,14.562 L132.336,18.146 C132.336,18.3886679 132.256667,18.5916658 132.098,18.755 C131.939333,18.9183341 131.738668,19 131.496,19 C131.253332,19 131.052667,18.9183341 130.894,18.755 C130.735333,18.5916658 130.656,18.3886679 130.656,18.146 L130.656,14.562 C130.656,14.0486641 130.555668,13.6450015 130.355,13.351 C130.154332,13.0569985 129.802003,12.91 129.298,12.91 C128.775331,12.91 128.367001,13.0663318 128.073,13.379 C127.778999,13.6916682 127.632,14.0859976 127.632,14.562 L127.632,18.146 C127.632,18.3886679 127.552667,18.5916658 127.394,18.755 C127.235333,18.9183341 127.034668,19 126.792,19 C126.549332,19 126.348667,18.9183341 126.19,18.755 C126.031333,18.5916658 125.952,18.3886679 125.952,18.146 L125.952,14.562 C125.952,14.0486641 125.851668,13.6450015 125.651,13.351 C125.450332,13.0569985 125.098003,12.91 124.594,12.91 C124.071331,12.91 123.663001,13.0663318 123.369,13.379 C123.074999,13.6916682 122.928,14.0859976 122.928,14.562 L122.928,18.146 C122.928,18.3886679 122.848667,18.5916658 122.69,18.755 C122.531333,18.9183341 122.330668,19 122.088,19 C121.845332,19 121.644667,18.9183341 121.486,18.755 C121.327333,18.5916658 121.248,18.3886679 121.248,18.146 L121.248,12.364 C121.248,12.1213321 121.327333,11.9183341 121.486,11.755 C121.644667,11.5916659 121.845332,11.51 122.088,11.51 C122.330668,11.51 122.531333,11.5916659 122.69,11.755 C122.848667,11.9183341 122.928,12.1213321 122.928,12.364 L122.928,12.588 C123.180001,12.2519983 123.499665,11.9650012 123.887,11.727 C124.274335,11.4889988 124.705998,11.37 125.182,11.37 C126.358006,11.37 127.109332,11.8833282 127.436,12.91 C127.650668,12.517998 127.974998,12.1633349 128.409,11.846 C128.843002,11.5286651 129.335331,11.37 129.886,11.37 Z M140.876,15.08 C140.866667,15.3040011 140.778001,15.4859993 140.61,15.626 C140.441999,15.7660007 140.246001,15.836 140.022,15.836 L135.402,15.836 C135.514001,16.3866694 135.770665,16.8183318 136.172,17.131 C136.573335,17.4436682 137.025997,17.6 137.53,17.6 C137.912669,17.6 138.211332,17.5650003 138.426,17.495 C138.640668,17.4249997 138.810999,17.3503337 138.937,17.271 C139.063001,17.1916663 139.149333,17.1380001 139.196,17.11 C139.364001,17.0259996 139.522666,16.984 139.672,16.984 C139.868001,16.984 140.035999,17.0539993 140.176,17.194 C140.316001,17.3340007 140.386,17.4973324 140.386,17.684 C140.386,17.9360013 140.255335,18.1646656 139.994,18.37 C139.732665,18.5846677 139.382669,18.7666659 138.944,18.916 C138.505331,19.0653341 138.062002,19.14 137.614,19.14 C136.829996,19.14 136.146336,18.9766683 135.563,18.65 C134.979664,18.3233317 134.529335,17.8730029 134.212,17.299 C133.894665,16.7249971 133.736,16.0786703 133.736,15.36 C133.736,14.5573293 133.903998,13.8526697 134.24,13.246 C134.576002,12.6393303 135.019331,12.1750016 135.57,11.853 C136.120669,11.5309984 136.708664,11.37 137.334,11.37 C137.950003,11.37 138.530997,11.5379983 139.077,11.874 C139.623003,12.2100017 140.059332,12.6626638 140.386,13.232 C140.712668,13.8013362 140.876,14.41733 140.876,15.08 Z M137.334,12.91 C136.251328,12.91 135.612001,13.4186616 135.416,14.436 L139.084,14.436 L139.084,14.338 C139.046666,13.945998 138.855335,13.6100014 138.51,13.33 C138.164665,13.0499986 137.772669,12.91 137.334,12.91 Z M153.392,15.262 C153.392,16.0086704 153.224002,16.6783304 152.888,17.271 C152.551998,17.8636696 152.092336,18.3233317 151.509,18.65 C150.925664,18.9766683 150.284003,19.14 149.584,19.14 C148.874663,19.14 148.23067,18.9766683 147.652,18.65 C147.07333,18.3233317 146.616002,17.8636696 146.28,17.271 C145.943998,16.6783304 145.776,16.0086704 145.776,15.262 C145.776,14.5153296 145.943998,13.8456696 146.28,13.253 C146.616002,12.6603304 147.07333,12.198335 147.652,11.867 C148.23067,11.535665 148.874663,11.37 149.584,11.37 C150.284003,11.37 150.925664,11.535665 151.509,11.867 C152.092336,12.198335 152.551998,12.6603304 152.888,13.253 C153.224002,13.8456696 153.392,14.5153296 153.392,15.262 Z M151.712,15.262 C151.712,14.8046644 151.616334,14.3963351 151.425,14.037 C151.233666,13.6776649 150.977002,13.400001 150.655,13.204 C150.332998,13.007999 149.976002,12.91 149.584,12.91 C149.191998,12.91 148.835002,13.007999 148.513,13.204 C148.190998,13.400001 147.934334,13.6776649 147.743,14.037 C147.551666,14.3963351 147.456,14.8046644 147.456,15.262 C147.456,15.7193356 147.551666,16.1253316 147.743,16.48 C147.934334,16.8346684 148.190998,17.109999 148.513,17.306 C148.835002,17.502001 149.191998,17.6 149.584,17.6 C149.976002,17.6 150.332998,17.502001 150.655,17.306 C150.977002,17.109999 151.233666,16.8346684 151.425,16.48 C151.616334,16.1253316 151.712,15.7193356 151.712,15.262 Z M158.796,11.37 C159.748005,11.37 160.405998,11.6523305 160.77,12.217 C161.134002,12.7816695 161.316,13.5633283 161.316,14.562 L161.316,18.146 C161.316,18.3886679 161.236667,18.5916658 161.078,18.755 C160.919333,18.9183341 160.718668,19 160.476,19 C160.233332,19 160.032667,18.9183341 159.874,18.755 C159.715333,18.5916658 159.636,18.3886679 159.636,18.146 L159.636,14.562 C159.636,14.0486641 159.528668,13.6450015 159.314,13.351 C159.099332,13.0569985 158.730669,12.91 158.208,12.91 C157.666664,12.91 157.242002,13.0663318 156.934,13.379 C156.625998,13.6916682 156.472,14.0859976 156.472,14.562 L156.472,18.146 C156.472,18.3886679 156.392667,18.5916658 156.234,18.755 C156.075333,18.9183341 155.874668,19 155.632,19 C155.389332,19 155.188667,18.9183341 155.03,18.755 C154.871333,18.5916658 154.792,18.3886679 154.792,18.146 L154.792,12.364 C154.792,12.1213321 154.871333,11.9183341 155.03,11.755 C155.188667,11.5916659 155.389332,11.51 155.632,11.51 C155.874668,11.51 156.075333,11.5916659 156.234,11.755 C156.392667,11.9183341 156.472,12.1213321 156.472,12.364 L156.472,12.602 C156.724001,12.2659983 157.052998,11.9766679 157.459,11.734 C157.865002,11.4913321 158.310664,11.37 158.796,11.37 Z M174.7,17.544 C174.756,17.618667 174.802666,17.7096661 174.84,17.817 C174.877334,17.9243339 174.896,18.0246662 174.896,18.118 C174.896,18.3700013 174.800334,18.5799992 174.609,18.748 C174.417666,18.9160008 174.196001,19 173.944,19 C173.822666,19 173.706001,18.9720003 173.594,18.916 C173.481999,18.8599997 173.388667,18.7806672 173.314,18.678 L170.276,14.674 L168.946,15.948 L168.946,18.146 C168.946,18.3980013 168.864334,18.6033325 168.701,18.762 C168.537666,18.9206675 168.325335,19 168.064,19 C167.811999,19 167.604334,18.9183341 167.441,18.755 C167.277666,18.5916658 167.196,18.3886679 167.196,18.146 L167.196,10.054 C167.196,9.81133212 167.279999,9.60833415 167.448,9.445 C167.616001,9.28166585 167.830665,9.2 168.092,9.2 C168.344001,9.2 168.549333,9.27933254 168.708,9.438 C168.866667,9.59666746 168.946,9.80199874 168.946,10.054 L168.946,13.862 L173.426,9.452 C173.640668,9.23733226 173.869332,9.13 174.112,9.13 C174.326668,9.13 174.508666,9.21866578 174.658,9.396 C174.807334,9.57333422 174.882,9.75999902 174.882,9.956 C174.882,10.152001 174.798001,10.3339992 174.63,10.502 L171.578,13.414 L174.7,17.544 Z M183.422,15.262 C183.422,16.0086704 183.254002,16.6783304 182.918,17.271 C182.581998,17.8636696 182.122336,18.3233317 181.539,18.65 C180.955664,18.9766683 180.314004,19.14 179.614,19.14 C178.904663,19.14 178.26067,18.9766683 177.682,18.65 C177.10333,18.3233317 176.646002,17.8636696 176.31,17.271 C175.973998,16.6783304 175.806,16.0086704 175.806,15.262 C175.806,14.5153296 175.973998,13.8456696 176.31,13.253 C176.646002,12.6603304 177.10333,12.198335 177.682,11.867 C178.26067,11.535665 178.904663,11.37 179.614,11.37 C180.314004,11.37 180.955664,11.535665 181.539,11.867 C182.122336,12.198335 182.581998,12.6603304 182.918,13.253 C183.254002,13.8456696 183.422,14.5153296 183.422,15.262 Z M181.742,15.262 C181.742,14.8046644 181.646334,14.3963351 181.455,14.037 C181.263666,13.6776649 181.007002,13.400001 180.685,13.204 C180.362998,13.007999 180.006002,12.91 179.614,12.91 C179.221998,12.91 178.865002,13.007999 178.543,13.204 C178.220998,13.400001 177.964334,13.6776649 177.773,14.037 C177.581666,14.3963351 177.486,14.8046644 177.486,15.262 C177.486,15.7193356 177.581666,16.1253316 177.773,16.48 C177.964334,16.8346684 178.220998,17.109999 178.543,17.306 C178.865002,17.502001 179.221998,17.6 179.614,17.6 C180.006002,17.6 180.362998,17.502001 180.685,17.306 C181.007002,17.109999 181.263666,16.8346684 181.455,16.48 C181.646334,16.1253316 181.742,15.7193356 181.742,15.262 Z M185.466,15.542 C185.223332,15.542 185.020334,15.4626675 184.857,15.304 C184.693666,15.1453325 184.612,14.9446679 184.612,14.702 C184.612,14.4686655 184.693666,14.2726675 184.857,14.114 C185.020334,13.9553325 185.223332,13.876 185.466,13.876 L187.902,13.876 C188.144668,13.876 188.347666,13.9576658 188.511,14.121 C188.674334,14.2843341 188.756,14.4873321 188.756,14.73 C188.756,14.9633345 188.674334,15.1569992 188.511,15.311 C188.347666,15.4650008 188.144668,15.542 187.902,15.542 L185.466,15.542 Z M193.964,10.124 C193.646665,10.124 193.422667,10.2149991 193.292,10.397 C193.161333,10.5790009 193.096,10.7773323 193.096,10.992 L193.096,11.65 L194.37,11.65 C194.594001,11.65 194.780666,11.7223326 194.93,11.867 C195.079334,12.0116674 195.154,12.1959989 195.154,12.42 C195.154,12.6440011 195.079334,12.8283326 194.93,12.973 C194.780666,13.1176674 194.594001,13.19 194.37,13.19 L193.096,13.19 L193.096,18.146 C193.096,18.3886679 193.016667,18.5916658 192.858,18.755 C192.699333,18.9183341 192.498668,19 192.256,19 C192.013332,19 191.812667,18.9183341 191.654,18.755 C191.495333,18.5916658 191.416,18.3886679 191.416,18.146 L191.416,13.19 L190.66,13.19 C190.435999,13.19 190.249334,13.1176674 190.1,12.973 C189.950666,12.8283326 189.876,12.6440011 189.876,12.42 C189.876,12.1959989 189.950666,12.0116674 190.1,11.867 C190.249334,11.7223326 190.435999,11.65 190.66,11.65 L191.416,11.65 L191.416,11.006 C191.416,10.3059965 191.656331,9.73666886 192.137,9.298 C192.617669,8.85933114 193.310662,8.64 194.216,8.64 C194.561335,8.64 194.862332,8.7099993 195.119,8.85 C195.375668,8.9900007 195.504,9.20466522 195.504,9.494 C195.504,9.71800112 195.438667,9.8999993 195.308,10.04 C195.177333,10.1800007 195.018668,10.25 194.832,10.25 C194.785333,10.25 194.736334,10.2453334 194.685,10.236 C194.633666,10.2266666 194.58,10.2173334 194.524,10.208 C194.299999,10.1519997 194.113334,10.124 193.964,10.124 Z M197.786,18.146 C197.786,18.3886679 197.706667,18.5916658 197.548,18.755 C197.389333,18.9183341 197.188668,19 196.946,19 C196.703332,19 196.502667,18.9183341 196.344,18.755 C196.185333,18.5916658 196.106,18.3886679 196.106,18.146 L196.106,12.364 C196.106,12.1213321 196.185333,11.9183341 196.344,11.755 C196.502667,11.5916659 196.703332,11.51 196.946,11.51 C197.188668,11.51 197.389333,11.5916659 197.548,11.755 C197.706667,11.9183341 197.786,12.1213321 197.786,12.364 L197.786,18.146 Z M196.932,10.6 C196.614665,10.6 196.390667,10.5486672 196.26,10.446 C196.129333,10.3433328 196.064,10.1613346 196.064,9.9 L196.064,9.634 C196.064,9.37266536 196.133999,9.19066718 196.274,9.088 C196.414001,8.98533282 196.637998,8.934 196.946,8.934 C197.272668,8.934 197.501333,8.98533282 197.632,9.088 C197.762667,9.19066718 197.828,9.37266536 197.828,9.634 L197.828,9.9 C197.828,10.170668 197.760334,10.3549995 197.625,10.453 C197.489666,10.5510005 197.258668,10.6 196.932,10.6 Z" id="SupportmeonKo-f" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
<ul id="layers-contextual">
<li data-action="cpall"><i class="fa-solid fa-copy"></i> Copy all attributes</li>
<li data-action="pstall" disabled><i class="fa-solid fa-square"></i> Paste attributes</li>
<li data-action="cpmb"><i class="fa-solid fa-shapes"></i> Copy microblends data</li>
<li data-action="pstmb" disabled><i class="fa-solid fa-paste"></i> Paste microblends data</li>
<li data-action="cpcol"><i class="fa-solid fa-eye-dropper"></i> Copy color</li>
<li data-action="pstcol" disabled><i class="fa-solid fa-paintbrush"></i> Paste color</li>
</ul>
<script defer src='./js/3dIF.js'></script>
<script src="./renderer.js"></script>
<script type="text/javascript" src="./node_modules/intro.js/minified/intro.min.js" ></script>
</body>
</html>