PageSourceSearch

https://puppiizsunniiz.github.io/AN-EN-Tags/akhrchars.html

html puppiizsunniiz.github.io collected 2026-10-03 09:47:43 UTC 72,684 bytes, 759 lines download raw bytes

1<!DOCTYPE html>
2<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml">
3<head>
4    <!--for CDN issue
5        1.  https://cdn.jsdelivr.net        2024-05-02 issue
6        2.  https://cdn.jsdelivr.net
7    -->
8    <meta charset='utf-8' />
9    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'>
10    <meta name='theme-color' content='#222222ff'>
11    <title translate-id='web-title'>Arknights Operator Details</title>
12    <link rel='manifest' href='./manifest.json' crossorigin='use-credentials'>
13    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'>
14    <link rel='stylesheet' href='css/ak.css'>
15    <link rel='stylesheet' href='css/akMaterial.css'>
16    <link rel='stylesheet' href='css/akchardetail.css'>
17    <link href='https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.css' rel='stylesheet'>
18    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico'>
19    
19<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js'></script>
19
20    
20<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js'></script>
20
21    
21<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js'></script>
21
22    
22<script src="js/spine-widget38.js"></script>
22
23    <!--
23<script src="js/spine-widget.js"></script>
23-->
24    
24<script src="js/spine-skeleton-binary.js"></script>
24
25    <!-- site tag (gtag.js) - Google Analytics -->
vendor: 68 bytes, lines 25-26
25
26    <script async src='https://www.googletagmanager.com/gtag/js?id=
26UA-159317757-1
vendor: 16 bytes, lines 26-27
26'></script>
27    
27<script>
28        
vendor: 154 bytes, lines 28-31
28window.dataLayer = window.dataLayer || [];
29        function gtag() { dataLayer.push(arguments); }
30        gtag('js', new Date());
31        gtag('config', '
31UA-159317757-1
vendor: 17 bytes, lines 31-33
31');
32        
33    
33</script>
33
34</head>
35<body id="akhrchars">
36    <div id="loadingOverlay" style="width: 100vw; height: 150%; background-color: #111111; position: absolute; z-index: 9999; top:0px;">
37        <div class="d-flex justify-content-center" style="margin-top: 50vh">
38            <div class="spinner-border" role="status" style="border-color: #0098DC; border-right-color: transparent; width: 4rem; height: 4rem;">
39            </div>
40        </div>
41        <div style="width: 100%; text-align: center; margin-top: 13px;">
42            <div class='loadtext'>Loading Toolbox</div>
43            <div></div>
44            <div class="loadforce" onclick="hideload()"><a>Click here if stuck on loading</a></div>
45        </div>
46    </div>
47    
47<script>
48        $(function(){
49          $('#nav-placeholder').load('nav.html');
50        });
51        $(window).on("load", function () {
52            setTimeout(function () {
53                $("#loadingOverlay").fadeOut(); 
54            }, 1000);
55        });
56    </script>
56
57    <!-- style=' background-image: url(./img/extra/bg1.png)' -->
58    <button class='btn btn-sm btn-primary goToTag' style='position:fixed;bottom:15px ;right: 0px;size:70px 70px;padding: 10px;z-index: 10000' id='to-tag' type='button'>^ </button>
59    <nav id="aknav" class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark" style="background-image: linear-gradient(#222222ff 70%,#222222ff , #111111aa );">
60            <img src="https://puppiizsunniiz.github.io/Arknight-Images/factions/logo_rhodes.png" width="40" height="40" style="transform:scale(1.2,1.2)translate(-8px,1px)"class="d-inline-block align-top" alt="">
61            <a class="navbar-brand" href="#" translate-id="topbar-1">Arknights Toolbox</a>
62            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
63                    aria-controls="navbarNav" aria-expanded="false" aria-label="展开">
64                <span class="navbar-toggler-icon"></span>
65            </button>
66    </nav>
67    <div id='acedonate'></div>
68    <div style='padding-bottom:40px;'></div>
69    <!-- <div class='warning-sign'style='position: absolute;z-index: 999999;background:#aaa;top:100px;left:50%;width:500px;height:200px;margin-left:-250px;text-align:center; vertical-align:center'>aaaaaaaaaaaaaaaaaaaaa</div> -->
70    <div id='opchoosemodal' class='modal fade' role='dialog' >
71        <div class='modal-dialog' style="max-width: 860px;">
72            <div class='modal-content' style='background-color: #444'>
73                <!-- <div class='modal-header' style='border-bottom: 1px solid #4f4f4f'>
74                    <h6 class='modal-title' style="color:white;">Select Operator</h6>
75                    <button type='button' style='color:white;' class='close' data-dismiss='modal'>&times;</button>
76                </div> -->
77                <div class='modal-body' style="max-height: 90vh;overflow-y: auto;overflow-x:hidden">
78                    <div style="color:white;text-align: center;">Select Operator<button type='button' style='color:white;right: 10px;top:5px;position: absolute;' class='close' data-dismiss='modal'>&times;</button></div>
79                    <div class='filter-category'>
80                        <div id="filter-name-class" class="btn filter-name filter-exclusive" onclick="toggleExclusive(this)">Class</div>
81                        <div class='filter-category-content'>
82                            <div class="op-class btn-secondary tooltip2" data-id="CASTER" section="class" onclick="toggleBtn(this)"><img class='filter-img' width='40' height="40" src='https://puppiizsunniiz.github.io/Arknight-Images/classes/class_caster.png'><span class="tooltiptext tooltiptop tooltipstyle1 nohover">Caster</span></div>
83                            <div class="op-class btn-secondary tooltip2" data-id="WARRIOR" section="class" onclick="toggleBtn(this)"><img class='filter-img' width='40' height="40" src='https://puppiizsunniiz.github.io/Arknight-Images/classes/class_guard.png'><span class="tooltiptext tooltiptop tooltipstyle1 nohover">Guard</span></div>
84                            <div class="op-class btn-secondary tooltip2" data-id="MEDIC" section="class" onclick="toggleBtn(this)"><img class='filter-img' width='40' height="40" src='https://puppiizsunniiz.github.io/Arknight-Images/classes/class_medic.png'><span class="tooltiptext tooltiptop tooltipstyle1 nohover">Medic</span></div>
85                            <div class="op-class btn-secondary tooltip2" data-id="SNIPER" section="class" onclick="toggleBtn(this)"><img class='filter-img' width='40' height="40" src='https://puppiizsunniiz.github.io/Arknight-Images/classes/class_sniper.png'><span class="tooltiptext tooltiptop tooltipstyle1 nohover">Sniper</span></div>
86                            <div class="op-class btn-secondary tooltip2" data-id="SPECIAL" section="class" onclick="toggleBtn(this)"><img class='filter-img' width='40' height="40" src='https://puppiizsunniiz.github.io/Arknight-Images/classes/class_specialist.png'><span class="tooltiptext tooltiptop tooltipstyle1 nohover">Specialist</span></div>
87                            <div class="op-class btn-secondary tooltip2" data-id="SUPPORT" section="class" onclick="toggleBtn(this)"><img class='filter-img' width='40' height="40" src='https://puppiizsunniiz.github.io/Arknight-Images/classes/class_supporter.png'><span class="tooltiptext tooltiptop tooltipstyle1 nohover">Supporter</span></div>
88                            <div class="op-class btn-secondary tooltip2" data-id="TANK" section="class" onclick="toggleBtn(this)"><img class='filter-img' width='40' height="40" src='https://puppiizsunniiz.github.io/Arknight-Images/classes/class_defender.png'><span class="tooltiptext tooltiptop tooltipstyle1 nohover">Defender</span></div>
89                            <div class="op-class btn-secondary tooltip2" data-id="PIONEER" section="class" onclick="toggleBtn(this)"><img class='filter-img' width='40' height="40" src='https://puppiizsunniiz.github.io/Arknight-Images/classes/class_vanguard.png'><span class="tooltiptext tooltiptop tooltipstyle1 nohover">Vanguard</span></div>
90                        </div>
91                        <div class="btn btn-danger btn-clear" id="clear-filter-class" onclick="clearFilter('.op-class, .op-branch')" clear-data=".op-class, .op-branch">Clear</div>
92                    </div>
93                    <div class='filter-category'style="min-height:44px">
94                        <div id="filter-name-branch" class="btn filter-name filter-exclusive" onclick="toggleExclusive(this)">Sub class</div>
95                        <div class='filter-category-content' id="branch-container">
96                        </div>
97                        <div class="btn btn-danger btn-clear" id="clear-filter-branch" onclick="clearFilter('.op-branch')" clear-data=".op-branch">Clear</div>
98                    </div>
99                    <div class='filter-category'>
100                        <div id="filter-name-rarity" class="btn filter-name filter-exclusive" onclick="toggleExclusive(this)">Extra</div>
101                        <div class='filter-category-content'>
102                            <div class="btn btn-secondary btn-sm my-1 op-extra filter-btn" section="extra" onclick="toggleBtn(this)" id="filter-equip" >Module</div>
103                            <div id="group-rarity" class="btn btn-sm my-1 filter-btn" onclick="toggleGroup(this)">Group</div>
104                            <div class="btn btn-secondary btn-sm my-1 op-rarity filter-btn op-rarity2-6" onclick="toggleBtn(this)" section="rarity" data-id="5">6<i class="fa fa-star"></i></div>
105                            <div class="btn btn-secondary btn-sm my-1 op-rarity filter-btn op-rarity2-5" onclick="toggleBtn(this)" section="rarity" data-id="4">5<i class="fa fa-star"></i></div>
106                            <div class="btn btn-secondary btn-sm my-1 op-rarity filter-btn op-rarity2-4" onclick="toggleBtn(this)" section="rarity" data-id="3">4<i class="fa fa-star"></i></div>
107                            <div class="btn btn-secondary btn-sm my-1 op-rarity filter-btn op-rarity2-3" onclick="toggleBtn(this)" section="rarity" data-id="2">3<i class="fa fa-star"></i></div>
108                            <div class="btn btn-secondary btn-sm my-1 op-rarity filter-btn op-rarity2-2" onclick="toggleBtn(this)" section="rarity" data-id="1">2<i class="fa fa-star"></i></div>
109                            <div class="btn btn-secondary btn-sm my-1 op-rarity filter-btn op-rarity2-1" onclick="toggleBtn(this)" section="rarity" data-id="0">1<i class="fa fa-star"></i></div>
110                        </div>
111                        <div class="btn btn-danger btn-clear" id="clear-filter-rarity" onclick="clearFilter('.op-rarity')" clear-data=".op-rarity">Clear</div>
112                    </div>
113                    <div class="collapsible-closed" id="adv-filter" onclick="collapse(this)" target="collapsed-section">Advanced options<div class="fas fa-angle-down" style="float: right; margin-right: 10px; margin-top: 2px;"></div></div>
114                    <div class="collapsed-section-closed" id="collapsed-section" style="max-height: 0;">
115                        <!-- <div class='filter-category'>
116                            <div id="filter-name-subclass" class="btn filter-name filter-exclusive" onclick="toggleExclusive(this)">Subclass</div>
117                            <div class='filter-category-content' id="subclass-container">
118                            </div>
119                            <div class="btn btn-danger btn-clear" id="clear-filter-subclass" onclick="clearFilter('.op-subclass')" clear-data=".op-subclass">Clear</div>
120                        </div> -->
121                        <div class='filter-category'>
122                            <div id="filter-name-gamemode" class="filter-name filter-exclusive">Mode</div>
123                            <div class='filter-category-content'>
124                                <div class="btn btn-sm my-1 filter-btn op-gamemode btn-primary ALL" onclick="toggleBtn(this)" section="gamemode" data-id="ALL">ALL</div>
125                                <div class="btn btn-sm my-1 filter-btn op-gamemode btn-secondary" onclick="toggleBtn(this)" section="gamemode" data-id="BASE">BASE</div>
126                                <div class="btn btn-sm my-1 filter-btn op-gamemode btn-secondary" onclick="toggleBtn(this)" section="gamemode" data-id="SO" title="Special Operator">SO</div>
127                                <div class="btn btn-sm my-1 filter-btn op-gamemode btn-secondary" onclick="toggleBtn(this)" section="gamemode" data-id="IS" title="Integrated Strategies">IS</div>
128                                <div class="btn btn-sm my-1 filter-btn op-gamemode btn-secondary" onclick="toggleBtn(this)" section="gamemode" data-id="SP" title="Stronghold Protocol">SP</div>
129                            </div>
130                            <div class="btn btn-danger btn-clear" id="clear-filter-gamemode" onclick="clearFilter('.op-gamemode');toggleBtn($('.ALL'))" clear-data=".op-gamemode">Clear</div>
131                        </div>
132                        <div class='filter-category'>
133                            <div id="filter-name-gender" class="btn filter-name filter-exclusive" onclick="toggleExclusive(this)">Gender</div>
134                            <div class='filter-category-content'>
135                                <div class="btn btn-secondary btn-sm my-1 op-gender filter-btn" onclick="toggleBtn(this)" section="gender" data-id="0"></div>
136                                <div class="btn btn-secondary btn-sm my-1 op-gender filter-btn" onclick="toggleBtn(this)" section="gender" data-id="1"></div>
137                                <div class="btn btn-secondary btn-sm my-1 op-gender filter-btn" onclick="toggleBtn(this)" section="gender" data-id="2"></div>
138                                <div class="btn btn-secondary btn-sm my-1 op-gender filter-btn" onclick="toggleBtn(this)" section="gender" data-id="3"></div>
139                            </div>
140                            <div class="btn btn-danger btn-clear" id="clear-filter-gender" onclick="clearFilter('.op-gender')" clear-data=".op-gender">Clear</div>
141                        </div>
142
143                        <div class='filter-category'>
144                            <div id="filter-name-tag" class="btn filter-name filter-exclusive" onclick="toggleExclusive(this)">Tags</div>
145                            <div class='filter-category-content'>
146                                <div class="btn btn-sm my-1 filter-btn-s op-tag btn-secondary" onclick="toggleBtn(this)" data-id="Melee"></div>
147                                <div class="btn btn-sm my-1 filter-btn-s op-tag btn-secondary" onclick="toggleBtn(this)" data-id="Ranged"></div>
148                                <div class="btn btn-sm my-1 filter-btn-s op-tag btn-secondary" onclick="toggleBtn(this)" data-id="Healing"></div>
149                                <div class="btn btn-sm my-1 filter-btn-s op-tag btn-secondary" onclick="toggleBtn(this)" data-id="Support"></div>
150                                <div class="btn btn-sm my-1 filter-btn-s op-tag btn-secondary" onclick="toggleBtn(this)" data-id="DPS"></div>
151                                <div class="btn btn-sm my-1 filter-btn-s op-tag btn-secondary" onclick="toggleBtn(this)" data-id="AoE"></div>
152                                <div class="btn btn-sm my-1 filter-btn-s op-tag btn-secondary" onclick="toggleBtn(this)" data-id="Slow"></div>
153                                <div class="btn btn-sm my-1 filter-btn-s op-tag btn-secondary" onclick="toggleBtn(this)" data-id="Survival"></div>
154                                <div class="btn btn-sm my-1 filter-btn-s op-tag btn-secondary" onclick="toggleBtn(this)" data-id="Defense"></div>
155                                <div class="btn btn-sm my-1 filter-btn-s op-tag btn-secondary" onclick="toggleBtn(this)" data-id="Debuff"></div>
156                                <div class="btn btn-sm my-1 filter-btn-s op-tag btn-secondary" onclick="toggleBtn(this)" data-id="Shift"></div>
157                                <div class="btn btn-sm my-1 filter-btn-s op-tag btn-secondary" onclick="toggleBtn(this)" data-id="Crowd Control"></div>
158                                <div class="btn btn-sm my-1 filter-btn-s op-tag btn-secondary" onclick="toggleBtn(this)" data-id="Nuker"></div>
159                                <div class="btn btn-sm my-1 filter-btn-s op-tag btn-secondary" onclick="toggleBtn(this)" data-id="Summon"></div>
160                                <div class="btn btn-sm my-1 filter-btn-s op-tag btn-secondary" onclick="toggleBtn(this)" data-id="Fast-Redeploy"></div>
161                                <div class="btn btn-sm my-1 filter-btn-s op-tag btn-secondary" onclick="toggleBtn(this)" data-id="DP-Recovery"></div>
162                                <div class="btn btn-sm my-1 filter-btn-s op-tag btn-secondary" onclick="toggleBtn(this)" data-id="Robot"></div>
163                                <div class="btn btn-sm my-1 filter-btn-s op-tag btn-secondary" onclick="toggleBtn(this)" data-id="Elemental"></div>
164                                <div class="btn btn-sm my-1 filter-btn-s op-tag btn-secondary" onclick="toggleBtn(this)" data-id="Soar"></div>
165                            </div>
166                            <div class="btn btn-danger btn-clear" id="clear-filter-tag" onclick="clearFilter('.op-tag')" clear-data=".op-tag">Clear</div>
167                        </div>
168
169                        <div class='filter-category'>
170                            <div id="filter-name-skill" class="btn filter-exclusive filter-name" onclick="toggleExclusive(this)">Skill type</div>
171                            <div class='filter-category-content'>
172                                <div class="btn btn-sm my-1 filter-btn op-skill btn-secondary" section="skill" onclick="toggleBtn(this)" data-id=1>Auto Recovery</div>
173                                <div class="btn btn-sm my-1 filter-btn op-skill btn-secondary" section="skill" onclick="toggleBtn(this)" data-id=2>Offensive Recovery</div>
174                                <div class="btn btn-sm my-1 filter-btn op-skill btn-secondary" section="skill" onclick="toggleBtn(this)" data-id=4>Defensive Recovery</div>
175                                <div class="btn btn-sm my-1 filter-btn op-skill btn-secondary" section="skill" onclick="toggleBtn(this)" data-id=8>Passive</div>
176                                <div class="btn btn-sm my-1 filter-btn op-ammo  btn-secondary" section="skill" onclick="toggleBtn(this)" data-id="ammo">Ammo-based</div>
177                            </div>
178                            <div class="btn btn-danger btn-clear" id="clear-filter-skill" onclick="clearFilter('.op-skill');clearFilter('.op-ammo');" clear-data=".op-skill">Clear</div>
179                        </div>
180                        
181                        <div class='filter-category'>
182                            <div id="filter-name-faction" class="btn filter-name filter-exclusive" onclick="toggleExclusive(this)">Main Faction</div>
183                            <div class='filter-category-content'>
184                                <div class='filter-category-faction' id="nation"></div>
185                                <div class='filter-category-faction' id="group"></div>
186                                <div class='filter-category-faction' id="team"></div>
187                            </div>
188                            <div class="btn btn-danger btn-clear" id="clear-filter-faction" onclick="clearFilter('.op-faction')" clear-data=".op-faction">Clear</div>
189                        </div>
190
191                        <div class='filter-category'>
192                            <div class="filter-name" >Sort By</div>
193                            <div class='filter-category-content'>
194                                <div class="filter-btn btn-secondary btn-sm my-1 btn-disabled btn-sort" id="sort-atk" onclick="switchState(this)"><div style="margin-right: 5px;cursor: pointer;">ATK</div><div class="btn fas fa-sort-amount-down" id="order-atk" onclick="invertSort(this)"></div></div>
195                                <div class="filter-btn btn-secondary btn-sm my-1 btn-disabled btn-sort" id="sort-def" onclick="switchState(this)"><div style="margin-right: 5px;cursor: pointer;">DEF</div><div class="btn fas fa-sort-amount-down" id="order-def" onclick="invertSort(this)"></div></div>
196                                <div class="filter-btn btn-secondary btn-sm my-1 btn-disabled btn-sort" id="sort-hp" onclick="switchState(this)"><div style="margin-right: 5px;cursor: pointer;">HP</div><div class="btn fas fa-sort-amount-down" id="order-hp" onclick="invertSort(this)"></div></div>
197                                <div class="filter-btn btn-secondary btn-sm my-1 btn-disabled btn-sort" id="sort-dp" onclick="switchState(this)"><div style="margin-right: 5px;cursor: pointer;">DP COST</div><div class="btn fas fa-sort-amount-down" id="order-dp" onclick="invertSort(this)"></div></div>
198                                <div class="filter-btn btn-secondary btn-sm my-1 btn-disabled btn-sort" id="sort-block" onclick="switchState(this)"><div style="margin-right: 5px;cursor: pointer;">BLOCK COUNT</div><div class="btn fas fa-sort-amount-down" id="order-block" onclick="invertSort(this)"></div></div>
199                                <div class="filter-btn btn-secondary btn-sm my-1 btn-enabled  btn-sort" id="sort-rarity" onclick="switchState(this)"><div style="margin-right: 5px;cursor: pointer;">RARITY</div><div class="btn fas fa-sort-amount-down" id="order-rarity" onclick="invertSort(this)"></div></div>
200                            </div>
201                            <div class="btn btn-danger btn-clear" onclick="resetSorting()">Reset</div>
202                        </div> 
203                    </div>
204
205                    
206                    
207                    <div class='tab-content'>
208                        <ul id='selectedopclass' style='padding-left: 0px;margin: auto;padding: auto;text-align: center;'>
209                            <!-- Operators of the selected class goes here -->
210                        </ul>
211                    </div>
212                    <br />
213
214                    <div style="background: #333;color: #ddd; padding: 4px;">
215                        <div style="background: #222; padding: 2px;margin: 2px 0px;">Click Filter to toggle between</div>
216                        <div class="btn ak-disable filter-exclusive filter-name" style="width:80px">Unique</div> Only allows 1 selection
217                        </br>
218                        <div class="btn ak-disable filter-nonexclusive filter-name" style="width:80px">Union</div> Includes all operator within selection
219                    </div>
220                    <!-- <table>
221                        <tr style="color: white"><td><span style="background-color: brown; font-weight: bold; padding: 5px; border-radius: 2px;">Exclusive</span></td><td style="width: 5px;"></td><td>All the criteria must match in a section</td></tr>
222                        <tr style="color: white"><td><span style="background-color: darkblue; font-weight: bold; padding: 5px; border-radius: 2px;">Non-exclusive</span></td><td style="width: 5px"></td><td> Any criterion can match in a section</td></tr>
223                    </table> -->
224                    <!-- <span style="color: white">Click on the button to switch bewteen
225                        <span style="background-color: brown; font-weight: bold; padding: 5px; border-radius: 2px;">Exclusive</span><br />and
226                        <span style="background-color: darkblue; font-weight: bold; padding: 5px; border-radius: 2px;">Non-exclusive</span>
227                    </span> -->
228                </div>
229            </div>
230        </div>
231    </div> <!-- class='modal' -->
232    <div class="modal fade" id="opzoom" style="overflow-x: hidden;overflow-y: hidden;">
233        <div class="modal-dialog modal-dialog-centered modal-lg" >
234            <div class="modal-content" style="background:#444">
235        
236            <!-- Modal Header -->
237            <!-- <div class="modal-header">
238                <h4 class="modal-title"></h4>
239                <button type="button" class="close" data-dismiss="modal">&times;</button>
240            </div>
241        -->
242            <!-- Modal body -->
243            <div class="modal-body" style="padding:0px;margin:0px;min-height:88vh;max-height: 88vh;display: block">
244                <img id="charazoom" style="margin-left:auto;width:100%;height:100%; display: block;object-fit: contain;">
245            </div>
246        
247            <!-- Modal footer -->
248            <!-- <div class="modal-footer" style="border-top: 1px solid #2f2f2f;height: 90px;padding:0px">
249               
250            </div> -->
251            <div style="height: 70px;"></div>
252            <div style="display:inline-flex;position: absolute;z-index: 150000;width:100%;bottom:0px;background: #444;padding:10px;border-radius: 2px;justify-content: right;">
253                <input type='range' class='statlevelInput' value='100' min='50' max='1000' id='charazoomslider' oninput="Zoomchara(this)" style='margin-top:15px;width:80%;'></input>
254                <input class="form-control" id="charazoominput" onchange="Zoomchara(this)" style="line-height:1.1;width:60px;padding:2px;margin:9.5px 2px;text-align: center;background:#999;color:#222;border:none" type="text" value="100">
255                <div id="charazoom-button"></div>
256                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
257            </div>
258            </div>
259        </div>
260    </div>
261    <div class="modal fade" id="opstory">
262        <div class="modal-dialog modal-dialog-centered modal-lg" >
263            <div class="modal-content" style="background:#444">
264        
265            <!-- Modal Header -->
266            <!-- <div class="modal-header">
267                <h4 class="modal-title"></h4>
268                
269            </div> -->
270        
271            <!-- Modal body -->
272            <div class="modal-body">
273                <button type="button" class="close" data-dismiss="modal" style="position:absolute;top:5px;right: 15px;color:#fff">&times;</button>
274                <div class="story-content" id="opstorycontent">
275
276                </div>
277            </div>
278        
279            <!-- Modal footer -->
280            <div class="modal-footer" style="border-top: 1px solid #2f2f2f">
281                <!-- <div id="charazoom-button"></div> -->
282                <div id="opstorycredits"  style="width:100%;color:#fff"></div>
283                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
284            </div>
285        
286            </div>
287        </div>
288    </div>
289    <div class="modal fade" id="opmodulestory">
290        <div class="modal-dialog modal-dialog-centered modal-lg" >
291            <div class="modal-content" style="background:#444">
292        
293            <!-- Modal Header -->
294            <!-- <div class="modal-header">
295                <h4 class="modal-title"></h4>
296                
297            </div> -->
298        
299            <!-- Modal body -->
300            <div class="modal-body">
301                <button type="button" class="close" data-dismiss="modal" style="position:absolute;top:5px;right: 15px;color:#fff">&times;</button>
302                <div class="story-content" id="opmodulestorycontent" style="background: #333">
303
304                </div>
305            </div>
306        
307            <!-- Modal footer -->
308            <div class="modal-footer" style="border-top: 1px solid #2f2f2f">
309                <!-- <div id="charazoom-button"></div> -->
310                <div id="opmodulestorycredits"  style="width:100%;color:#fff"></div>
311                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
312            </div>
313        
314            </div>
315        </div>
316    </div>
317    <div class="modal fade" id="opaudio">
318        <div class="modal-dialog modal-dialog-centered" >
319            <div class="modal-content" style="background:#444">
320        
321            <!-- Modal Header -->
322            <!-- <div class="modal-header">
323                <h4 class="modal-title"></h4>
324                
325            </div> -->
326        
327            <!-- Modal body -->
328            <div class="modal-body" style="height: 90vh;overflow-x: hidden;" >
329                <button type="button" class="close" data-dismiss="modal" style="position:absolute;top:5px;right: 15px;color:#fff">&times;</button>
330                <div class="story-content" id="opaudiocontent">
331
332                </div>
333                <div class="story-content" id="opaudio-va" style="background-color: #111">
334
335                </div>
336            </div>
337        
338            <!-- Modal footer -->
339            <div class="modal-footer" style="border-top: 1px solid #2f2f2f">
340                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
341            </div>
342        
343            </div>
344        </div>
345    </div>
346    <div class="modal fade" id="opsfx">
347        <div class="modal-dialog modal-dialog-centered" >
348            <div class="modal-content" style="background:#444">
349        
350            <!-- Modal Header -->
351            <!-- <div class="modal-header">
352                <h4 class="modal-title"></h4>
353                
354            </div> -->
355        
356            <!-- Modal body -->
357            <div class="modal-body" style="height: 90vh;overflow-x: hidden;">
358                <button type="button" class="close" data-dismiss="modal" style="position:absolute;top:5px;right: 15px;color:#fff">&times;</button>
359                <div class="story-content" id="opsfxcontent">
360
361                </div>
362            </div>
363        
364            <!-- Modal footer -->
365            <div class="modal-footer" style="border-top: 1px solid #2f2f2f">
366                <!-- <div id="charazoom-button"></div> -->
367                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
368            </div>
369        
370            </div>
371        </div>
372    </div>
373    <div class='col-md-12 col-sm-12 ' style='margin:auto;max-width:1000px;padding:0' >
374        <div class='row'>
375            <div class='col-12 ak-bg ak-shadow mt-3' style='padding:15px;padding-top:0%;padding-bottom:0;border-radius:0px' role='alert'>
376            <div class='row' style='padding:0;padding-bottom: 4px'>
377                    <div class='col-12 btn btn-sm ak-btn ak-c-black ak-shadow-small ak-disable' style='padding:0' translate-id='operator-select'>Select an operator :</div>
378            </div>
379            <!-- <div class='row'> -->
380                <div id='lefthandtoggle' style='position:absolute;top:-15px;left:20px;background:#222;padding:4px;cursor: pointer;border-radius: 3px'>Left Hand</div>
381                <!-- <div class='col-md-9'> -->
382                    <input readonly type='text' name='opID' id='opID' style='display: none;'>
383                    <div class='row'>
384                            <input  class='form-control' style='margin: 5px 2px;margin-left: 5px;border-radius: unset;width: 30%;' type='text' autocomplete='off' name='opname' id='opname' onkeyup='populateOperators(this)' placeholder='Type in operator name . .'>
385                            <button class='btn btn-sm ak-btn ak-rare-bg browse-btn ak-browsebtn' style='margin:2px 2px;padding: 5px' onclick='populateOperators("Browse")' type='button' id='opBrowseButton2'>All</button>
386                            <button class='btn btn-sm ak-btn ak-rare-bg browse-btn ak-browsebtn' style='margin:2px 2px;padding: 5px' onclick='populateOperators("Browse2")' type='button' id='opBrowseButton3'>Grouped</button>
387                            <button class='btn btn-sm ak-btn ak-rare-bg browse-btn ak-browsebtn' style='margin:2px 2px;padding: 5px' onclick='actualizeFilter()'type='button' id='opBrowseButton'>Filter</button>
388                    </div>
389                    <div style='position: relative;'><ul class='ak-c-black ak-browse' id='operatorsResult' style='display:none; position: absolute; z-index: 600; list-style-type: none; padding: 5px;color:#222'><li style='cursor: pointer'></li></ul></div>
390                <!-- </div> -->
391            <!-- </div> -->
392            <div class='row'>
393                    <button class='btn btn-danger col-12 align-self-center ak-btn text-center' style='padding:1px; z-index: 0; font-weight: 550' onclick='clickBtnClear()' ><span translate-id='selector-clear'>Clear</span> <span id='count-tag'></a> </button>
394            </div>
395        </div>
396        
397        <div class='chara-detail-container' id="chara-detail-container" style="display:none;">
398            <div class='row'>
399                <div id='chara-pic' class='col-md-12 absolute bottom-layer ak-shadow' style='overflow: hidden;'>
400                    <img class='background' src='https://puppiizsunniiz.github.io/Arknight-Images/ui/chara/bg.png'>
401                    <img class='faction' id='op-faction' src="">
402                    <div class='chara-imagescontainer tab-content' id='tabs-opCG'>
403                    </div>
404                </div>
405                <div class='col-md-12 absolute top-layer'>
406                    
407                    <div class='row max-height'>
408                        
409                        <div class='col-md-7 col-sm-12 left-col-menu' style="padding-right: 0px;">
410                            <div id='leftmenu' class='elite-sidenav'>
411                            <ul class='nav nav-pills' id='elite-sidenav'>
412                            </ul>
413                            
414                            </div>
415                            <div class='addinfo-nav' >
416                            
417                            </div>
418                            <div id="top-right-buttons">
419                                <div id='class-change-1' style="display: none;">
420                                    <button id='class-change-guard' class='ak-button' onclick='ChangeSType(1,"guard")'>
421                                        <div id='class-background-guard'><div id='class-beta'>BETA</div></div>
422                                        <a id="class-button"><img id="class-icon" src='extra\AmiyaClass\trans_melee_mark.png' title="Guard Amiya in beta phase"></a>
423                                        
424                                    </button>
425
426                                </div>
427                                <div id='class-change-2' style="display: none;">
428                                    <button id='class-change-medic' class='ak-button' onclick='ChangeSType(2,"medic")'>
429                                        <div id='class-background-medic'><div id='class-beta'>BETA</div></div>
430                                        <a id="class-button"><img id="class-icon" src='extra\AmiyaClass\trans_medic_mark.png' title="Medic Amiya in beta phase"></a>
431                                        
432                                    </button>
433                                </div>
434                                <!--<div id="sanitygone">
435                                    <a id="sanitylink" href="https://sanitygone.help/operators/" target="_blank">
436                                        <div id="sanitybut" class="btn tabbing-btns tabbing-btns-middle">
437                                                <img id="sanitys" height="20px"src='https://puppiizsunniiz.github.io/Arknight-Images/ui/sanitygone/SanityLogo.png'>
438                                                <img id="sanityg" height="20px"src='https://puppiizsunniiz.github.io/Arknight-Images/ui/sanitygone/SanityLogo.png'>
439                                                 <svg width="40" height="55" viewBox="0 0 121 116" fill="none" xmlns="http://www.w3.org/2000/svg">
440                                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M22.0188 115.067L29.2722 84.0222L1.85843 75.0433L4.55142 57.3145L0 38.3172L20.1199 13.6341L47.388 0L82.7372 9.47909L111.844 29.3424L120.466 55.21L108.609 71.5471L101.491 71.0325L105.713 65.3221L113.799 54.1816L106.791 33.1584L80.1977 15.0101L48.034 6.38521L23.9562 18.4241L6.52665 39.8067L10.6594 57.0565L8.50319 71.2517L36.285 80.3789L31.7929 99.6053L64.426 73.5988L70.9373 76.082L22.0188 115.067Z" fill="#49B3FF"/>
441                                                    <path d="M20.169 38.2665C20.169 35.345 21.3961 32.8909 23.8502 30.9043C26.3042 28.8786 29.07 27.8658 32.1473 27.8658C33.238 27.8658 34.1924 27.9243 35.0105 28.0411C35.8285 28.158 36.9581 28.4112 38.3994 28.8007C39.8797 29.1513 40.8925 29.385 41.4379 29.5019C41.9053 32.1508 42.139 35.1502 42.139 38.5003C42.0611 38.8509 41.8274 39.0261 41.4379 39.0261C40.3861 39.0261 39.8213 38.8509 39.7434 38.5003C39.5096 36.7084 38.6721 34.9555 37.2308 33.2415C35.7895 31.5275 34.0366 30.6705 31.972 30.6705C30.1802 30.6705 28.7973 31.1769 27.8235 32.1897C26.8886 33.2025 26.4211 34.5659 26.4211 36.2799C26.4211 36.8642 26.4795 37.429 26.5964 37.9744C26.7522 38.4808 27.0249 38.9872 27.4144 39.4936C27.8429 40 28.174 40.4285 28.4078 40.7791C28.6804 41.0907 29.1674 41.4997 29.8685 42.0061C30.6087 42.5125 31.0956 42.8631 31.3293 43.0579C31.602 43.2526 32.1863 43.6422 33.0822 44.2265C34.0171 44.7718 34.582 45.0835 34.7767 45.1614C35.0105 45.3562 35.6532 45.7847 36.705 46.4469C37.7957 47.0701 38.5553 47.5376 38.9838 47.8492C39.4123 48.1219 40.0355 48.6088 40.8535 49.31C41.6716 50.0112 42.2559 50.6734 42.6065 51.2966C42.996 51.9199 43.3466 52.7185 43.6582 53.6923C43.9699 54.6272 44.1257 55.64 44.1257 56.7307C44.1257 59.847 42.8597 62.418 40.3277 64.4436C37.8346 66.4692 34.9325 67.482 31.6215 67.482C29.2842 67.482 25.7005 66.9366 20.8702 65.8459C20.5196 64.4436 20.1885 62.6907 19.8769 60.5871C19.6042 58.4447 19.4678 57.0423 19.4678 56.3801C19.5068 56.0685 19.8184 55.9127 20.4027 55.9127C21.4155 55.9127 21.9804 56.0685 22.0972 56.3801C22.253 57.0813 22.5257 57.8604 22.9153 58.7174C23.3048 59.5354 23.8307 60.4313 24.4929 61.4052C25.1941 62.3401 26.1095 63.1192 27.2391 63.7424C28.4078 64.3267 29.7127 64.6189 31.154 64.6189C32.9848 64.6189 34.5041 64.0735 35.7116 62.9828C36.9192 61.8921 37.523 60.256 37.523 58.0746C37.523 57.4124 37.3866 56.7697 37.114 56.1464C36.8802 55.5231 36.5881 54.9973 36.2375 54.5688C35.9259 54.1403 35.4389 53.6728 34.7767 53.1664C34.1535 52.66 33.6276 52.2705 33.1991 51.9978C32.7706 51.7251 32.1279 51.3551 31.2709 50.8876C30.4528 50.3812 29.8685 50.0306 29.518 49.8359C29.4011 49.719 29.1868 49.5632 28.8752 49.3684C27.7455 48.6672 26.8886 48.1219 26.3043 47.7323C25.7199 47.3428 24.9603 46.778 24.0254 46.0379C23.1295 45.2588 22.4478 44.5381 21.9804 43.8759C21.5129 43.2137 21.0844 42.3957 20.6949 41.4218C20.3443 40.448 20.169 39.3962 20.169 38.2665Z" fill="#E3E1EF"/>
442                                                    <path d="M51.5549 67.8326C51.5549 67.2093 51.2628 66.4108 50.6784 65.4369C50.0941 64.4241 49.802 63.5671 49.802 62.866C49.802 62.0479 50.211 61.2299 51.029 60.4119C51.8471 59.5938 52.9183 59.1848 54.2427 59.1848C55.0997 59.1848 55.723 59.3017 56.1125 59.5354C56.6579 60.6261 56.9305 61.9895 56.9305 63.6256C56.9305 64.4046 56.7747 65.3395 56.4631 66.4302C55.8398 68.6117 55.0023 70.4035 53.9506 71.8059C52.8988 73.2472 51.2433 74.8443 48.9839 76.5972H48.9255C48.7307 76.5972 48.4581 76.383 48.1075 75.9545C47.7569 75.5649 47.5816 75.2338 47.5816 74.9611C47.5816 74.9222 47.9127 74.6106 48.5749 74.0263C49.2371 73.4419 49.8994 72.585 50.5616 71.4553C51.2238 70.3646 51.5549 69.157 51.5549 67.8326ZM56.
4421125 42.8826C56.8916 43.6227 57.2811 44.5186 57.2811 45.5704C57.2811 46.6222 56.8916 47.5571 56.1125 48.3751C55.3724 49.1931 54.4765 49.6021 53.4247 49.6021C52.334 49.6021 51.3991 49.1931 50.62 48.3751C49.8409 47.5571 49.4514 46.6222 49.4514 45.5704C49.4514 44.5186 49.8409 43.6227 50.62 42.8826C51.3991 42.1035 52.334 41.714 53.4247 41.714C54.4765 41.714 55.3724 42.1035 56.1125 42.8826Z" fill="#E3E1EF"/>
443                                                    <path d="M60.9708 48.0829C60.9708 42.5904 62.8406 37.8575 66.5801 33.8842C70.3197 29.9109 74.8579 27.9243 80.1945 27.9243C83.6225 27.9243 88.1412 28.6449 93.7505 30.0862C93.8674 30.1252 94.0232 31.4301 94.218 34.0011C94.4517 36.5331 94.5686 38.0328 94.5686 38.5003C94.5686 38.9677 94.179 39.2014 93.3999 39.2014C92.8546 39.2014 92.4261 39.0846 92.1145 38.8509C91.9976 38.3055 91.8223 37.7601 91.5886 37.2148C91.3938 36.6694 91.0043 35.9877 90.42 35.1697C89.8746 34.3127 89.1929 33.5921 88.3749 33.0078C87.5958 32.4235 86.5051 31.9171 85.1027 31.4886C83.7394 31.0211 82.1812 30.7874 80.4283 30.7874C76.6108 30.7874 73.6308 32.3066 71.4883 35.345C69.3459 38.3834 68.2746 42.2788 68.2746 47.0312C68.2746 49.8359 68.7616 52.5432 69.7354 55.1531C70.7482 57.724 72.3259 59.9249 74.4683 61.7558C76.6497 63.5476 79.1817 64.4436 82.0643 64.4436C84.5184 64.4436 86.3882 64.0735 87.6737 63.3334C88.0632 63.0607 88.258 62.6127 88.258 61.9895L88.1996 57.7825V57.3734C88.1996 55.0362 88.0632 53.4586 87.7906 52.6405C87.6347 52.1341 87.0504 51.7641 86.0376 51.5304C85.0638 51.2966 84.2458 51.1798 83.5835 51.1798C83.4277 51.1798 83.3498 50.9071 83.3498 50.3617C83.3498 49.7774 83.4277 49.4074 83.5835 49.2516C84.012 49.2516 85.1807 49.31 87.0894 49.4268C89.0371 49.5437 90.5953 49.6021 91.7639 49.6021C91.8028 49.6021 94.1595 49.4853 98.834 49.2516C98.9509 49.6021 99.0093 49.9332 99.0093 50.2449C99.0093 50.9071 98.9314 51.2382 98.7756 51.2382C98.5419 51.2382 98.016 51.3551 97.1979 51.5888C96.4189 51.8225 95.854 52.0173 95.5034 52.1731C94.997 52.4847 94.7438 53.9065 94.7438 56.4386C94.7438 57.2566 94.7438 58.0746 94.7438 58.8927C94.7828 59.7107 94.8023 60.1587 94.8023 60.2366C94.8023 60.9377 94.8997 61.5415 95.0944 62.0479C95.2892 62.5543 95.3866 62.8465 95.3866 62.9244C95.3866 63.4697 94.9581 63.9372 94.1011 64.3267C92.5429 65.0279 91.3938 65.5148 90.6537 65.7875C89.9136 66.0602 88.4917 66.3913 86.3882 66.7808C84.3237 67.1704 82.0254 67.3651 79.4934 67.3651C74.3515 67.3651 69.9691 65.4564 66.3464 61.6389C62.7627 57.8214 60.9708 53.3028 60.9708 48.0829Z" fill="#E3E1EF"/>
444                                                </svg>
445                                        </div>
446                                    </a>
447                                </div>-->
448                            </div>
449                            <div id='ak-bottom-allnav'>
450                                
451                                </img>
452                                <div id='spine-bg-container'style="position:absolute;top: -341px;left:190px">
453                                    <img id="spine-bg" class='' style="display:none;" src='https://puppiizsunniiz.github.io/Arknight-Images/ui/spine/bg1.png'>
454                                </div>
455                                <div id="Chibi-nav">
456                                    <!-- <button class='btn btn-sm ak-chibi-btn' style='background: #aa0000;'type='button' id='' title="Chibi player currently in WIP,need reload to load other thing (also wont stop rendering even not loading properly, refresh to fix) (also most chara chibi isnt included yet)">!</button> -->
457                                    <button class='btn btn-sm ak-chibi-btn' type='button' id='Chibi-Show' title="Show SD">Show SD</button>
458                                    <button class='btn btn-sm ak-chibi-btn' type='button' id='Chibi-Show-menu' title="Show Menu">Menu</button>
459                                    <div id='Chibi-menu' class='chibi-menu-closed'>
460                                        <button class='btn btn-sm ak-chibi-btn' type='button' id='Chibi-Bg' title="Change Background"><i class="fas fa-paint-roller"></i></button>
461                                        <!-- <button class='btn btn-sm ak-chibi-btn' type='button' id='Chibi-Scale' title="Change Chibi Scale"><i class="fas fa-search-plus"></i></button> -->
462                                        <button class='btn btn-sm ak-chibi-btn' type='button' id='Chibi-Perspective' title="Change Perspective">P</button>
463                                        <button class="btn btn-sm ak-chibi-btn" id="Chibi-download" title='Experimental Saving'><i class="far fa-save"></i></button>
464                                        <button class="btn btn-sm ak-chibi-btn" id="Chibi-frameSize" title='Experimental Resize'>R</button>
465                                        
466                                        <!-- <button class="btn btn-sm ak-chibi-btn" id="Chibi-console" onclick='CheckChibi()' title='Check'>C</button> -->
467                                        <div style='display:inline-flex'>
468                                            <button class='btn btn-sm ak-chibi-btn' type='button' id='Chibi-Scale' title="Reset Scale"><i class="fas fa-search-plus"></i></button> 
469                                            <input type='range' class='statlevelInput' value='1' min='0' max='100' id='chibizoomslider' oninput="ZoomChibi(this)" style='margin:3px 0px;width:90px'></input>
470                                        </div>
471                                        <div style="display: inline-block;text-align: center;width: 115px;margin-top: 5px;color: #ccc;background: #333;">
472                                            <span id="chibi-per">-</span>
473                                        </div>
474                                    </div>
475                                </div>
476                                <div id='bottom-nav'>
477                                    
478                                </div>
479                                <div class="ak-cutcorner-rt" style="position:absolute;bottom: 0px;;background-color: rgb(52, 52, 52);padding-top: 5px;padding-right:5px;padding-left:5px;width: 195px;height:56px;">
480                                    <div id='infonav' style="background-color: #111">
481                                        <div id='info-illustrator'>
482                                        </div>
483                                        <div id='info-voiceactor'>
484                                        </div> 
485                                    </div>
486                                </div>
487                                <div id="spine-toolbar">
488                                    <button class='btn btn-sm ak-chibi-btn ak-disable' style='min-width:30px;height:30px'  type='button' >C</button>
489                                    <button class='btn btn-sm ak-chibi-btn' style='min-width:31px;height:30px' onclick='PlayPause("widget")' type='button' id='Chibi-Play'><b>l l </b></button>
490                                    <button class='btn btn-sm ak-chibi-btn' style='min-width:30px;height:30px' onclick='ChangeAnimation("widget","#spine-text",-1)' type='button' id='Chibi-Prev'><i class="fas fa-step-backward"></i></button>
491                                    <button id="spine-text" class="btn ak-chibi-btn" style="width:140px;height:30px; "onclick='ChangeAnimation("widget","#spine-text",0)'></button>
492                                    <button class='btn btn-sm ak-chibi-btn' style='min-width:30px;height:30px' onclick='ChangeAnimation("widget","#spine-text",1)' type='button' id='Chibi-Next'><i class="fas fa-step-forward"></i></button>
493                                </div>
494                                <div id="spine-token-toolbar">
495                                    <button class='btn btn-sm ak-chibi-btn ak-disable' style='min-width:30px;height:30px'  type='button' >T</button>
496                                    <button class='btn btn-sm ak-chibi-btn' style='min-width:31px;height:30px' onclick='PlayPause("token")' type='button' id='Chibi-Play'><b>l l </b></button>
497                                    <button class='btn btn-sm ak-chibi-btn' style='min-width:30px;height:30px' onclick='ChangeAnimation("token","#spine-text2",-1)' type='button' id='Chibi-Prev'><i class="fas fa-step-backward"></i></button>
498                                    <button id="spine-text2" class="btn ak-chibi-btn" style="width:140px;height:30px; "onclick='ChangeAnimation("token","#spine-text2",0)'></button>
499                                    <button class='btn btn-sm ak-chibi-btn' style='min-width:30px;height:30px' onclick='ChangeAnimation("token","#spine-text2",1)' type='button' id='Chibi-Next'><i class="fas fa-step-forward"></i></button>
500                                </div>
501                                <div id="spine-frame" style="position: absolute;width: 300px; height: 300px;bottom:-39px;left:220px;transform: scale(0.75);pointer-events: none;">
502                                    <div id="spine-frameheader" class='btn btn-sm ak-sm-btn' ondblclick="Mirror($('#spine-frame'))" style="display:inline-block;cursor: move;pointer-events:all;transform: scale(5);margin:0px;position: absolute;left:140px;top:90px;opacity: 0;"><i class="fas fa-arrows-alt"></i></div>
503                                    <button class='btn btn-sm ak-sm-btn ak-disable' style='position:absolute;top:75px;left:75px;font-size:30px'  type='button' id='loading-spine'>Loading ...</button>
504                                    <div id="spine-widget" class="top-layer" style="position:absolute;width: 800px; height: 800px;top:-775px;left:-750px;pointer-events: none;z-index: 20;transform: scale(0.5);"></div> <!-- scaling 0.5 for "supersampling" chibi -->
505                                </div>
506                                <div id="spine-frame-token" class="ak-disable" style="position: absolute;width: 300px; height: 300px;bottom:-42px;left:345px;transform: scale(0.75)">
507                                    <div id="spine-frame-tokenheader" class='btn btn-sm ak-sm-btn' ondblclick="Mirror($('#spine-frame-token'))" style="display:inline-block;cursor: move;pointer-events:all;transform: scale(5);margin:0px;position: absolute;
507left:140px;top:90px;opacity: 0;"><i class="fas fa-arrows-alt"></i></div>
508                                    <div id="spine-widget-token" class="top-layer" style="position:absolute;width: 1800px; height: 1800px;top:-775px;left:-750px;pointer-events: none;z-index: 20;transform: scale(0.5);"></div> <!-- scaling 0.5 for "supersampling" chibi -->
509                                </div>
510                                <div id="spine-frame-op" style="position: absolute;width: 300px; height: 300px;bottom:200px;left:150px;transform: scale(0.75);pointer-events: none;z-index: 10;">
511                                    <div id="spine-frameheader-op" class='btn btn-sm ak-sm-btn' ondblclick="Mirror($('#spine-frame-op'))" style="display:inline-block;cursor: move;pointer-events:all;transform: scale(10);margin:0px;position: absolute;left:140px;top:90px;opacity: 0;"><i class="fas fa-arrows-alt"></i></div>
512                                    <button class='btn btn-sm ak-sm-btn ak-disable ' style='position:absolute;top:75px;left:75px;font-size:30px;display: none;'  type='button' id='loading-spine-op'>Loading ...</button>
513                                    <div id="spine-widget-op" class="top-layer" style="position:absolute;width: 800px; height: 800px;top:-775px;left:-750px;pointer-events: none;z-index: 20;transform: scale(0.5);"></div> <!-- scaling 0.5 for "supersampling" chibi -->
514                                </div>
515                                
516                            </div>
517                            
518                            <!-- <div id="spine-toolbar-token" style="position:absolute;bottom:-30px;width:330px;text-align: center;">
519                                <button class='btn btn-sm ak-sm-btn ak-disable' style='min-width:30px;height:30px'  type='button'>W</button>
520                                <button class='btn btn-sm ak-sm-btn' style='min-width:30px;height:30px' onclick='PlayPause("token")' type='button' id='Chibi-Play'>Play/Pause</button>
521                                <button class='btn btn-sm ak-sm-btn' style='min-width:30px;height:30px' onclick='ChangeAnimation("token","#spine-text-token",-1)' type='button' id='Chibi-Prev'>&lt;</button>
522                                <button id="spine-text-token" class="btn ak-sm-btn" style="width:140px;height:30px; "onclick='ChangeAnimation("token","#spine-text-token",0)'></button>
523                                <button class='btn btn-sm ak-sm-btn' style='min-width:30px;height:30px' onclick='ChangeAnimation("token","#spine-text-token",1)' type='button' id='Chibi-Next'>&gt;</button>
524                            </div> -->
525                            
526                        </div>
527                        
528                        <div class='col-md-5 col-sm-12 right-col-menu max-height' style="padding-left: 0px;">
529                            <div id='rightmenu'class='right-menu-container max-height' style="padding-left: 0px;">
530                                <!--<div class='side-menu-tabbings' style="margin-bottom: 70px;">
531                                    <ul class="nav nav-pills nav-justified">
532                                        <li class="nav-item"><a class="nav-link active" data-toggle="pill" href="#sidemenutab-details" style="border-top-right-radius: 0px; border-bottom-right-radius: 0px;">Chara</a></li>
533                                        <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#sidemenutab-talents" style="border-radius: unset;">Talents</a></li>
534                                        <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#sidemenutab-skills" style="border-radius: unset;">Skills</a></li>
535                                        <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#sidemenutab-elite" style="border-top-left-radius: 0px; border-bottom-left-radius: 0px;">Elite</a></li>
536                                    </ul>
537                                </div>-->
538                                <!-- <div class="potential-container" style="position: relative; margin-bottom: 20px">
539                                    <ul class='nav nav-pills' id='potential-tabs'>
540                                        <li class='nav-item'>
541                                            <button class='btn tabbing-btns horiz-small nav-link active' data-toggle='pill' href='#potential'><p>Potential</p></button>
542                                            <button class='btn tabbing-btns horiz-small nav-link' data-toggle='pill' href='#talent'><p>Talent</p></button>
543                                        </li>
544                                    </ul>
545                                    <div class="tab-content" id="potential-contents">
546                                        <div class='tab-pane container clickthrough active' id='potential1'>
547                                            <div class='small-container ak-shadow' style='margin-top:0px;'>
548                                                <p>Potentials</p>
549                                                <div class='topright'>
550                                                    <div style='padding: 15px;'>
551                                                        <img class='' id='potentialImage' src='https://puppiizsunniiz.github.io/Arknight-Images/ui/potential/1.png' style='width: 100%;'>
552                                                    </div>
553                                                </div>
554                                                <button class='btn btn-default btn-collapsible notclickthrough' data-toggle='collapse' data-target='#skill2StatsCollapsible'><i class='fa fa-sort-down'></i></button>
555                                            </div>
556                                            <div id='poitential1StatsCollapsible' class='collapsible notclickthrough'style="margin:20px">
557                                                <input type='range' min='1' max='10' name='skillLevel' id='skill1Level' onchange='changeSkillLevel(this)' class='skillLevelInput'>
558                                                <div class='potentialdisplaycontainer'>lv <span id='potential1LevelDisplay'>1</span></div>
559                                                <table>
560                                                    <tr>
561                                                        <td colspan='4' class='potentialdesc'>Desc</td>
562                                                    </tr>
563                                                    <tr>
564                                                        <td class='stats-l'>SP Cost :</td>
565                                                        <td class='stats-r'>xxx</td>
566                                                        <td class='stats-l'>Duration :</td>
567                                                        <td class='stats-r'>xxx</td>
568                                                    </tr>
569                                                </table>
570                                            </div>
571                                        </div>
572                                    </div>
573                                </div> -->
574                                    <div id="sidemenutab-details" style="position: relative;">
575                                        <div class="general-stats-container small-container ak-shadow">
576                                            <div id="op-rarity" style="padding: 8px 5px 0px 15px"></div>
577                                            <div id="op-fact" style="padding: 1px 5px 0px 0px">
578                                                <div id="op-faction">
579                                                    <button id="op-faction-btn">
580
581                                                    </button>
582                                                    <div id="op-faction-sub">
583
584                                                    </div>
585                                                </div>
586                                                <div style="padding:0px 5px 0px 15px">   
587                                                    <span class="info-l">Position</span><div class="info-r" id="op-position"></div>
588                                                    <span style="padding:0px 2px"></span>
589                                                    <span class="info-l">Gender</span><div class="info-r" id="op-gender"></div>
590                                                </div>
591                                                <div style="padding:0px 5px 0px 15px">
592                                                    <span class="info-l">Tags</span><div id="op-taglist" class="info-r" style="display: inline-block;padding:2px 4px 1px 8px;margin:0px 0px;min-width: 210px; text-align: left;"></div>
593                                                </div>
594                                            </div>
595                                            
596                                            <span class="op-name">
597                                                <span id="op-nameREG" class="text-shadow"style="padding:0px"></span>
598                                                <span id="op-nameTL" class="text-shadow"></span>
599                                                <span id="op-nameRead" class="text-shadow"style="padding:0px"></span>
600                                                <div id="op-displaynum"></div>
601                                            </span>
602                                            <div class="general-statcard">
603                                                <div class="row">
604                                                    <div class="col-12">
605                                                        <span id="op-atktype"></span>
606                                                    </div>
607                                                </div>
608                                                <div class="row">
609                                                    <div class="col-12">
610                                                        <!-- <p style="margin-top: 20px; margin-bottom: 0px;"></p> -->
611                                                        <div id="op-potentialist" style="display:inline-block;vertical-align: top;margin-top: 17px;"></div>
612                                                        <div id="op-trust" style="display:inline-block;vertical-align: top;margin-top: 17px;"></div>
613                                                        <div id="op-talentlist"></div>
614                                                        <div id="op-masterlist"></div>
615                                                    </div>
616                                                </div>
617                                                <div class="row">
618                                                    <div class="col-12" style="display:inline-block">
619                                                        <div id="op-riic" style="vertical-align: top;margin-top: 4px;"></div>
620                                                    </div>
621                                                </div>
622                                            </div>
623                                            <div class="topright" style="margin:-45px 0px 0px 0px;width: 120px;right:10px">
624                                                <div style="text-align: center; background:#555">
625                                                    <div id="op-className"  class="ak-shadow" style="color:#ddd;text-align:center;margin:-4px;margin-top:0px;background:#111;padding:2px;font-size:0.8em;font-weight:600;border-radius:2px"></div>
626                                                    <img id="op-classImage" class="ak-shadow" src="" style="width:50px;height:50px;object-fit: contain;display: inline-block;margin:0px 5px 5px 0px">
627                                                    <img id="op-subclassImage" class="ak-shadow" src="" style="padding:3px;width:50px;height:50px; background:#000;object-fit: contain;display: inline-block;margin:0px 0px -12px 5px">
628                                                    <div id="op-subclassName"  class="subclassname" ></div>
629                                                </div>
630                                                <div style="text-align: center;">
631                                                    
632                                                </div>
633                                            </div>
634                                        </div>
635                                    </div>
636                                    <div class="skillsection-container" id="sidemenutab-skills" style="position: relative; margin-top: 0px;">
637                                        <ul class='nav nav-pills' id='skill-tabs' style="background:#444;width: 100%;">
638                                        </ul>
639                                        <div class="tab-content" id="skill-contents">
640                                            <div class='tab-pane container clickthrough active' id='skill1'>
641                                                <div class='small-container ak-shadow' style='margin-top: 50px;'>
642                                                    <p>Skill 1</p>
643                                                    <span class='skillname'>Skill name</span>
644                                                    <div class='topright'>
645                                                        <div style='padding: 15px;'>
646                                                            <img class='ak-shadow skill-image' id='skill1image' src='' style='width: 100%;'>
647                                                        </div>
648                                                    </div>
649                                                    <button class='btn btn-default btn-collapsible notclickthrough' data-toggle='collapse' data-target='#skill2StatsCollapsible'><i class='fa fa-sort-down'></i></button>
650                                                </div>
651                                            </div>
652                                            <div class="tab-pane container clickthrough" id="skill2">
653                                                <div class='small-container ak-shadow' style="margin-top: 50px;">
654                                                    <p>Skill 2</p>
655                                                    <span>Skill name</span>
656                                                    <div class="topright">
657                                                        <div style="padding: 15px;">
658                                                            <img class="ak-shadow skill-image" id="skill1image" src="" style="width: 100%;">
659                                                        </div>
660                                                    </div>
661                                                    <button class='btn btn-default btn-collapsible notclickthrough collapse show' data-toggle='collapse' data-target='#skill1StatsCollapsible'><i class='fa fa-sort-down'></i></button>
662                                                </div>
663                                            </div>
664                                        </div>
665                                    </div>
666                                    <div class="tokensection-container" id="sidemenutab-token" style="position: relative;margin-top:25px;background-color: #4f4f4f;">
667                                        <!--<ul class='nav nav-pills' id='token-tabs' style="background:#444"></ul>-->
668                                        <div class="tab-content " id="token-contents" style="margin: 0px 0px 0px 0px ;background-color:#4f4f4f ;color:#fff;"></div>
669                                    </div>
670                                    <div class="elitesection-container" id="sidemenutab-elite" style="position: relative; margin-top: -25px;">
671                                        <ul class='nav nav-pills' id='elite-topnav' style="background:#444;width: 100%">
672                                        </ul>
673                                        <div class='tab-content' id='tabs-opData'>
674                                            <div class='tab-pane container active' id='elite_0_tab'>
675                                                <div class='elite-1 small-container ak-shadow'>
676                                                    <p class='large-text'>Base</p>
677                                                    <span class='custom-span'>Stats</span>
678                                                    <div class='topright maxlevel'>
679                                                        <span class='maxleveltext'>Max Level</span>
680                                                        <span class='leveltext'>50</span>
681                                                        <div class='ring'>
682                                                            <div class='back ak-shadow'></div>
683                                                            <div class='back-centre'></div>
684                                                        </div>
685                                                    </div>
686                                                    <button class='btn btn-default btn-collapsible' data-toggle='collapse' data-target='#elite1StatsCollapsible'><i class='fa fa-sort-down'></i></button>
687                                                </div>
688                                                <div id='elite1StatsCollapsible' class='collapse eliteStatsContainer'>
689                                                    <ul class='nav nav-pills'>
690                                                        <li class='nav-item'>
691                                                            <a class='btn tabbing-btns horiz tabbing-btns-left nav-link active' data-toggle='pill' href='#elite1Stats1'></a>
692                                                        </li>
693                                                    </ul>
694                                                    <div class='tab-content'>
695                                                        <div class='tab-pane container active' id='#elite1Stats1'>
696                                                            <table id='elite1Stats1Table'>
697                                                                <tr>
698                                                                    <td class='stats-l'>MaxHP :</td><td class='stats-r'>xxx</td><td class='stats-l'>Deploy :</td><td class='stats-r'>xxx</td>
699                                                                </tr>
700                                                                <tr>
701                                                                    <td class='stats-l'>Atk :</td><td class='stats-r'>xxx</td><td class='stats-l'>Cost :</td><td class='stats-r'>xxx</td>
702                                                                </tr>
703                                                                <tr>
704                                                                    <td class='stats-l'>Def :</td><td class='stats-r'>xxx</td><td class='stats-l'>Block :</td><td class='stats-r'>xxx</td>
705                                                                </tr>
706                                                                <tr>
707                                                                    <td class='stats-l'>MRes :</td><td class='stats-r'>xxx</td><td class='stats-l'>AtkSp :</td><td class='stats-r'>xxx</td>
708                                                                </tr>
709                                                            </table>
710                                                        </div>
711                                                    </div>
712                                                </div>
713                                                <div class='elite-1 small-container ak-shadow'>
714                                                    <p>
714Elite 1</p>
715                                                    <span class='custom-span'>Required materials</span>
716                                                    <img class='topright' src='https://puppiizsunniiz.github.io/Arknight-Images/ui/elite/1.png' width='100'>
717                                                    <button class='btn btn-default btn-collapsible' data-toggle='collapse' data-target='#eliteMatsCollapsible'><i class='fa fa-sort-down'></i></button>
718
719                                                    <div id='eliteMatsCollapsible' class='collapse'>
720                                                        WIP
721                                                    </div>
722                                                </div>
723                                            </div>
724                                            <div class='tab-pane container fade' id='elite_1_tab'>...</div>
725                                            <div class='tab-pane container fade' id='elite_2_tab'>...</div>
726                                        </div>
727                                    </div>
728                                    <div class="equipsection-container" id="sidemenutab-equip" style="position: relative; margin-top: -40px;background-color: #4f4f4f;">
729                                        <ul class='nav nav-pills' id='equip-tabs' style="background:#444"></ul>
730                                        <div class="tab-content" id="equip-contents" style="margin: -50px 0px 0px 0px;"></div>
731                                    </div>
732                                    <div style="height: 200px;"></div>
733                                <div class="chara-footer-2">
734                                    <div class="text-center ak-footer" style="margin-top: -40px;padding-bottom:200px" >
735                                        <div style="vertical-align: middle;line-height: 30px;">Made by : Aceship and Faryzal2020</div>
736                                        <div style="vertical-align: middle;line-height: 20px;">With translate and data help from: dragonjet, Jetroyz and other on <a href="https://discord.com/invite/rihq" target="_blank">Rhodes Island HQ discord server</a></div>
737                                    </div>
738                                </div>
739                            </div>
740                        </div>
741                    </div>
742                </div>
743            </div>
744        </div>
745    </div>
746    <div class="row" >
747        <div class="col-12 ak-footer chara-footer-1" style="margin-top: 155px;padding:5px;border-radius: 2px;box-shadow: 0px 0px 5px black;">
748            <div class="col-12 text-center" style="height: 50px">
749                <div style="vertical-align: middle;line-height: 30px;">Previously Developed and Maintained by: Aceship and Faryzal2020</div>
750                <div style="vertical-align: middle;line-height: 20px;">With translate and data help from: dragonjet, Jetroyz, AEsir and others on <a href="https://discord.com/invite/rihq" target="_blank">Rhodes island HQ discord server</a></div>
751            </div>
752        </div>
753    </div>
754</body>
755<script src='js/everpolate.min.js'></script>
vendor: 1 bytes, line 755
755
756<script src="./js/aknav.js"></script>
vendor: 1 bytes, line 756
756
757<script src='js/chara-detail.js'></script>
vendor: 1 bytes, line 757
757
758<script src="./js/scrollLock.js"></script>
758
759</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.