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 • <a class="DevCard_Link" href="https://twitter.com/neversinkdev" target="_blank">Twitter</a> 871 • <a class="DevCard_Link" href="https://www.youtube.com/user/TheY0UR" target="_blank">YouTube</a> 872 • <a class="DevCard_Link" href="https://www.twitch.tv/neversink" target="_blank">Twitch</a> 873 • <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 • <a class="DevCard_Link" href="https://discord.gg/zFEx92a" target="_blank">Discord</a> 883 • <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 • <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 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.