PageSourceSearch

https://www.filterblade.xyz/

html filterblade.xyz collected 2026-10-02 10:25:21 UTC 66,007 bytes, 1,050 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <!-- ==== Meta data ==== -->
6    <meta charset="UTF-8">
7    <meta name="description" content="Path of Exile 2 & 1 Loot Filters: Download, preview and Customize NeverSink's item filter. Rich UI for beginners and veterans to personalize and learn the item game.">
8    <meta name="keywords" content="NeverSink,PoE,Path of Exile 2,PoE2,xyz,FilterBlade,Filter,filters,Loot,Path,Exile,PoE filter,PoE 2 filter,Path of Exile,Lootfilter,Path of Exile NeverSink,Item,Drop,2025,Itemfilter,Dropfilter,Tool,Edit,How to,Download,3.14,ultimatum,continue,decorator,8.0,rework,Meta,Strict,Customize,Personalize,Custom,Change,Modify,Improve,Chance,Currency,GGG,Reddit,Tobnac,Zoey,Haggis,FB,Editor,Game,Sorcerer,Sound,Background,Border,Simulate,Trade,Fossil,Test,Simple,Code,LeatherBelt,Headhunter,Skyforth,Shav,Alert,Atlas,3.7,3.8,Betrayal,Abyss,League,Legion,SC,HC,Hardcore,Softcore,Blade,Save,Load,BaseType,Class,AlertSound,Background,BorderColor,TextColor,Quality,cdr,Rarity,Sockets,Links,Shaped,Show,Hide,Popular,Best,SSF,Beastiary,Race,Strictness,Delve,Custom Sounds,Sound Packs,mp3,Beam,Map,Icons,Custom Alert,2020,2019,2018,best poe item filter,best loot filter,filter site,filter installer,tierlist,how to edit neversink filter,пое фильтр,poe xyz,poe loot filter custom sounds,blade filters">
9    <meta name="author" content="NeverSink, Zoey, Haggis">
10    <title>FilterBlade - PoE1&2 Filter Customizer - Finetuned for NeverSink's Filter</title>
11    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
12    <meta name="wot-verification" content="342b6ef867346361882e"/>
13
14    <link rel="canonical" href="https://www.filterblade.xyz/"/>
15
16<!--  NEEDS WORK: this blocks all ads because they have many different domains. it also doesnt help with out securityheaders score...  -->
17<!--    <meta http-equiv="Content-Security-Policy" content="-->
18<!--        default-src 'self';-->
19<!--        script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.googletagmanager.com https://s.nitropay.com https://www.google-analytics.com https://pagead2.googlesyndication.com https://*.googlesyndication.com https://*.googletagservices.com https://*.googleadservices.com https://adservice.google.com https://ep1.adtrafficquality.google https://ep2.adtrafficquality.google;-->
20<!--        style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://*.googlesyndication.com;-->
21<!--        img-src 'self' data: blob: https:;-->
22<!--        font-src 'self' data: https://fonts.gstatic.com;-->
23<!--        connect-src 'self' https://*.execute-api.eu-central-1.amazonaws.com https://*.amazonaws.com https://www.google-analytics.com https://*.google-analytics.com https://*.analytics.google.com https://pagead2.googlesyndication.com https://*.googlesyndication.com https://ep1.adtrafficquality.google https://ep2.adtrafficquality.google https://poe.ninja https://*.poe.ninja https://poe.scout https://*.poe.scout https://www.pathofexile.com;-->
24<!--        media-src 'self' blob: data: https:;-->
25<!--        object-src 'self';-->
26<!--        base-uri 'self';-->
27<!--        form-action 'self';-->
28<!--        frame-src 'self' https://*.googlesyndication.com https://googleads.g.doubleclick.net https://*.google.com;-->
29<!--        worker-src 'self';-->
30<!--    ">-->
31
32    <meta name="referrer" content="strict-origin-when-cross-origin">
33
34    <!--  mobile support  -->
35    <!--  https://www.reddit.com/r/webdev/comments/1mfrpdx/mobile_apps_built_with_html_css_what_you_should/  -->
36    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no" />
37
38    <!-- page previews for links (when linking the site in discord, skype, whatsapp, etc. there are these lines as preview -->
39    <meta property="og:image" content="https://www.filterblade.xyz/assets/img/Icons/FilterBlade_logo.png"/>
40    <meta property="og:type" content="website"/>
41    <meta property="og:site_name" content="FilterBlade"/>
42    <meta property="og:title" content="FilterBlade - PoE1&2 Filter Customizer"/>
43    <meta property="og:description" content="Customize NeverSink's Path of Exile loot filter. Edit strictness, style, colors and s
43ounds with instant preview."/>
44    <meta property="og:url" content="https://www.filterblade.xyz/"/>
45
46    <!-- new google analytics GA4 tag manager (starting may 2023) -->
47    <!-- Google tag (gtag.js) -->
vendor: 69 bytes, lines 47-48
47
48    <script async src="https://www.googletagmanager.com/gtag/js?id=
48G-C1G43Y1K40
vendor: 17 bytes, lines 48-49
48"></script>
49    
49<script>
50        
vendor: 156 bytes, lines 50-54
50window.dataLayer = window.dataLayer || [];
51        function gtag(){dataLayer.push(arguments);}
52        gtag('js', new Date());
53
54        gtag('config', '
54G-C1G43Y1K40
vendor: 9 bytes, lines 54-55
54');
55    
55</script>
55
56
57    <!-- Structured data (schema.org / JSON-LD) - gives Google a richer SERP card for the app (knowledge-panel candidate). -->
58    
58<script type="application/ld+json">
59        {
60            "@context": "https://schema.org",
61            "@type": "WebApplication",
62            "name": "FilterBlade",
63            "url": "https://www.filterblade.xyz/",
64            "description": "Path of Exile 1 & 2 loot filter customizer. Edit, preview, and export NeverSink's filter with a rich UI for beginners and veterans.",
65            "applicationCategory": "GameApplication",
66            "operatingSystem": "Any",
67            "browserRequirements": "Requires JavaScript",
68            "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
69            "author": { "@type": "Person", "name": "NeverSink", "url": "https://github.com/NeverSinkDev" },
70            "image": "https://www.filterblade.xyz/assets/img/Icons/FilterBlade_logo.png"
71        }
72    </script>
72
73
74    <!-- AdSense -->
75    <meta name="google-site-verification" content="1X-hQ_ZYbmwpox84Y5R_rMOrtL5gxAR8Wdf0mMOyrPA" />
76    <!-- more scripts will be added in AdSenseInitContainer -->
77    <!-- WARNING: DO NOT PUT THIS IN THE HTML HEADER! THIS WILL CAUSE ALL OUR JS FILE IMPORT TO BE TRIGGERED TWICE AND CAUSE MASSIVE ISSUES!-->
78
79    <!-- <StartImport> Note: DO NOT EDIT THIS LINE! IT'S USED FOR AUTO-UPDATING! -->
80    <!-- CSS/JS IMPORTS -->
81    <link rel="stylesheet" type="text/css" href="css.min.css?v=116525"/>
82    
82<script src='filterblade.min.js?v=116525'></script>
82
83    
83<script src='libs.min.js?v=116525'></script>
83
84
85    <!-- Progressive Web App -->
86    <link rel="manifest" href="manifest.json" />
87    <!-- ios support -->
88    <link rel="apple-touch-icon" href="assets/img/Icons/FilterBlade_logo_144px.png" />
89    <meta name="apple-mobile-web-app-status-bar" content="#09082b" />
90    <meta name="theme-color" content="#09082b" />
91    
91<script>
92        if ('serviceWorker' in navigator) {
93            navigator.serviceWorker.register('/serviceWorker.js')
94                .then(function(registration) {
95                    console.log('Registration successful, scope is:', registration.scope);
96                })
97                .catch(function(error) {
98                    console.log('Service worker registration failed, error:', error);
99                });
100        }
101    </script>
101
102    <!-- <EndImport> Note: DO NOT EDIT THIS LINE! IT'S USED FOR AUTO-UPDATING! -->
103
104    
104<script>
105        <!-- IMPORTANT: adding new vars here also needs to be handled in AutoUpdater DOM mock -->
106        var isGlobalOfflineModeEnabled = false;
107        var isGlobalOfflineModeEnabledPoe2 = false;
108        var isHeadlessServerSideExecution = false;
109    </script>
109
110
111    <noscript>
112        <style>
113            #loadingLabel { display: none; }
114            #loadingBody, #loadingBody * { cursor: not-allowed !important; }
115        </style>
116    </noscript>
117</head>
118
119<!-- no BG image because it is set via code on startUp based on gameMode. dont have anything before that because otherwise it flickers up for a sec before the code changes it. -->
120<!-- however: we cant set it in CSS because the other HTML pages should still have a default BG independant of gameType -->
121<body onload="initFilterBlade()" id="body" style="background-image: none">
122
123<div id="smallMessageBoxContainer"></div>
124
125<!-- custom right click context menu -->
126<div id="rightClickContextMenuContainer">
127    <div id='rightClickContextMenuContainer_ButtonList'></div>
128</div>
129
130<!-- Navigation Bar / Menu on top -->
131<article id="headerContainer" class="border">
132    <header id="header" style="margin: 0 0.5rem 0 0">
133
134        <!-- LEFT - MOBILE: navBar & search -->
135        <span class="mobileOnly" id="mobileNavBarIcon" style="flex: 2; text-align: left">
136            <button id="mobileHeaderOpenNavBarBtn" onclick="gFilterBlade.screenSelector.displayMobileScreenNav()">
137                <svg
138                        class="guiIcon headerIconButton"
139                        xmlns="http://www.w3.org/2000/svg"
140                        viewBox="0 0 24 24"
141                        fill="none"
142                        stroke="white"
143                        stroke-width="2"
144                        stroke-linecap="round"
145                        stroke-linejoin="round"
146                >
147                  <path d="M4 6l16 0" />
148                  <path d="M4 12l16 0" />
149                  <path d="M4 18l16 0" />
150                </svg>
151            </button>
152
153            <button id="openSearchBtn" class="mobileOnly">
154                <svg
155                        class="guiIcon headerIconButton"
156                        xmlns="http://www.w3.org/2000/svg"
157                        viewBox="0 0 24 24"
158                        fill="none"
159                        stroke="white"
160                        stroke-width="2"
161                        stroke-linecap="round"
162                        stroke-linejoin="round"
163                >
164                  <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
165                  <path d="M21 21l-6 -6" />
166                </svg>
167            </button>
168        </span>
169
170        <!-- LEFT - DESKTOP: logo & name  -->
171        <span style="flex: 2; text-align: left" class="hideOnMobile">
172            <a class="ImageDiv LogoImage " href="/" aria-label="FilterBlade icon"></a>
173            <a class="headerLink selectedHeaderLink" style="padding: 4px 0.6rem; margin-left: 0;" title="Change specific settings and appearance of a filter" href="/"><b>FilterBlade</b></a>
174        </span>
175
176        <!-- MIDDLE: search on desktop, name&logo on mobile-->
177        <span style="flex: 3; white-space: nowrap" id="globalSearchContainer">
178            <input class="hideOnMobile globalSearchInput" id="globalSearchInput" title="Search (Ctrl + K)" autocomplete="off" placeholder="Search (Ctrl + K)">
179            <a class="ImageDiv LogoImage mobileOnly" href="/" aria-label="FilterBlade icon"></a>
180            <a class="headerLink selectedHeaderLink mobileOnly" style="padding: 4px 0.6rem; margin-left: 0;"  title="Change specific settings and appearance of a filter" href="/"><b>FilterBlade</b></a>
181        </span>
182
183        <!-- RIGHT: login/logout & quickSave -->
184        <span style="flex: 2; text-align: right; white-space: nowrap">
185
186            <!-- quickSave -->
187            <span id="quickSavePlaceholder"></span>
188
189            <!-- login/logout -->
190            <span id="loginLogoutContainer"></span>
191
192        </span>
193    </header>
194</article>
195
196<div id="headerSpacer"></div>
197
198<nav id="leftSideNavbar" class="hideOnMobile" style="width: 14rem; min-width: 11rem; overflow-x: hidden; z-index: 999999; background: rgb(10, 10, 10); height: 100%; position: fixed; border-right: 1px solid grey;">
199    <div style="height: 4.375rem;"></div>
200    <div id="leftSideNavbarContent"></div>
201</nav>
202
203<!-- Left side vertical Ad banner -->
204<div id="leftSideContainer" class="border hideOnMobile">
205    <label id="LeftSideAdLabel" class="LeftSideAdLabel text_VeryLow">Please consider supporting us by disabling AdBlock.</label>
206    <!-- will be generated from code by initGoogleAdsense_LeftSideAd() -->
207</div>
208
209<!-- Loading screen -->
210<div class="myBody border" id="loadingBody" style="margin-bottom: 1000px; margin-top: 60px">
211
212    <!-- content for ENABLED javaScript (should be hidden in the noscript style to not cause confusion by saying that FB is loading -->
213    <label class="VisualUtilityTitle" id="loadingLabel">Initializing FilterBlade...</label>
214    <label class="VisualUtilityText text_Low" id="loadingDetails"></label>
215
216    <noscript>
217        <!-- content for DISABLED javaScript -->
218        <label class="VisualUtilityDescription">
219            <br>
219This page is auto generated with JavaScript.<br><br>YOU NEED TO HAVE JAVASCRIPT ENABLED TO USE THIS SITE.
220        </label>
221    </noscript>
222</div>
223
224<!-- MAIN BODY-->
225<main class="myBody border" id="myBody" style="display: none">
226
227    <!-- offline / maintenance screen  -->
228    <div id="offlineInfo" style="display: none"></div>
229
230    <!-- (hidden) auto-saved changes dialog -->
231    <div id="foundCookieDivOuter" class="bottomCenterFloat" style="display: none">
232        <div id="foundCookieDiv" class="border" style="text-align: center;">
233            <div class="SSShowcaseDiv SE_SC foundCookieInnerDiv" id="foundCookieDiv_Waiting" style="display: none">
234                <label class="VisualUtilityTitle">Checking for filter to load...</label>
235                <label class="VisualUtilityDescription">Please wait...</label>
236            </div>
237            <div class="SSShowcaseDiv SE_SC foundCookieInnerDiv" id="foundCookieDiv_Content">
238                <label class="VisualUtilityTitle">Load Auto-Save?</label>
239                <label class="VisualUtilityDescription text_Low" id="unstableChangesFound_Info"></label>
240                <br>
241                <button id="loadUnstableChangesButton" class="ui-state-active" onclick="gFilterBlade.changeUI.loadAutoSave()">Okay</button>
242                <button onclick="gFilterBlade.changeStorage.clearAutoSave()" id="dontLoadAutoSaveBtn" style="margin-bottom: 0.5rem; " class="TTTrigger">No, thanks</button>
243                <div>If you want to delete these auto-saved changes, click on 'Reset filter'</div>
244            </div>
245        </div>
246    </div>
247
248    <!-- ==== OVERVIEW SCREEN =============================================================================== -->
249    <section id="FilterSelectionDiv" style="display: none">
250
251        <!-- ==== News box ==== -->
252        <div id="Overview_NewsBox" style="display: none"></div>
253
254        <!-- ==== saveStateSharing info box ==== -->
255        <div id="saveStateShareInfoBox" style="display: none; text-align: center">
256            <div class="saveStateShareInnerBox">
257                <label class="VisualUtilityTitle">Filter loaded via sharing link!</label>
258                <label class="VisualUtilityDescription" id="saveStateShareDetailLabel"></label>
259                <br>
260                <div style="display: none; margin-bottom: 5px" id="saveStateShareSoundDownloadContainer">
261                    <label>Sound files download: </label>
262                    <a id="saveStateShareSoundDownloadLink" href="" target="_blank"></a>
263                </div>
264                <button id="saveStateShareOkayButton" onclick="document.getElementById('saveStateShareInfoBox').style.display = 'none';">Okay!</button>
265            </div>
266        </div>
267
268        <div id="oldOverview">
269
270            <h1 class="BroadTitle BroadTitle_NoTopSpace" id="baseFilterSelectionTitle" style="margin-bottom: 1rem">Get started!</h1>
271
272            <div style="text-align: center">
273
274                <div style="display: flex; min-height: 20rem; flex-wrap: wrap; justify-content: space-evenly;" id="startButtonContainer" class="flexWithHoverBoxes">
275
276                    <!-- build wizard -->
277                    <div class=" flexScaleOne homeBigBtnOuter ">
278                        <div  class=" homeBigBtn button Interactable  text_High homeFeatureButton" onclick="PreConfigWizard.openModeSelection()">
279                            <span class="flexScaleOne" style="font-size: 1.3rem; display: flex; align-items: center">Auto-Adjust<br>for build</span>
280
281                            <svg
282                                    style="    margin-bottom: 1rem;width: 50%"
283                                    class="flexScaleOne"
284                                    xmlns="http://www.w3.org/2000/svg"
285                                    width="32"
286                                    height="32"
287                                    viewBox="0 0 24 24"
288                                    fill="none"
289                                    stroke="white"
290                                    stroke-width="1"
291                                    stroke-linecap="round"
292                                    stroke-linejoin="round"
293                            >
294                                <path d="M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6z" />
295                            </svg>
296
297                            <span class="flexScaleOne hideOnMobile" style="font-size: 1rem; display: flex; align-items: center">Generate a filter specific to your inGame character!</span>
298                        </div>
299                    </div>
300
301                    <div class="flexScaleOne homeBigBtnOuter">
302                        <div class="homeFeatureButton homeBigBtn button   Interactable" onclick="StartScreen.initFilterSelection_StrictnessLevels(displayModalBox_ReturnContainer())">
303                            <span class="flexScaleOne" style="font-size: 1.3rem; display: flex; align-items: center; flex-direction: column; justify-content: center;">Strictness:<br><span id="start_currentStrictnessBtnLabel">Semi-Strict</span></span>
304
305                            <svg
306                                    style="    margin-bottom: 1rem;width: 50%"
307                                    class="flexScaleOne"
308                                    xmlns="http://www.w3.org/2000/svg"
309                                    width="32"
310                                    height="32"
311                                    viewBox="0 0 24 24"
312                                    fill="none"
313                                    stroke="white"
314                                    stroke-width="1"
315                                    stroke-linecap="round"
316                                    stroke-linejoin="round"
317                            >
318                                <path d="M14 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
319                                <path d="M4 6l8 0" />
320                                <path d="M16 6l4 0" />
321                                <path d="M8 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
322                                <path d="M4 12l2 0" />
323                                <path d="M10 12l10 0" />
324                                <path d="M17 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
325                                <path d="M4 18l11 0" />
326                                <path d="M19 18l1 0" />
327                            </svg>
328
329                            <span class="flexScaleOne hideOnMobile" style="font-size: 1rem; display: flex; align-items: center">Select how many items are shown.</span>
330                        </div>
331                    </div>
332
333                    <div class="flexScaleOne  homeBigBtnOuter">
334                        <div class="homeFeatureButton homeBigBtn button   Interactable" onclick="changeScreenViaStart('customize')">
335                            <span class="flexScaleOne" style="font-size: 1.3rem; display: flex; align-items: center">
336                                Customize<br>filter
337                            </span>
338
339                            <svg
340                                    style="    margin-bottom: 1rem;width: 50%"
341                                    class="flexScaleOne"
342                                    xmlns="http://www.w3.org/2000/svg"
343                                    width="32"
344                                    height="32"
345                                    viewBox="0 0 24 24"
346                                    fill="none"
347                                    stroke="white"
348                                    stroke-width="1"
349                                    stroke-linecap="round"
350                                    stroke-linejoin="round"
351                            >
352                                <path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" />
353                                <path d="M13.5 6.5l4 4" />
354                                <path d="M19.001 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
355                                <path d="M19.001 15.5v1.5" />
356                                <path d="M19.001 21v1.5" />
357                                <path d="M22.032 17.25l-1.299 .75" />
358                                <path d="M17.27 20l-1.3 .75" />
359                                <path d="M15.97 17.25l1.3 .75" />
360                                <path d="M20.733 20l1.3 .75" />
361                            </svg>
362
363                            <span class="flexScaleOne hideOnMobile" style="font-size: 1rem; display: flex; align-items: center">Safely fine-tune the entire filter in detail.</span>
364                        </div>
365                    </div>
366
367                    <div class="flexScaleOne homeBigBtnOuter">
368                        <div style=" display: flex; flex-direction: column; padding: 0; height: 100%; width: 100%; margin: auto"  class="homeBigBtn">
369
370                            <button class="flexScaleOne homeFeatureSmallBtn button Interactable" onclick="StartScreen.initFilterSelection_BaseFilter(displayModalBox_ReturnContainer())">Game mode:<br><span id="start_CurrentGameModeBtnLabel">Softcore</span></button>
371
372                            <button class="flexScaleOne homeFeatureSmallBtn" style="margin: 1rem 0"  onclick="new PresetBrowserUI().displayPresetSelection();">User-created<br>Modules</button>
373
374                            <button class="flexScaleOne homeFeatureSmallBtn " onclick="StartScreen.displayBaseFilterStyleSelectionPopUp()">Default filter colors:<br><span id="start_CurrentStyleBtnLabel">Normal</span></button>
375                        </div>
376                    </div>
377
378                    <div class="flexScaleOne homeBigBtnOuter">
379                        <div  class="homeBigBtn homeFeatureButton  button Interactable" onclick="changeScreenViaStart('download')">
380
381                            <span class="flexScaleOne" style="font-size: 1.3rem; display: flex; align-items: center">
382                                Export filter<br>to PoE
383                            </span>
384
385                            <svg
386                                    style="    margin-bottom: 1rem;width: 50%"
387                                    class="flexScaleOne"
388                                    xmlns="http://www.w3.org/2000/svg"
389                                    width="32"
390                                    height="32"
391                                    viewBox="0 0 24 24"
392                                    fill="none"
393                                    stroke="white"
394                                    stroke-width="1"
395                                    stroke-linecap="round"
396                                    stroke-linejoin="round"
397                            >
398                                <path d="M19 18a3.5 3.5 0 0 0 0 -7h-1a5 4.5 0 0 0 -11 -2a4.6 4.4 0 0 0 -2.1 8.4" />
399                                <path d="M12 13l0 9" />
400                                <path d="M9 19l3 3l3 -3" />
401                            </svg>
402
403                            <span class="flexScaleOne hideOnMobile" style="font-size: 1rem; display: flex; align-items: center">Download the filter, or sync it to your PoE profile!</span>
404
405                        </div>
406                    </div>
407                </div>
408            </div>
409        </div>
410    </section>
411
412    <!-- external Style Summary -->
413    <div id="StyleSummaryDiv" style="display: none;">
414
415        <!-- Compact mode toggle button + slider -->
416        <div id="SS_CompactModeButtonContainer">
417            <div id="SS_CompactSizeSlider" style="display: none; margin-left: 10px; margin-bottom: 15px; width: 6.25rem"><div class="ui-slider-handle" id="SS_CompactSizeSliderHandle"></div></div>
418            <button id="SSToggleCompactModeBtn" style="padding: 0.25rem; ">
419                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrows-exchange" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
420                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
421                    <path d="M7 10h14l-4 -4" />
422                    <path d="M17 14h-14l4 4" />
423                    <title>Switch view</title>
424                </svg>
425            </button>
426        </div>
427
428        <article id="StyleSummaryInnerDiv"></article>
429    </div>
430
431    <!-- ==== CUSTOMIZER ====================================================================================== -->
432    <section id="visualOuterDiv" style="display: none">
433
434        <label id="CustomizerWarningLabel"></label>
435
436        <!-- external Customizer Blocks -->
437        <div id="CustomizerExternalContainer" style="display: none;">
438<!--            <button onclick="gFilterBlade.screenSelector.selectDiv('start')" style="margin: auto; display: block; font-size: 1.25rem; position: absolute; float: left">Back to Start</button>-->
439<!--            <h2 class="BroadTitle">Customize</h2>-->
440            <div id="visual"></div>
441        </div>
442
443    </section>
444
445    <!-- ==== LOOT SIMULATOR ==================================================================================== -->
446    <section id="LootSimulatorDiv" style="display: none;">
447
448        <!-- tab-section header -->
449        <div class="tabSelectionButtonContainer">
450            <button onclick="gFilterBlade.lootSimulator.selectTab(0)" class="simulateTabButton tabSelectionButton ui-state-active">Loot Generator</button>
451            <button onclick="gFilterBlade.lootSimulator.selectTab(1)" class="simulateTabButton tabSelectionButton">Import Item from PoE</button>
452            <button onclick="gFilterBlade.lootSimulator.selectTab(2)" class="simulateTabButton tabSelectionButton">Item Builder</button>
453        </div>
454
455        <!-- original loot simulator random loot pile -->
456        <div class="simulateScreenTab">
457            <!-- LS item container -->
458            <div class="LootSimulatorDiv" style="background: url(assets/img/Background_Voll.jpg); background-size: cover" id="LS_Container">
459                <div id="LootSimulatorInnerDiv"></div>
460            </div>
461
462            <!-- LS generate buttons -->
463            <div class="LootSimulatorGenerateButtonDiv">
464                <div style="flex: 1">
465                    <button onclick="gFilterBlade.lootSimulator.generateLootSimulator('realistic')" class="LootSimulatorGenerateButton" id="generateLootButton_realistic" style="margin:0;">Generate loot</button>
466                    <button onclick="gFilterBlade.lootSimulator.generateLootSimulator('optimized')" class="LootSimulatorGenerateButton" id="generateLootButton_optimized">Generate valuable loot</button>
467                </div>
468
469                <span style="flex: 1">
470                    <div style="display: inline-flex; align-items: center; margin-left: 2rem">
471                        <label class="LootSimulatorSettingsButton_numberInputLabel text_High" for="zoneLevelInput">Zone Level: </label>
472                        <input id="zoneLevelInput" class="text_High border" value="78" min="1" max="99" type="number" onkeydown="gFilterBlade.lootSimulator.valueInputKeyPress(event)">
473                    </div>
474
475                    <span style="display: inline-block; margin-left: 2rem">
476                        <span style="vertical-align: middle" id="LS_DisplayHiddenItemsIconContainer" title="Display hidden items"></span>
477                        <span style="vertical-align: middle" id="LS_playLootPileSoundsIconContainer" title="Play loot sounds"></span>
478
479                        <svg  style="vertical-align: middle" id="LS_changeBGBtn" xmlns="http://www.w3.org/2000/svg" class="guiIcon Interactable icon icon-tabler icon-tabler-library-photo" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
480                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
481                            <path d="M7 3m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" />
482                            <path d="M4.012 7.26a2.005 2.005 0 0 0 -1.012 1.737v10c0 1.1 .9 2 2 2h10c.75 0 1.158 -.385 1.5 -1" />
483                            <path d="M17 7h.01" />
484                            <path d="M7 13l3.644 -3.644a1.21 1.21 0 0 1 1.712 0l3.644 3.644" />
485                            <path d="M15 12l1.644 -1.644a1.21 1.21 0 0 1 1.712 0l2.644 2.644" />
486                            <title>Change loot pile background image</title>
487                        </svg>
488
489                        <button style="vertical-align: middle;" onclick="gFilterBlade.lootSimulator.displayConfigPopUp()">Config</button>
490                    </span>
491                </span>
492            </div>
493
494            <!-- LS Quick Editor -->
495            <div class="CustomizeGroupBox" id="LS_ItemEditorBox">
496
497                <div class="VisualUtilityTitleContainer">
498                    <label id="LS_QuickEditor_CurrentInfoLabel" class="VisualUtilityTitleText text_High">Click an Item above to edit.</label>
499                    <button id="LS_QuickEditor_CurrentInfoButton" style="display: none; float: right" onclick="gFilterBlade.customizeTree.jumpToEntry(gFilterBlade.lootSimulator.visualEditor.filterEntry, gFilterBlade.lootSimulator.visualEditor.item[0]);"></button>
500                </div>
501
502                <div id="LS_VisualEditorContainer">
503                    <!-- will be replaced by QuickEditor once an item was selected. -->
504                </div>
505
506                <div style="display: none; text-align: center" id="LS_QuickEditor_CurrentDecoratorContainer">
507                    <br>
508                    <label style="vertical-align: middle; font-size: 24px">Decorators</label>
509                    <button style="vertical-align: middle;" onclick="displayModalBox_HTML(getDecoratorTooltipHTML())">What are Decorators?</button>
510                    <br>
511                    <div id="LS_QuickEditor_CurrentDecorators"></div>
512                </div>
513            </div>
514        </div>
515
516        <!-- Item ReCreator -->
517        <div class="simulateScreenTab" style="display: none">
518            <div id="ItemReCreationContainer"></div>
519        </div>
520
521        <!-- Item Previewer -->
522        <div class="simulateScreenTab" style="display: none">
523            <div class='CustomizeGroupBox'>
524                <label class="VisualUtilityDescription" style="width: 100%; margin-bottom: 0">
525                    Create your own items and see how they look in the filter.
526                </label>
527            </div>
528            <div id="LootSim_ItemPreviewerOuterContainer"></div>
529        </div>
530    </section>
531
532    <!-- ==== STYLE EDITOR ===================================================================================== -->
533    <section id="StyleEditorDiv" style="display: none">
534
535        <!-- SE Description -->
536        <div class="CustomizeGroupBox ScreenDescriptionBox">
537            <label class="ScreenDescription text_Low">
538                Change reoccurring colors and sounds of the filter.<br>
539                If you change a color here, it will affect every entry in the filter that uses that color. Items that have the default appearance won't be listed here and can't be changed using the Style Editor.
540            </label>
541        </div>
542
543        <h3 id="styleCombiEditorDescription"></h3>
544        <article id="styleCombiEditorOuterContainer"></article>
545
546        <div class="accordion AccordionBtnStep1" id="AccordionButtonLegacyStyleEditor">
547            <div class="ImageDiv AccordionIcon"
548                 style="background: url(assets/img/Icons/AccordionIcons/Leaguestone.png) no-repeat top center; background-size: contain;"></div>
549            <label class="AccordionLabel text_High">Legacy Global Color&Sound Editors</label>
550        </div>
551        <!-- content -->
552        <div class="ShowAccordion AccordionContent AccordionStep">
553            <article id="styleEditorInnerDiv"></article>
554        </div>
555
556        <!-- ==== QUICKFUNCTIONS (header) -->
557        <div class="accordion AccordionBtnStep1" id="AccordionButtonQuickFuncs">
558            <div class="ImageDiv AccordionIcon"
559                 style="background: url(assets/img/Icons/AccordionIcons/MalachaisArtifice.png) no-repeat top center; background-size: contain;"></div>
560            <label class="AccordionLabel text_High">Global One-Click Edits</label>
561        </div>
562        <!-- content -->
563        <div class="ShowAccordion AccordionContent AccordionStep">
564            <label class="VisualUtilityDescription" style="width: 95%">Quick edits that affect the whole filter and are applied BEFORE (i.e. have less priority than) your other changes.</label>
565            <div id="adv_QuickFunctionContainer"></div>
566            <div id="adv_DeprecatedActorChangesUI"></div>
567        </div>
568    </section>
569
570    <!-- ==== ADVANCED SCREEN ================================================================================== -->
571    <section id="AdvancedDiv" style="display: none">
572
573        <div class="CustomizeGroupBox ScreenDescriptionBox" style="text-align: center;">
574            <label class="ScreenDescription text_Low">Additional means to edit the filter. These are designed for experienced filterblade-users, developers and filter authors.</label>
575            <br>
576            <label class="VisualWarningLabel" style="font-size: 24px">Only use these tools if you know what you are doing.<br>Most users won't need to use any of them.</label>
577        </div>
578
579        <!-- actual AdvancedScreen content (the other is for filter structure-screen) -->
580        <div id="AdvancedScreen_NormalContainer">
581
582            <!-- ==== PRESETS ==== -->
583            <div class="accordion AccordionBtnStep1" id="AccordionButtonPresetsAcc">
584                <div class="ImageDiv AccordionIcon" style="background: url(assets/img/Icons/AccordionIcons/Exalted.png) no-repeat top center; background-size: contain;"></div>
585                <label class="AccordionLabel text_High">My Modules</label>
586            </div>
587            <!-- content -->
588            <div class="ShowAccordion AccordionContent AccordionStep">
589                <div class="CustomizeGroupBox">
590                    <h3 style="margin: 0; text-align: center" class="text_Low">Modules are building blocks for filters. If you have multiple filters using common changes you can keep the common changes in a module! You can also use other people's modules on the Overview tab.<br>We also made a <a href="https://www.youtube.com/watch?v=XEKhoJ-hULk" target="_blank">video</a> about them.</h3>
591                </div>
592                <div id="advanced_myPresetListContainer">
593                    <div id="myUserPresetList"></div>
594                </div>
595                <div class="CustomizeGroupBox">
596                    <h3 style="margin: 0; text-align: center">You can then use these modules on the <a onclick="gFilterBlade.screenSelector.selectDiv(0)">Overview</a> when creating a new filter.</h3>
597                </div>
598            </div>
599
600            <!-- ==== SaveState visualizer (header) ==== -->
601            <div class="accordion AccordionBtnStep1" id="AccordionButtonH">
602                <div class="ImageDiv AccordionIcon" style="background: url(assets/img/Icons/AccordionIcons/OrbOfHorizons.png) no-repeat top center; background-size: contain;"></div>
603                <label class="AccordionLabel text_High">Review changes</label>
604            </div>
605            <!-- content -->
606            <div class="ShowAccordion AccordionContent AccordionStep">
607                <label class="VisualUtilityDescription text_Low">Visualize every single change that you customized in the currently active filter.</label>
608                <br>
609                <button onclick="new SaveStateVisualizer('SaveStateVisualizeContainer').visualizeSaveState()">Execute</button>
610                <div id="SaveStateVisualizeContainer"></div>
611            </div>
612
613            <!-- ==== Filter Line Creator (header) ==== -->
614            <div class="accordion AccordionBtnStep1" id="AccordionButtonF">
615                <div class="ImageDiv AccordionIcon" style="background: url(assets/img/Icons/AccordionIcons/Chromatic.png) no-repeat top center; background-size: contain;"></div>
616                <label class="AccordionLabel text_High">Filter Line Translator</label>
617            </div>
618            <!-- content -->
619            <div class="ShowAccordion AccordionContent AccordionStep">
620                <label class="VisualUtilityDescription text_Low">
621                    For your day-to-day filter creator!<br>
622                    Use the FilterBlade appearance editor to find the right colors for your filter and simply copy/paste the generated code into your filter!<br>
623                    These 4 items represent the 4 possible rarities (Normal/None, Magic, Rare, Unique) since they have different default text colors.
624                </label>
625                <div id="Adv_FilterLineTranslator">
626                </div>
627            </div>
628
629            <!-- ==== FILTER STRUCTURE ==== -->
630            <div class="accordion AccordionBtnStep1 AccordionOpen" onclick="gFilterBlade.advancedScreen.toggleStructureScreen()">
631                <div class="ImageDiv AccordionIcon" style="background: url(assets/img/Icons/AccordionIcons/HinekorasSight.png) no-repeat top center; background-size: contain;"></div>
632                <label class="AccordionLabel text_High">Filter Structure</label>
633            </div>
634
635            <!-- ==== UPLOAD FILTER + OPTION (header) ==== -->
636            <div class="accordion AccordionBtnStep1" id="AccordionButtonC">
637                <div class="ImageDiv AccordionIcon" style="background: url(assets/img/Icons/AccordionIcons/Regal.png) no-repeat top center; background-size: contain;"></div>
638                <label class="AccordionLabel text_High">Test Local Filter</label>
639            </div>
640            <!-- content -->
641            <div class="ShowAccordion AccordionContent AccordionStep">
642                <div class="CustomizeGroupBox">
643                    <label class="VisualUtilityTitle">Upload Local Filter</label>
644                    <label class="VisualWarningLabel">WARNING: This severely limits the functionality on FilterBlade:</label><br>
645                    <ul class="VisualWarningLabel" style="margin: 4px 0">
646                        <li>Expect bugs!</li>
647                        <li>
647You CAN test the uploaded filters in the loot simulator</li>
648                        <li>You CAN use the advanced->structure screen to change the filter</li>
649                        <li>CAN'T reliably use the customizer with uploaded filters. There WILL be bugs.</li>
650                        <li>CAN'T use the 'my filters' system with uploaded filters. Just doesn't work.</li>
651                    </ul>
652                    <label class="VisualWarningLabel" style="margin-bottom: 7px; display: inline-block;">This will ALSO be buggy with filters created on FilterBlade. Please use the <i onclick="gFilterBlade.screenSelector.selectDiv(5)" style="text-decoration: underline; cursor: pointer">My Filters</i> system instead of re-uploading files!.</label><br>
653
654                    <button onclick="document.getElementById('A_FU_uploadFilterButton').style.display = 'inline-block'; this.style.display = 'none'">I understand</button>
655                    <button id="A_FU_uploadFilterButton" style="display: none">Test Local Filter</button>
656                    <!-- Input for custom filters -->
657                    <input id="filterFileInput" type="file" accept=".filter" onclick="this.value = null;" onchange="gFilterBlade.fileSelectionHandler.uploadCustomFile(event, 'filter')" style="display: none">
658
659                    <br><br><br>
660
661                    <label class="VisualUtilityTitle">Up- or Download your Save-File</label>
662                    <label class="VisualUtilityText text_Low">This file contains your full FilterBlade filter and saveState.<br>You can download it as backUp or to move it between the beta and live version of FilterBlade.</label>
663                    <button onclick="gFilterBlade.changeUI.downloadSaveFile()">Download current saveFile</button>
664                    <button onclick="gFilterBlade.changeUI.uploadSaveFile()">Load filter from saveFile</button>
665
666                    <br><br><br>
667
668                    <label class="VisualUtilityTitle">Upload Customizer Definition Option-File</label>
669                    <label class="VisualUtilityText text_Low">The option-file defines the connections between a filter and the customizer and the whole customizer UI. You can read more or contribute on our <a target="_blank" href="https://github.com/NeverSinkDev/FilterBlade-Public-Assets">GitHub</a>.</label>
670                    <button onclick="document.getElementById('optFileUploadInput').click()">Upload Option File</button>
671                    <input id="optFileUploadInput" type="file" accept=".options" onclick="this.value = null;" onchange="gFilterBlade.fileSelectionHandler.uploadCustomFile(event, 'option')" style="display: none">
672                </div>
673            </div>
674        </div>
675
676        <!-- Filter Structure screen -->
677        <div id="AdvancedScreen_StructureContainer" style="display: none">
678            <button onclick="gFilterBlade.advancedScreen.toggleStructureScreen()">Go Back</button>
679            <div id="StructureScreenUI_TargetContainer"></div>
680        </div>
681    </section>
682
683    <!-- ==== Save/load screen ======================================================================================= -->
684    <section id="CodeDiv" style="display: none">
685
686        <!-- my filters-->
687        <div id="MyFilters_NewsBox" style="display: none"></div>
688
689        <!-- myFilters (FILTER) view -->
690        <div class="myFiltersScreenTab">
691
692            <label class="BroadTitle BroadTitle_NoTopSpace">My filters</label>
693
694            <!-- create new filter-button -->
695            <div style="text-align: center">
696                <button class="TTTrigger" onclick="gFilterBlade.screenSelector.selectDiv(0)" style="font-size: 1.5rem; width: 240px;"><span style="vertical-align: middle">Create new filter</span><svg style="vertical-align: middle; margin-right: -8px" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="26" height="26" viewBox="0 0 24 24" stroke-width="2" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
697                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
698                    <path d="M9 6l6 6l-6 6" />
699                </svg></button>
700                <div>Start customizing and head over to the 'Export to PoE' screen once you're done.</div>
701                <!--                <button class="TTTrigger" onclick="gFilterBlade.screenSelector.selectDiv(6, function() { gFilterBlade.downloadScreen.selectExportWizardPage_SaveStateSettings(true, true); }); triggerAnalyticsEvent('SaveLoad', 'Used Save-As-New-Filter button')" style="font-size: 24px; width: 230px;">Save as new filter</button>-->
702                <!--                <div>You're done customizing and want to save and download/sync the current filter? Click here!</div>-->
703            </div>
704            <br>
705
706            <!-- saveState list container  -->
707            <div id="profileSaveStateList"></div>
708
709            <!-- bottom tooltip box -->
710            <div class="CustomizeGroupBox text_Low">
711                <h3 style="margin: 0; text-align: center">You can also view <a target="_blank" href="/Profile">
711other player's filters</a> and <a onclick="window.open(PoeOAuthUtils.getProfilePageUrl(), '_blank')">your synced filters</a>.</h3>
712            </div>
713        </div>
714
715        <!-- my MODULES view  -->
716        <div class="myFiltersScreenTab" style="display: none" id="myFilters_PresetListContainer">
717
718            <label class="BroadTitle BroadTitle_NoTopSpace">My modules</label>
719
720            <!-- create new module-button -->
721            <div style="text-align: center">
722                <button class="TTTrigger" onclick="gFilterBlade.screenSelector.selectDiv(0)" style="font-size: 1.5rem; width: 260px;"><span style="vertical-align: middle">Create new module</span><svg style="vertical-align: middle; margin-right: -8px" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="26" height="26" viewBox="0 0 24 24" stroke-width="2" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
723                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
724                    <path d="M9 6l6 6l-6 6" />
725                </svg></button>
726                <div>Start customizing and head over to the Advanced -> 'My Modules' once you're done.</div>
727                <!--                <button class="TTTrigger" onclick="gFilterBlade.screenSelector.selectDiv(6, function() { gFilterBlade.downloadScreen.selectExportWizardPage_SaveStateSettings(true, true); }); triggerAnalyticsEvent('SaveLoad', 'Used Save-As-New-Filter button')" style="font-size: 24px; width: 230px;">Save as new filter</button>-->
728                <!--                <div>You're done customizing and want to save and download/sync the current filter? Click here!</div>-->
729            </div>
730            <br>
731
732        </div>
733
734    </section>
735
736    <!-- ==== DOWNLOAD SCREEN ==================================================================================== -->
737    <section id="DownloadDiv" style="display: none">
738
739        <div class="text_Low" style="text-align: center; height: 30px">
740            <span class="DlScreen_WizardHeaderStepsNumber" id="DlScreen_WizardHeaderStepsNumber1">1</span>
741            <span class="DlScreen_WizardHeaderStepsText" id="DlScreen_WizardHeaderStepsText1">Name</span>
742            <span class="DlScreen_WizardHeaderStepsSeparator" id="DlScreen_WizardHeaderStepsSeparatorA"></span>
743            <span class="DlScreen_WizardHeaderStepsNumber" id="DlScreen_WizardHeaderStepsNumber2">2</span>
744            <span class="DlScreen_WizardHeaderStepsText" id="DlScreen_WizardHeaderStepsText2">Export</span>
745            <span class="DlScreen_WizardHeaderStepsSeparator" id="DlScreen_WizardHeaderStepsSeparatorB"></span>
746            <span class="DlScreen_WizardHeaderStepsNumber" id="DlScreen_WizardHeaderStepsNumber3">3</span>
747            <span class="DlScreen_WizardHeaderStepsText" id="DlScreen_WizardHeaderStepsText3">Finish</span>
748        </div>
749
750        <div id="dlScreen_Loading" style="height: 300px; text-align: center">
751            <br><br><br><br>
752            <h2 id="dlScreen_LoadingScreenText">Please wait...</h2>
753        </div>
754
755        <div id="dlScreen_CreateNewFilter" style="display: none">
756            <!-- limited width because we use the same HTML for the "Config" popUp on saveLoad list UI -->
757            <div id="dlScreen_FilterEditingUiContainer"></div>
758        </div>
759
760        <div id="dlScreen_SelectExportMethod" style="display: none">
761
762            <div style="text-align: center">
763
764                <div class="exportBigButtonContainer" style="display: flex; justify-content: space-evenly;">
765                    <!-- SYNC AND AUTO-UPDATE -->
766                    <div class="dlScreen_exportOptionOuterContainer" style="display: inline-block">
767                        <div id="dlScreen_SyncAndAutoLoginOverlay" style="position: relative; top: -2rem;"></div>
768
769                        <div class="dlScreen_exportMethodTile">
770                            <div id="dlScreen_SyncAndAutoContent" class="dlScreen_exportButton button" style="">
771                                <img src="assets/img/FeatureIcons/sync.png" class="dlScreen_exportIcon" alt="Sync regularly icon">
772                                <label class="text_High dlScreen_exportMethodMainLabel" id="dlScreen_exportMethod_syncAndAutoLabel">Sync Auto (overwritten by code!)</label>
773                                <span class="dlScreen_exportBonusText" style="    font-size: 1.5rem;    margin: 1rem 0 1rem 0;    display: block;">Premium feature</span>
774                                <ul class="DlScreen_ExportBtnArguments">
775                                    <li>continuous automated updates & fixes</li>
776                                    <li>economy updates for tierlists of uniques, currency, etc.</li>
777                                    <li>support a small development team :)</li>
778                                </ul>
779                            </div>
780
781                            <br>
782                            <div id="dlScreen_SyncAndAutoTarget"></div>
783                        </div>
784                    </div>
785
786                    <!-- SYNC -->
787                    <div class="dlScreen_exportOptionOuterContainer" style="display: inline-block">
788                        <div id="dlScreen_SyncLoginOverlay" style="position: relative; top: -2rem;"></div>
789
790                        <div class="dlScreen_exportMethodTile">
791                            <div id="dlScreen_SyncContent" class="dlScreen_exportButton button">
792                                <img src="assets/img/FeatureIcons/Upload.png" class="dlScreen_exportIcon" alt="Sync icon">
793                                <label class=" text_High dlScreen_exportMethodMainLabel" id="dlScreen_exportMethod_syncLabel" style="font-size: 1.5rem; height: 3.75rem;">Sync (overwritten by code!)</label>
794                                <span class="dlScreen_exportBonusText" style="    font-size: 1.5rem;    margin: 1rem 0 1rem 0;    display: block;">Recommended</span>
795                                <ul class="DlScreen_ExportBtnArguments">
796                                    <li>one-time upload to your PoE account</li>
797                                    <li>no manual import required</li>
798                                    <li>instantly available inGame</li>
799                                </ul>
800                            </div>
801
802                            <br>
803                            <div id="dlScreen_SyncTarget"></div>
804                        </div>
805                    </div>
806
807                    <!-- DOWNLOAD -->
808                    <div style="display: inline-block" class="dlScreen_exportOptionOuterContainer">
809                        <div class="dlScreen_exportMethodTile">
810                            <div id="DownloadButton" class="dlScreen_exportButton button">
811                                <img src="assets/img/FeatureIcons/download.png" class="dlScreen_exportIcon" alt="Download icon">
812                                <label class="text_High dlScreen_exportMethodMainLabel" id="dlScreen_exportMethod_DownloadLabel" style="    font-size: 1.5rem;   height: 3.75rem;">Download (overwritten by code!)</label>
813                                <span class="dlScreen_exportBonusText" style="    font-size: 1.5rem;    margin: 1rem 0 1rem 0;    display: block; visibility: hidden">.</span>
814                                <ul class="DlScreen_ExportBtnArguments">
815                                    <li>manual file download</li>
816                                    <li>no console support</li>
817                                    <li>import to PoE via game files on your PC</li>
818                                </ul>
819                            </div>
820
821                            <br>
822                            <button id="DownloadAllStrictnessesBtn" style="padding: 4px">Get all strictnesses</button>
823                            <select id="DownloadAllStrictnessesMethod" style="width: 5rem;">
824                                <option value="zip">as ZIP</option>
825                                <option value="single">Individual files</option>
826                            </select>
827                        </div>
828                    </div>
829                </div>
830
831                <div style="height: 2rem"></div>
832
833                <div id="dlScreen_belowExportButtons"></div>
834            </div>
835        </div>
836
837        <div id="dlScreen_AfterExport" style="display: none">
838            <div id="dlScreen_InstallationInstructions"></div>
839
840            <label class="BroadTitle">SUPPORT US</label>
841
842            <!-- donation buttons -->
843            <div class="CustomizeGroupBox text_Low">
844                <div class="" style="display: inline-block; text-align: center; width: 100%; margin: 0;">
845                    <label style="display: inline-block;vertical-align: middle;">Support the FilterBlade Dev-Team,</label><br>
846                    <label><i>NeverSink, Zoey & Haggis:</i></label><br>
847
848                    <span id="paypalDonationContainer"></span>
849                </div>
850
851                <div class="" style="display: inline-block; text-align: center; width: 100%; margin: 0;">
852                    <label style="display: inline-block;vertical-align: middle;">Support us and get something in return,</label><br>
853                    <label><i>Premium Auto-Update feature:</i></label><br>
854
855                    <a href="https://www.patreon.com/user/overview?u=8230879" target="_blank" style="text-decoration: none;">
856                        <img style="height: 29px; margin-top: 4px; display: inline-block; vertical-align: middle;" src="assets/img/Icons/PatreonIcon.png" alt="Patreon">
857                    </a>
858                    <a href="https://www.patreon.com/user/overview?u=8230879" target="_blank" style="vertical-align: middle">Patreon</a>
859                </div>
860            </div>
861
862            <!-- about us -->
863            <div class="AboutUsContainer text_Low">
864                <label class="BroadTitle">About us</label>
865                <div class="DevCard CustomizeGroupBox ">
866                    <div class="ImageDiv Icon_NS"></div>
867                    <div class="DevCard_Text">
868                        <label class="DevCard_Name"><b>NeverSink</b> - <i>Project Manager, Lead Developer. <br>Project Focus:
869                            Architecture, Domain Languages, Data Processing</i></label><br>
870                        &bull; <a class="DevCard_Link" href="https://twitter.com/neversinkdev" target="_blank">Twitter</a>
871                        &bull; <a class="DevCard_Link" href="https://www.youtube.com/user/TheY0UR" target="_blank">YouTube</a>
872                        &bull; <a class="DevCard_Link" href="https://www.twitch.tv/neversink" target="_blank">Twitch</a>
873                        &bull; <a class="DevCard_Link" href="https://github.com/NeverSinkDev" target="_blank">GitHub</a>
874                    </div>
875                </div>
876
877                <div class="DevCard CustomizeGroupBox ">
878                    <div class="ImageDiv Icon_Zoey"></div>
879                    <div class="DevCard_Text">
880                        <label class="DevCard_Name"><b>Zoey</b> - <i>Developer, Designer, Content Creator. <br>Project Focus:
881                            Customization, Layout and UI, General Development.</i></label><br>
882                        &bull; <a class="DevCard_Link" href="https://discord.gg/zFEx92a" target="_blank">Discord</a>
883                        &bull; <a class="DevCard_Link" href="https://www.twitch.tv/ZoeyFloat" target="_blank">Twitch</a>
884                    </div>
885                </div>
886
887                <div class="DevCard CustomizeGroupBox ">
888                    <div class="ImageDiv Icon_Eleni"></div>
889                    <div class="DevCard_Text">
890                        <label class="DevCard_Name"><b>Eleni (MochiMM)</b> - <i>Graphic Designer. <br>Project Focus:
891                            Icons, Backgrounds, Videos.</i></label><br>
892                        &bull; <a class="DevCard_Link" href="https://x.com/MochiMiniMayhem" target="_blank">Twitter</a>
893                    </div>
894                </div>
895
896                <div class="DevCard CustomizeGroupBox ">
897                    <div class="ImageDiv Icon_Haggis"></div>
898                    <div class="DevCard_Text">
899                        <label class="DevCard_Name"><b>Haggis</b> - <i>Developer, data analyst, php dev <br>Project Focus: Loot
900                            generation, layout and UI, save/load functions.</i></label><br>
901                    </div>
902                </div>
903            </div>
904        </div>
905
906        <!-- notification / verification / warning placeholder -->
907        <div id="Notification_FilterVerify"></div>
908    </section>
909
910</main>
911
912<section class="myBody border" id="homeWelcomeIntroContainer" style="display: none">
913    <h1 class="BroadTitle BroadTitle_NoTopSpace">Welcome to FilterBlade!</h1>
914    <div class="homeInfoBoxSection">
915
916        <div class="homeIntroExplainBox mobileOnly" style="border: 1px solid white">
917            <h3>Our new design!</h3>
918            <span>FilterBlade now supports mobile devices! You can open the navigation using the button at the very top left to access the different pages.</span>
919        </div>
920
921        <div class="homeIntroExplainBox">
922            <h3>Intro</h3>
923            <span>FilterBlade is an online editor for loot-filters for the games <a onclick="displayModalBox_HtmlElement(getGameTypeSelectionDisplaySelection())">Path of Exile 1 and 2</a> based on NeverSink's filters.</span>
924        </div>
925
926        <div class="homeIntroExplainBox">
927            <h3>What is a loot-filter?</h3>
928            <span>
929                It turns <span style="text-decoration: underline" class="TTTrigger">this</span><div>By default, most items look the same, no matter how rare or useful or valuable.</div>:<br>
930                <div style="text-align: center"><img alt="A valuable item without filter" src="assets/img/FeatureIcons/divNoFFocus.jpg"><br></div>
931                Into <span style="text-decoration: underline" class="TTTrigger">this</span><div>A filter highlights items based on type and value (based on current inGame economy), and hides bad ones.<br><br>You can customize them to fit to your character and style!<br><br>They are officially supported tools for Path of Exile!</div>:<br>
932                <div style="text-align: center"><img alt="A valuable item with filter" src="assets/img/FeatureIcons/divLfSuper.jpg"></div>
933            </span>
934        </div>
935
936        <div class="homeIntroExplainBox">
937            <h3>How to use?</h3>
938            <span>The base NeverSink filter is already solid. You can do a quick setup using the options above to adapt it to your <a onclick="PreConfigWizard.openModeSelection()">build</a>, <a onclick="StartScreen.displayBaseFilterStyleSelectionPopUp()">style</a> and <a onclick="StartScreen.initFilterSelection_StrictnessLevels(displayModalBox_ReturnContainer())">progress</a> in the game. If you want, you can further fine-tune it using the <a onclick="gFilterBlade.screenSelector.selectDiv('customize')">Customize</a> tab.</span>
939        </div>
940
941        <div class="homeIntroExplainBox">
942            <h3>Not sure where to start?</h3>
943            <span>Open the <a onclick="PreConfigWizard.openModeSelection()">'Auto-Adjust for Build'</a> and select your inGame character class, then apply and <a onclick="gFilterBlade.screenSelector.selectDiv('download')">export</a> the filter. That's it! <span style="text-decoration: underline" class="TTTrigger">For now...</span><div>You can come back later to fine-tune when you notice things that you'd like to change!</div></span>
944        </div>
945
946    </div>
947    <h1 class="BroadTitle " style="    margin-top: 1rem;">Workflow</h1>
948    <div class="homeInfoBoxSection">
949
950        <div class="homeIntroExplainBox">
951            <h3>Download / Export</h3>
952            <span>You're done? Head to the <a onclick="gFilterBlade.screenSelector.selectDiv('download')">export screen</a> to save the filter to your FilterBlade account and either download a filter-file or upload it directly into your PoE account.</span>
953        </div>
954
955        <div class="homeIntroExplainBox">
956            <h3>Resume later</h3>
957            <span>Login with your PoE account to save your filter during <a onclick="gFilterBlade.screenSelector.selectDiv('download')">export</a>.<br>When you return to FilterBlade, you will see all your saved filters on the <a onclick="gFilterBlade.screenSelector.selectDiv('saveLoad')">'My Filters'</a> screen to continue editing!</span>
958        </div>
959
960        <div class="homeIntroExplainBox">
961            <h3>How to update?</h3>
962            <span>FilterBlade will ALWAYS give you the newest up-to-date filter. You can customize a filter now and load it again later and automatically get an updated version when you export!</span>
963        </div>
964
965        <div class="homeIntroExplainBox">
966            <h3>Customize</h3>
967            <span>Edit every part of the filter: Colors, tierlists, sounds in a sorted structure. Every edit done is automatically saved and instantly reflected in all other parts of the website: <a onclick="gFilterBlade.screenSelector.selectDiv('customize')">Customize</a></span>
968        </div>
969
970    </div>
971    <h1 class="BroadTitle BroadTitle" style="    margin-top: 1rem;">Useful features</h1>
972    <div class="homeInfoBoxSection">
973
974        <div class="homeIntroExplainBox">
975            <h3>Did I break it?</h3>
976            <span>The Customizer is built fail-save and it's hard to 'break' your filter by using it. You will see warnings if you're about to do something dangerous. There is also additional validation when exporting.</span>
977        </div>
978
979        <div class="homeIntroExplainBox">
980            <h3>Utilities!</h3>
981            <span>You can right-click e.g. an item to jump to its rule in the Customizer or a tierlist element to move it! (Long press on mobile)</span>
982        </div>
983
984        <div class="homeIntroExplainBox">
985            <h3>Learn and see</h3>
986            <span>The <a onclick="gFilterBlade.screenSelector.selectDiv('overview')">Overview</a> tab shows typical items with their current visuals and explanations of why they are special. Good to get an overview of the current filter and learn about its colors and highlights.</span>
987        </div>
988
989        <div class="homeIntroExplainBox">
990            <h3>Test & Simulate</h3>
991            <span>Want to test your filter? Verify your results? Find out why an item inGame is highlighted? Check out our tools on the <a onclick="gFilterBlade.screenSelector.selectDiv('simulate')">Simulate</a> screen.</span>
992        </div>
993
994        <div class="homeIntroExplainBox">
995            <h3>Do a redesign!</h3>
996            <span>Planning a big rework of colors, sizes and sounds? The <a onclick="gFilterBlade.screenSelector.selectDiv('style')">'Themes'</a> tab has a lot of tool for large-scale edits like that!</span>
997        </div>
998
999        <div class="homeIntroExplainBox">
1000            <h3>Need help?</h3>
1001            <span>Use the search bar at the top, check our <a target="_blank" href="/FAQ">FAQ</a>, or ask in our <a target="_blank" href="https://discord.gg/zFEx92a">Discord</a>!</span>
1002        </div>
1003
1004    </div>
1005</section>
1006
1007<!-- footer ad -->
1008<div id="footerAdContainer">
1009    <div id="footerBox" class="border">
1010        <!-- will be generated from code by "initGoogleAdsense_FooterAd()" -->
1011    </div>
1012</div>
1013
1014<div id="hiddenContainer" style="display: none"></div>
1015
1016<!-- footer -->
1017
1018<footer class="footer text_Low footerText">
1019    <div class="footerContainer">
1020        <div class="footerInnerContent">
1021            <label>Business mail: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="67210e0b130215250b0603022408091306041327000a060e0b4904080a">[email&#160;protected]</a></label>
1022            <span class="vHr vHrGroupSpacer"></span>
1023            <span>
1024                <a class="footerLink" href="/Contact">Contact</a>
1025                <span class="vHr"></span>
1026                <a class="footerLink" href="/Contact">Privacy Policy</a>
1027                <span class="vHr"></span>
1028                <a class="footerLink" href="https://www.alwaysfloat-technologies.com/" target="_blank">AlwaysFloat Technologies</a>
1029            </span>
1030            <span class="vHr vHrGroupSpacer"></span>
1031            <label>Version 1.1.6525, September 16th</label>
1032        </div>
1033        <br>
1034        <label>This site is fan-made and not affiliated with Grinding Gear Games in any way.</label>
1035
1036        <span id="footerBonusBox">
1037            <!-- placeholder for NitroPay california optOut link -->
1038        </span>
1039
1040        <span>
1041            <span id="ap_Container"><!-- will be inserted by initGoogleAdsense_Init() --></span>
1042
1043            <!-- this element will be turned into a cookie consent button for EU users by the NitroPay init script -->
1044            <span id="ncmp-consent-link"></span>
1045        </span>
1046    </div>
1047</footer>
vendor: 112 bytes, lines 1047-1049
1047
1048
1049<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
1049</body>
1050</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.