-
-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
1176 lines (1145 loc) · 104 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
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!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 * 'nonce-Meow'; img-src * data: 'unsafe-inline' blob:; connect-src 'self'; worker-src * blob:;" >
<meta name="author" content="Neurolinked">
<meta name="date" content="September 2021">
<!-- Intro.js -->
<link rel="stylesheet" href="./public/introjs/introjs.min.css" />
<link href="./public/introjs/introjs-dark.css" rel="stylesheet">
<!-- End Intro -->
<!-- BOOtstrap 5 -->
<link href="./css/mlsb.css" rel="stylesheet">
<script type="text/javascript" src="./js/bootstrap/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.7.0.min.js'></script>
<!--Datatable section-->
<script type="text/javascript" src='./public/datatables/datatables.min.js'></script>
<link rel="stylesheet" href="./public/datatables/datatables.min.css" />
<!--Datatables SearchPanes-->
<link rel="stylesheet" href="./public/datatables/SearchPanes-2.2.0/css/searchPanes.bootstrap5.min.css" />
<script type="text/javascript" src="./public/datatables/SearchPanes-2.2.0/js/dataTables.searchPanes.min.js" /></script>
<!--PouchDB-->
<script type="text/javascript" src='./public/pouchDB/pouchdb-9.0.0.min.js'></script>
<script type="text/javascript" src='./public/pouchDB/pouchdb.find.js'></script>
<!--PouchDB-->
<!-- mlsetup Class Description -->
<script type="text/javascript" src='./js/modules/mlsetup.js'></script>
<!-- materialbuffer Class Description -->
<script type="text/javascript" src='./js/modules/materialBuf.js'></script>
<script type="text/javascript" src='./js/modules/MLSB.js'></script>
<!--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/hairs.js" type="text/javascript"></script><!--hardcoded DB -->
<!--Tiny 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>
<script type="importmap" nonce="Meow">
{
"imports": {
"three": "./public/three/build/three.module.min.js",
"orbit": "./public/three/examples/jsm/controls/OrbitControls.js",
"fog": "./public/three/src/scenes/Fog.js",
"color": "./public/three/src/math/Color.js",
"mathutils": "./public/three/src/math/MathUtils.js",
"gltf": "./public/three/examples/jsm/loaders/GLTFLoader.js",
"stats": "./public/three/examples/jsm/utils/GPUStatsPanel.js"
}
}
</script>
<!-- "composer" : "./public/three/examples/jsm/postprocessing/EffectComposer.js",
"renderpass" : "./public/three/examples/jsm/postprocessing/RenderPass.js",
"bloom" : "./public/three/examples/jsm/postprocessing/BloomPass.js",
"stats": "./public/three/examples/jsm/utils/GPUStatsPanel.js" -->
<script type='module' src='./js/modules/mlsetup.js'></script>
<script type="text/javascript" src='./public/cryptojs/cryptojs.min.js'></script>
<script type="text/javascript" src='./js/interface.js'></script>
<link rel="stylesheet" href="./css/base.css" />
<link rel="stylesheet" href="./css/workspace_legacy.css" id="workspaceCSS" />
<link rel="stylesheet" href="./css/iconmoon.css" />
<style id="panelsSize" type="text/css"> </style>
</head>
<body data-bs-theme="dark" class="px-1">
<div id="floatMat" class="d-none position-absolute"> </div>
<div id="floatLayer" class="d-none position-absolute">
<img id="currentMat" class="d-inline" width="128" height="128">
<img id="currentMblend" class="d-inline" width="128" height="128">
<div class="d-inline-block colDisplayer" titl e="null_null"> </div>
<footer class="px-1"></footer>
</div>
<!--hardcoded material DB //-->
<!-- <script type="text/javascript" src="./jsons/material_overrides.json" ></script> -->
<!--hardcoded material DB//-->
<div id="MainMenu" class="btn-group">
<button class="btn btn-sm btn-secondary rounded" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false"><i class="fa-solid fa-caret-down"></i></button>
<ul class="dropdown-menu dropdown-menu-dark rounded-0 pt-0">
<li><h6 class="dropdown-header bg-warning text-black">Import/Export</h6></li>
<li class="d-none"><a class="d-none" href="#" id="importFromWkit" ></li>
<li><a class="dropdown-item" href="#" id="importLink" ><i class="fa-solid fa-file-import"></i> Import</a></li>
<li><a class="dropdown-item" href="#" data-bs-toggle="offcanvas" data-bs-target="#off_MLSetups" ><i class="fa-solid fa-vest"></i> MLsetup Preview</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item xportJSON" href="#" id="exportversions" ><i class="fa-solid fa-file-export"></i> Export</a></li>
<form class="m-1 plus_1_layer p-1">
<div class="mb-1 ">
<input type="text" value="" class="form-control form-control-sm rounded-0" aria-label="emptyLevel" id="nametoexport" placeholder="filename without extension" />
</div>
<div class="mb-1">
<select name="exportVersion" class="form-select form-select-sm rounded-0 dropSelect">
<option value="3">Json v0.0.8 (Wkit 8.11+)</option>
<option value="2">Json v0.0.2 (Wkit 8.7+)</option>
<option value="1">Json v0.0.1 (Wkit 8.5)</option>
<option value="0">pre-Wkit 8.5</option>
</select>
</div>
<div class="mb-1">
<input type="checkbox" class="form-check-input rounded-pill me-2 ms-1" id="checkCompile" autocomplete="off" ><label class="form-check-label fs-80" for="checkCompile" >Compile</label>
</div>
</form>
<li><h6 class="dropdown-header bg-info text-black">Utility</h6></li>
<li><a class="dropdown-item" href="#" id="takeashot"><i class="fas fa-camera-retro"></i> 3D Viewport screenshot</a></li>
</ul>
<div class="d-none">
<!--<div class="input-group input-group-sm"> 1.6.6-->
<input type="file" accept=".json" placeholder="Load JSON mlsetup" id="importTech" />
<!--<button class="btn btn-Prim" type="button" id="TheMagicIsHere" data-bs-placement="right" title="Import a json file"><i class="fas fa-file-upload"></i></button>-->
<textarea id="passaggio" class="d-none"></textarea>
<input type="text" id="materialJson" class="d-none" />
</div>
</div>
<div id="tweakContainer"></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-layer0">
<h5 class="offcanvas-title " id="NCLabel">Notification center</h5>
<div class="btn-group">
<button type="button" class="btn btn-tiny btn-dark" aria-label="Copy" id="copyNotyLog"><i class="fa-brands fa-discord"></i></button>
<button type="button" class="btn btn-tiny btn-dark" aria-label="Clean" id="emptyNotyLog"><i class="fa-solid fa-broom"></i></button>
<button type="button" class="btn btn-close my-auto" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
</div>
<div class="offcanvas-body m-2 p-2" id="theTextLog"></div>
</div>
<!-- -->
<div class="offcanvas offcanvas-end offcanvas-hair bg-dark bg-gradient text-light coverFullEditor" data-bs-backdrop="false" 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">
<div class="row gx-0 ">
<div class="col-11">
<div id="hairSwatches" class=''></div>
<div id="hairprofileBuilder" class="layer-2 rounded-0 "><!-- maximum shades will be 5 at the start-->
<span class="badge bg-layer0 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 bg-layer1">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 bg-layer1">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-none 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> -->
</div>
</div>
<!--Offcanvas Import previewer -->
<div class="offcanvas offcanvas-start bg-dark text-light" id="off_MLSetups" aria-labelledby="lblmlsetupseP" data-bs-keyboard="true" data-bs-backdrop="false" >
<div class="offcanvas-header border border-dark p-1">
<h5 class="offcanvas-title text-dark" id="lblmlsetupseP"><i class="fa-solid fa-vest"></i> MLsetup Preview</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="d-grid py-1">
<button class="btn btn-Prim rounded-0" type="button" id="TheMagicIsHere" data-bs-placement="bottom" title="Import a json file">Import the MuLtilayer Setup <i class="fa-solid fa-angles-right"></i></button>
</div>
<div class="offcanvas-body">
<div class="mlpreviewBody" ></div>
</div>
</div>
<!--Offcanvas Import close -->
<div class="offcanvas offcanvas-start bg-dark text-light" id="off-MLab" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header border border-dark p-1">
<h5 class="offcanvas-title text-dark" id="offcanvasLabel"><i class="fa-solid fa-puzzle-piece"></i> µblends Lab</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div id="mbHierarchy" class="m-1 border border-dark list-group rounded-0" > </div>
<span class="badge d-block pb-2">Drop .pngs here:</span>
<div id="dropzone" class="bg-black rounded text-center" ><i class="fa-solid fa-circle-plus text-black fa-2x"></i></div>
<div id="mblendCageManager" class="border border-secondary mt-4">
<div class="input-group layer-4">
<span class="badge layer-9 rounded-0 ">Package</span>
<input type="text" class="form-control form-control-sm rounded-0" list="mbListPackages" id="mbListPackage" />
</div>
<span class='d-block text-center bg-active text-light fs-120' >Write every path as in the archives</span>
<datalist id="mbListPackages">
</datalist>
<div id="mblendUserManager" >
</div>
</div>
<div class="d-grid mt-2">
<button type="button" class="btn btn-sm btn-outline-danger rounded-0" id="CheckSaveMblend" ><i class="fa-solid fa-plus"></i> Check & save </button>
</div>
<div id="mbLogPackager" class="fade mt-3"> </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 class="layer-2 p-2 mt-2 shadow rounded ">
<ul id="Helplist">
<li class="mb-3"><a href="#" id="startHelp"><i class="fa-solid fa-circle-info text-info"></i> What this software Do ?</a></li>
<li><i class="text-warning fa-solid fa-circle-question "></i> How do I ...
<ul class="layer-2">
<li><a href="#" id="hdi_001"><i class="text-warning fa-solid fa-question "></i> ... Start with it</a></li>
</ul>
</li>
<li><i class="text-primary fa-solid fa-arrow-up-right-from-square "></i> Online Documentation
<ul class="layer-2">
<li><a href="#" id="url_001"><i class="text-primary fa-solid fa-link "></i> RedModding Wiki</a></li>
</ul>
</li>
<li><i class="text-danger fa-solid fa-clapperboard"></i> Videos
<ul class="layer-2">
<li><a href="#" id="vid_001"><i class="text-danger fa-solid fa-video "></i> Official features video Channel</a></li>
<li><a href="#" id="vid_002"><i class="text-danger fa-solid fa-video "></i> CP77 Color and Material Mod Tutorial 2022</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="interface">
<div id="withthacanvas">
<canvas id="thacanvas"></canvas>
<div id="modelsNavbar" class="navbar p-0 px-2 rounded layer-2 d-flex justify-content-between">
<div class="btn-group btn-group-sm" role="group" aria-label="3D viewport navigation bar">
<input class="d-none" type="text" name="prefxunbundle" id="prefxunbundle" val="" />
<input type="checkbox" class="d-none" id="prefloaded" disabled />
<input type="checkbox" class="btn-check" id="onlyOneSide" autocomplete="off" />
<label class="btn btn-outline-warning" title="Render model onesided" for="onlyOneSide">1-side </label>
<input type="checkbox" class="btn-check" id="wireFrame" autocomplete="off" />
<label class="btn btn-outline-warning" title="display wireframe" for="wireFrame"><i class="fas fa-border-none"></i></label>
<input type="checkbox" class="btn-check" id="flipMask" autocomplete="off" />
<label class="btn btn-outline-warning" title="flip vertically masks" for="flipMask"><i class="fa-solid fa-rotate fa-rotate-90"></i></label>
<input type="checkbox" class="btn-check" id="flipNorm" autocomplete="off">
<label class="btn btn-outline-normal" title="flip vertically normals" for="flipNorm"><i class="icon-normals"></i></label>
</div>
<div class="btn-group btn-group-sm ms-2 me-1" role="group" aria-label="model loading">
<button type="button" id="btnModPaths" title="Setup a mod path to take assets from" class="btn btn-outline-info"><i class="fa-solid fa-folder-tree"></i></button>
<button type="button" id="btnMdlLoader" title="load or reload the last 3d model" class="btn btn-out-Prim"><i class="fas fa-redo"></i></button>
</div>
<div v class="btn-group" role="group" aria-label="model info">
<span id="withbones" class="text-layer2"><i class="fa-solid fa-bone fa-2x"></i> <i class="icon-normals fa-2x"></i></span>
</div>
<div id="Settings">
<div id="SettingsSummary" class="d-flex justify-content-start border-bottom border-secondary"> </div>
<div id="SettingsScroller" class="pe-1" ></div>
</div>
</div>
</div>
<ul class="nav nav-pills" id="pills-main-IF" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link fs-80 fw-bold p-1 px-2 rounded-0 active" id="pills-editor-tab" data-bs-toggle="pill" data-bs-target="#nav-editor" type="button" role="tab" aria-controls="pills-editor" aria-selected="true">
<i class="fa-solid fa-sliders"></i> Editor
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link fs-80 fw-bold p-1 px-2 rounded-0 " type="button" id="nav-modDatlib-tab" data-bs-toggle="tab" data-bs-target="#nav-modDatlib" role="tab" aria-controls="nav-modDatlib" aria-selected="false">
<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> Models library</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link fs-80 fw-bold p-1 px-2 rounded-0" data-bs-toggle="pill" id="pills-material-tab" data-bs-target="#nav-material" type="button" role="tab" aria-selected="false"> Materials</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link fs-80 fw-bold p-1 px-2 rounded-0" id="pills-appearance-tab" data-bs-toggle="pill" data-bs-target="#nav-appearance" type="button" role="tab" aria-controls="pills-appearance" aria-selected="true">
<i class="fa-solid fa-palette"></i> Appearances
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link fs-80 fw-bold p-1 px-2 rounded-0" id="pills-Maps-tab" data-bs-toggle="pill" data-bs-target="#nav-Maps" type="button" role="tab" aria-controls="pills-editor" aria-selected="false">
<i class="fa-solid fa-images"></i> Maps
</button>
</li>
</ul>
<div class="tab-content ps-1 layer1" id="nav-tabMLSB">
<div class="tab-pane fade show active" id="nav-editor" role="tabpanel" aria-labelledby="pills-editor-tab" tabindex="-1">
<div id="MlSetupsList" class=""></div>
<!--The New Editor-->
<div id="editor-container">
<div id="MatSelector">
<details id="sbmeshEN">
<summary>Submesh Toggler</summary>
<ul></ul>
</details>
<details open class="" title="">
<summary>ML materials</summary>
<section id="Mlswitcher"></section>
</details>
</div>
<div id="MlEditor" class="text-white layer-1 rounded">
<div class="dropdown" id="appearanceSwitcher">
<button class="btn btn-sm rounded-0 btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false" style="width:100%;">
Appearances switcher
</button>
<ul class="dropdown-menu dropdown-menu-dark rounded-0">
<li><a class="dropdown-item" href="#">Empty, load a model</a></li>
</ul>
</div>
<span class="badge w-100 rounded-0 ">Layers</span>
<div class="d-grid"><button class="btn btn-out-Prim btn-sm rounded-0" id="applytoMyLayer" type="button" 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 controLayers" tabindex="1">
<li data-labels="(null_null) unused" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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="btn btn-group btn-group-sm w-100 p-0 m-0">
<button class="btn btn-outline-warning" type="button" id="actlast-Layer" data-bs-placement="bottom" title="Activate the last unactive layer (max 0-19)"><i class="fas fa-plug"></i> add layer</button>
<button class="btn btn-outline-warning" type="button" id="actAll-Layer" data-bs-placement="bottom" title="Activate all layers">Refill layers</button>
</div>
<div class="text-center bg-layer2 m-2 p-1 rounded">
<input id="layerRandomCfg" class="form-control form-control-sm rounded-0 border border-warning bg-layer0" type="search" placeholder="Ex. 0-19 or 0,2,7-13" aria-label="models searcher" />
<div class="btn-toolbar justify-content-between mt-2" role="toolbar" aria-label="Toolbar actions for layers">
<div class="btn-group btn-group-sm btn-tiny" role="group" aria-label="Layer Clean/wiping Actions">
<button type="button" class="btn btn-outline-primary" id="wipe-layer"><i class="fas fa-eraser"></i> wipe</button>
<button type="button" class="btn btn-outline-primary" id="wash-layers"><i class="fas fa-soap"></i> clean</a></button>
</div>
<div class="btn-group btn-group-sm btn-tiny" role="group" aria-label="Randomizer tools">
<button type="button" class="btn btn-outline-warning" id="layerRandomizer" title="Randomize layers"><i class="fas fa-random"></i> random</button>
<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 bg-layer1 border border-warning p-2" style="width:22rem;">
<div class="form-check form-switch">
<input class="form-check-input rounded-pill" 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 rounded-pill" type="checkbox" id="rndMbWild">
<label class="form-check-label" for="rndMbWild"><details><summary>Wild randomize µblends</summary>On a basis, the microblend are setup to use the flat default one, 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="input-group input-group-sm m-1 " role="group" aria-label="Layers randomizer"> </div>
</div>
<div class="twoColGrid">
<div class="layer-2 m-2"><span class="badge w-100 rounded-0 "> Ratio </span>
<input type="number" class="form-control rounded-0" 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-2 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 rounded-pill " type="checkbox" role="switch" id="useNormals" checked>
</div>
</div>
</div>
</div>
<!--End layersList-->
<div id="layer_settings" class="layer-2 rounded-0">
<div id="matdisplay" class="no-gutters layer-3" >
<div><canvas id="materialDis" width="128" height="128" data-bs-toggle="modal" data-bs-target="#materialModal" ></canvas></div>
<div>
<div>
<div>
<div class="input-group input-group-sm mb-1">
<div class="badge my-auto multiplier" data-mul="1">Tiles</div>
<input type="number" class="form-control rounded-0 driven" id="layerTile" value="1.0" step="0.01" min="0.01" max="150.0">
<input type="range" class="friendo flex-grow-1 border-0" data-control="#layerTile" value="1.0" step="0.01" min="0.01" max="150">
</div>
<div class="input-group input-group-sm my-1">
<div class="badge my-auto">Opacity</div>
<input type="number" class="form-control form rounded-0 driven" id="layerOpacity" value="1.0" step="0.01" min="0">
<input type="range" class="friendo flex-grow-1 border-0" data-control="#layerOpacity" value="1.0" step="0.01" min="0.0" max="1.0">
</div>
</div>
<div class="">
<div class="input-group input-group-sm my-1">
<div class="badge my-auto">Offset</div><span class="input-group-text border-0">U</span>
<input type="number" class="form-control rounded-0" id="layerOffU" value="0.0" step="0.01">
<span class="input-group-text border-0">V</span>
<input type="number" class="form-control rounded-0" id="layerOffV" value="0.0" step="0.01">
</div>
</div>
<div>
<div class="input-group input-group-sm my-1" >
<div class="badge my-auto">Rough</div><span class="input-group-text border-0">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>
<span class="input-group-text border-0">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>
<div class="input-group input-group-sm my-1">
<div class="badge my-auto">Normals</div>
<select class="form-select rounded-0" id="layerNormal" aria-label="microblends selection lists">
<optgroup id="defaultNormal" label='Reset'><option value="null" data-force="1" >null</option></optgroup>
<optgroup id="Norm_Pow_values" label='Materials'></optgroup>
</select>
</div>
</div>
<div>
<div class="input-group input-group-sm mt-1">
<div class="badge my-auto">Metal</div><span class="input-group-text border-0">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>
</div>
</div>
</div>
<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">
<button class="btn d-inline-block btn-sm float-end rounded copyMe" type="button">Copy</button>
</div>
<details id="legacyMatSector"><summary id="materialSummary" >unused</summary>
<div class="input-group layer-4">
<input id="legacyMatFinder" class="form-control" type="search" placeholder="Filter the materials" aria-label="material searcher">
<!-- <button type="button" id="legacyMatFinderCleared" 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>
<details open><summary id="colorManagament">null_null</summary>
<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" id="colorPntage">rgb();</span>
<span class="badge border border-secondary w-100 rounded-0 tint" > </span>
</div>
</div>
<div>
<div class="input-group input-group-sm mb-1">
<div class="badge my-auto">Luminosity</div>
<input type="number" class="form-control rounded-0 driven" id="colorLum" value="1.0" step="0.01" min="0.01" max="150.0">
<input type="range" class="friendo flex-grow-1 border-0" data-control="#colorLum" value="1.0" step="0.01" min="0.01" max="10.0">
</div>
</div>
</details>
<div class="input-group input-group-sm">
<span class="input-group-text">Color filter</span>
<input type="text" class="form-control" aria-label="Sizing example input" id="colorLbFinder" placeholder="write a label to find the color">
<button type="button" id="colorCleaner" title="" class="btn text-warning" data-bs-original-title="Clear the search field"><i class="fa fa-times"></i></button>
<input type="checkbox" class="btn-check" id="colororder" checked autocomplete="off">
<label class="btn btn-outline-warning btn-sm" for="colororder" data-bs-original-title="Change the visual Order of the swatches" ><i class="fa-solid fa-sort"></i></label>
<input type="checkbox" class="btn-check" id="BWAdd" autocomplete="off">
<label class="btn btn-outline-warning btn-sm" for="BWAdd" data-bs-original-title="Add Black and white, but you need to install a mod with them (Multilayer Material Xtender has them)"><i class="fa-solid fa-swatchbook"></i></label>
<button type="button" id="colorReset" title="" class="btn btn-outline-info" data-bs-original-title="Choose the basic override null_null"><i class="fa-solid fa-eraser"></i></button>
</div>
<div id="colordisplay" class="layer-2">
<div id="cagecolors" data-index="lum">
<span style="background-color:rgb(50%,50%,50%);" data-lum='0.5' title='null_null' > </span>
</div>
</div>
</div>
<!-- Microblend part-->
<div id="micropanel" class="layer-2 rounded-0">
<span class="d-block bg-normal text-black rounded-0 p-2">µ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>
<div id="MicroblendsLibrary" class="my-2">
<span class="w-100 rounded-0 p-2" >Core µblends</span>
<div id="microdisplay" class="layer-2 mx-2">
<div id="cagethemicroblends" tabindex="1">
<li style="background-image:url('./images/thumbs/default.png');" data-package='source' title="default" data-path="base\surfaces\microblends\default.xbm" > </li>
</div>
</div>
</div>
<details open>
<summary class="bg-normal text-black">µblends Parameters</summary>
<div class="p-2">
<select class="form-select rounded-0" id="mbSelect" aria-label="microblends selection lists">
<optgroup label='core'>
<option data-package="source" data-thumbnail="./images/default.png" value="base\surfaces\microblends\default.xbm" selected >default</option>
</optgroup>
</select>
</div>
<div class="p-2">
<div class="input-group input-group-sm layer-2 ">
<div class="badge my-auto">Tiles</div> <input type="number" class="form-control rounded-0 driven" id="mbTile" value="1.0" step="0.01" min="0.01" max="150">
<input type="range" class="friendo flex-grow-1 border-0" data-control="#mbTile" value="1.0" step="0.01" min="0.01" max="150">
</div>
<div class="input-group input-group-sm layer-2">
<div class="badge my-auto">contrast</div>
<input type="number" class="form-control rounded-0 driven" id="mbCont" value="0.0" step="0.01" 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" >
<input type="range" class="friendo flex-grow-1 border-0" data-control="#mbCont" value="0.0" step="0.01" min="0.0" max="1.0">
</div>
<div class="input-group input-group-sm layer-2 ">
<div class="badge my-auto">normals</div>
<input type="number" class="form-control rounded-0 driven" id="mbNorm" value="1.0" step="0.01">
<input type="range" class="friendo flex-grow-1 border-0" data-control="#mbNorm" value="1.0" step="0.01" min="0.0" max="2.0">
</div>
</div>
<div class="layer-3 m-1 p-1">
<span class="d-block rounded-0 p-2"><i class="fas fa-crosshairs"></i> µ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-normal rounded-0 btn-sm" id="AimMBlend" ><i class="fas fa-crosshairs"></i> µ Aim</button>
</div>
</div>
<div id="CustMicroblendsGallery" class="my-2">
<div class="d-flex justify-content-between">
<span class=" d-block ps-2" >Custom µblends </span>
<div class="btn-group btn-group-sm" 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-slash"></i></button>
<button type="button" data-bs-toggle="offcanvas" data-bs-target="#off-MLab" class="btn btn-outline-warning"><i class="fa-solid fa-puzzle-piece"></i></button>
</div>
</div>
<div id="cu_mu_display" class="layer-2 mx-2">
<div id="cagetheCuMBlends" ></div>
</div>
</div>
<div class="m-2">
<span class="w-100 rounded-0 p-2" >µblend preview tool</span>
<div class='row gx-0'>
<div class="col-6 m-0">
<input id="bg-changer" type="color" value="#000000" title="Background color check for microblend">
</div>
<div class="col-6 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>
<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>
<span> </span>
</details>
<div class="" >
<img id="mb-preview" style="background-color:#000;" alt="microblend preview" src='./images/default.png' >
<!-- microblends-data -->
</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">µblend Build</a>
<a href="#" class="d-none" data-bs-toggle="offcanvas" data-bs-target="#off-MLab">µblend Lab</a>
<a href="#" class="d-none" data-bs-toggle="offcanvas" data-bs-target="#NotificationCenter">Notification Center</a>
</div>
</div>
</div>
<!--End of the New Editor-->
</div>
<div class="tab-pane fade " id="nav-material" role="tabpanel" aria-labelledby="pills-material-tab" tabindex="-1">
<ul>
</ul>
</div>
<div class="tab-pane fade " id="nav-appearance" role="tabpanel" aria-labelledby="pills-appearance-tab" tabindex="-1">
<input id="MBAFinder" class="form-control" type="search" placeholder="Search in the MaterialBufferArray list" aria-label="Search in the MaterialBufferArray list">
<div id="appeInfo" class="row row-cols-3 row-cols-xs-2 g-4 m-1 p-1 fs-90" > </div>
</div>
<div class="tab-pane fade " id="nav-Maps" role="tabpanel" aria-labelledby="nav-Maps-tab" tabindex="-1">
<div class="text-center">
<ul class="nav nav-pills layer-2 px-2 fs-80" id="textureTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" 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>
<li class="nav-item" role="presentation">
<button class="nav-link" id="texturegrp-tab" data-bs-toggle="tab" data-bs-target="#textureGroup" type="button" role="tab" aria-controls="Texture Group" aria-selected="true">Textures</button>
</li>
</ul>
<div class="tab-content" id="OffcanvasInfo">
<!--<div class="tab-pane fade" id="normtab" role="tabpanel" aria-labelledby="norm-tab">
</div>-->
<div class="tab-pane fade show active " 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 controLayers">
<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-2 rounded svgBtn">
<span class="d-block badge rounded-0 txt-secondary">Tools</span>
<span class="dropdown">
<button class="btn btn-sm text-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-layer-group fa-2x"></i>
</button>
<ul class="dropdown-menu bg-secondary p-0" id="mLayerOperator">
</ul>
</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="fillMsk" class="btn btn-sm text-secondary" title="Revert to the last loaded"><i class="fa-solid fa-fill-drip 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 pb-2">
<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-2 rounded">
<input id="strokeMsk" name="strokeMsk" type="range" min="0.2" max="50" value="0.2" step="0.1" list="strokeMarkers">
<datalist id="strokeMarkers">
<option value="0.2"></option>
<option value="1"></option>
<option value="5"></option>
<option value="10"></option>
<option value="25"></option>
<option value="50"></option>
</datalist>
</div>
<div id="resetShades" class="d-flex justify-content-center my-1 py-1 layer-2 rounded">
<span class="choose" data-color="000000" style="background-color:#000000"> </span>
<span class="choose" data-color="FFFFFF" style="background-color:#FFFFFF"> </span>
</div>
<div class="my-1 py-1 layer-2 rounded">
<span id="maskoolor" class="choose mx-auto d-block" data-color="808080" style="background-color:#808080"> </span>
<input id="slidemask" type="range" min="0" max="255" value="128" step="1" list="paintMarkers">
<datalist id="paintMarkers">
<option value="0"></option>
<option value="128"></option>
<option value="255"></option>
</datalist>
</div>
<div class="my-2 border border-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">
<select class="form-select my-2" id="UVformat" aria-label="UV map texture size">
<option selected value="0">Export size</option>
<option value="256">256px</option>
<option value="512">512px</option>
<option value="1024">1024px</option>
<option value="2048">2048px</option>
<option value="4096">4096px</option>
</select>
<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="fs-80 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 class="tab-pane fade" id="textureGroup" role="tabpanel" aria-labelledby="texturegrp-tab">
<div class="row p-0 m-0">
<div class="col-2 py-2" id="listTextures" ></div>
<div class="col-10" ><canvas id="texturePlayer"></canvas></div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade " id="nav-modDatlib" role="tabpanel" aria-labelledby="nav-modDatlib-tab" tabindex="-1">
<!-- Model info for models-->
<form id='modelUserDataForm' class="p-2 bg-layer1">
<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-info text-dark border-0" ><i class="fa-solid fa-layer-group"></i></span>
<input type="text" class="form-control" id="materialTarget" placeholder="path to the material" readonly />
<button type="button" class="btn btn-outline-info shellOpen" alt="Shell open"><i class="fa-solid fa-pencil"></i></button>
<button data-target="#materialTarget" type="button" class="btn btn-outline-info copyinfo" alt="Copy the path"><i class="fas fa-copy"></i></button>
</div>
<div class="input-group input-group-sm mb-2">
<span class="input-group-text bg-dark text-info border-info" >
<span class="icon-mesh "><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>
</span>
<input type="text" size="10" class="form-control" loaded="false" id="modelTarget" placeholder="path to the model" readonly />
<button type="button" class="btn btn-outline-info copyinfo" data-target="#modelTarget" title="Copy folder path information on glb model"><i class="fas fa-copy"></i></button>
<button id="modelOpenPath" type="button" class="btn btn-outline-info " title="Check the folder content"><i class="fa-solid fa-folder-open"></i></button>
<!-- <button id="modelCustomPath" type="button" class="btn btn-outline-primary" title="Load a model"><i class="fas fa-box-open"></i> Custom</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" >
<button data-target="#masksTemplate" type="button" class="btn btn-outline-info copyinfo" title="Copy folder path information for the maskset "><i class="fas fa-copy"></i></button>
<button id="masksOpenPath" type="button" class="btn btn-outline-info " title="Check the folder content"><i class="fa-solid fa-folder-open"></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 data-target="#normTemplate" type="button" class="btn btn-outline-info copyinfo" title="Copy folder path information for normal map "><i class="fas fa-copy"></i></button>
<button id="NormOpenPath" type="button" class="btn btn-outline-info " title="Check the folder content"><i class="fa-solid fa-folder-open"></i></button>
</div> -->
</form>
<!--Model table-->
<table id="DataModelsLibrary" class="table bg-layer1 table-striped table-hover table-sm fs-80" style="width:100%">
<thead><tr><th></th><th>Name</th><th>Path</th><th>Tags</th><!-- <th>mask</th> --><th>normal</th><th></th></tr></thead>
<tbody class="bg-layer1"></tbody>
</table>
</div>
</div>
</div>
</div>
<footer class='w-100 main bg-layer0'>
<button id="notyCounter" type="button" class="btn btn-dark rounded-0 btn-sm text-start py-0 px-1 m-0" data-bs-toggle="offcanvas" data-bs-target="#NotificationCenter" title="Click to see notification messages and errors"><i class="fas fa-exclamation-triangle"></i> <span class="badge bg-warning text-dark"></span></button>
<i id="paintActive" class="text-secondary fa-solid fa-brush align-bottom m-auto"></i>
<div id="foot-message"> </div>
<div id="pBar" > </div>
<div> </div>
</footer>
<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-soap fa-flip-horizontal"></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="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">
<details open class="pb-1" ><summary class="mb-2">Base Game</summary>
<div class="form-check form-switch mx-3">
<input class="form-check-input rounded-pill" type="checkbox" role="switch" id="arc_NC3" checked>
<span class="badge bg-warning text-dark">Characters</span>
</div>
<div class="progress border border-dark my-1 bg-layer0 mx-3" style="height: 1.5rem;" >
<div id="uncook_step1" class=" 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>
<div class="form-check form-switch mx-3">
<input class="form-check-input rounded-pill" type="checkbox" role="switch" id="arc_AP4" checked>
<span class="badge bg-warning text-dark">Weapons</span>
</div>
<div class="progress border border-dark my-1 bg-layer0 mx-3" 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>
<div class="form-check form-switch mx-3">
<input class="form-check-input rounded-pill" type="checkbox" role="switch" id="arc_GA4" checked>
<span class="badge bg-warning text-dark">Vehicles & mechanicles</span>
</div>
<div class="progress border border-dark my-1 bg-layer0 mx-3" 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>
<div class="form-check form-switch mx-3">
<input class="form-check-input rounded-pill" type="checkbox" role="switch" id="arc_EN" checked>
<span class="badge bg-warning text-dark">Environments</span>
</div>
<div class="progress border border-dark mt-1 bg-layer0 mx-3" style="height: 1.5rem;" >
<div id="uncook_step9" 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>
</details>
<details open><summary>Phantom Liberty</summary>
<div class="form-check form-switch mx-3">
<input class="form-check-input rounded-pill" type="checkbox" role="switch" id="ep1_CH" checked>
<span class="badge bg-warning text-dark">Characters</span>
</div>
<div class="progress border border-dark mt-1 bg-layer0 mx-3" style="height: 1.5rem;" >
<div id="uncook_step10" 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>
<div class="form-check form-switch mx-3">
<input class="form-check-input rounded-pill" type="checkbox" role="switch" id="ep1_WE" checked>
<span class="badge bg-warning text-dark">Weapons</span>
</div>
<div class="progress border border-dark mt-1 bg-layer0 mx-3" style="height: 1.5rem;" >
<div id="uncook_step11" 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>
<div class="form-check form-switch mx-3">
<input class="form-check-input rounded-pill" type="checkbox" role="switch" id="ep1_VE" checked>
<span class="badge bg-warning text-dark">Vehicles</span>
</div>
<div class="progress border border-dark mt-1 bg-layer0 mx-3" style="height: 1.5rem;" >
<div id="uncook_step12" 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>
<div class="form-check form-switch mx-3">
<input class="form-check-input rounded-pill" type="checkbox" role="switch" id="ep1_ME" >
<span class="badge bg-dark">Mechanical</span>
</div>
<div class="progress border border-dark mt-1 bg-layer0 mx-3" style="height: 1.5rem;" >
<div id="uncook_step13" 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>
<div class="form-check form-switch mx-3">
<input class="form-check-input rounded-pill" type="checkbox" role="switch" id="ep1_EN" >
<span class="badge bg-dark">Environment</span>
</div>
<div class="progress border border-dark mt-1 bg-layer0 mx-3" style="height: 1.5rem;" >
<div id="uncook_step14" 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>
</details>
<details open>
<summary>Materials</summary>
<div class="form-check form-switch m-3">
<input class="form-check-input rounded-pill" type="checkbox" role="switch" id="base_MT" checked>
<span class="badge bg-warning text-dark">Materials textures</span>
</div>
<div class="progress border border-dark mt-1 bg-layer0 mx-3" style="height: 1.5rem;" >
<div id="uncook_step16" 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>
</details>
</div>
<div id="uncookLogger" class="col-5 p-1 bg-layer0" >
<div class="text-muted"> </div>
</div>
</div>
</div>
<div class="modal-footer justify-content-between p-1">
<span>
<button type="button" class="btn btn-sm btn-outline-warning" id="triggerUncook" >Uncook</button>
<button type="button" class="btn btn-sm btn-outline-plain" id="stopUncook" disabled >Stop</button>
</span>
<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>µblends Creation</span>
<span class="badge d-block bg-warning text-dark mt-4">Uncook</span>
<div class="progress border border-dark mb-3 bg-layer0" 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 bg-layer0" 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 bg-layer0" 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 bg-layer0" >
<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="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 µblend preview display</li>
<li>Developed a visual system for µblend positioning over the current layer mlmasks, with that you can:
<ul>
<li>Resize the µblend to fit the masks space</li>
<li>Position vertically and horizontally the µblend</li>
<li>Sync the µblend values with the layers one. Useful to get the perfect corrispondence when you are placing graphic_logos µblend and materials </li>
</ul>
</li>
<li>You can explicit custom path for materials and µblends</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>
</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