Voiddp/Filters code
From Another Eden Wiki
Weapon Filters
<div style="text-align:center;"><div class="equip-filters" style="display:inline-flex;flex-wrap:wrap;justify-content:center">
<div id="equip-search-container" style="margin:1em; display:inline-block;">
<input type="text" style="min-width:200px;" id="equip-text" placeholder="Search for Weapon">
</div>
<div class="mw-ui-button-group filter-group-weapon" style="margin:1em">
<label class="mw-ui-button" title="Staff" style="padding:5px 10px" data-key="weapon" data-value="staff"><img src="https://static.miraheze.org/anotheredenwiki/1/11/202000000_icon.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Sword" style="padding:5px 10px" data-key="weapon" data-value="sword"><img src="https://static.miraheze.org/anotheredenwiki/7/7f/202000001_icon.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Katana" style="padding:5px 10px" data-key="weapon" data-value="katana"><img src="https://static.miraheze.org/anotheredenwiki/5/58/202000002_icon.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Ax" style="padding:5px 10px" data-key="weapon" data-value="ax"><img src="https://static.miraheze.org/anotheredenwiki/5/5e/202000003_icon.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Lance" style="padding:5px 10px" data-key="weapon" data-value="lance"><img src="https://static.miraheze.org/anotheredenwiki/c/c0/202000004_icon.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Bow" style="padding:5px 10px" data-key="weapon" data-value="bow"><img src="https://static.miraheze.org/anotheredenwiki/7/76/202000005_icon.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Fists" style="padding:5px 10px" data-key="weapon" data-value="fists"><img src="https://static.miraheze.org/anotheredenwiki/d/dc/202000006_icon.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Hammer" style="padding:5px 10px" data-key="weapon" data-value="hammer"><img src="https://static.miraheze.org/anotheredenwiki/c/c9/202000007_icon.png" style="height:28px;pointer-events:none;"></label>
</div>
Armor Filter
<div style="text-align:center;"><div class="armor-filters" style="display:inline-flex;flex-wrap:wrap;justify-content:center">
<div id="armor-search-container" style="margin:1em; display:inline-block;">
<input type="text" style="min-width:200px;" id="armor-text" placeholder="Search for Armor">
</div>
<div class="mw-ui-button-group filter-group-accessory" style="margin:1em">
<label class="mw-ui-button" title="Bangle" style="padding:5px 10px" data-key="accessory" data-value="bangle"><img src="https://static.miraheze.org/anotheredenwiki/0/07/216000002_icon.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Necklace" style="padding:5px 10px" data-key="accessory" data-value="necklace"><img src="https://static.miraheze.org/anotheredenwiki/a/a8/216000003_icon.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Ring" style="padding:5px 10px" data-key="accessory" data-value="ring"><img src="https://static.miraheze.org/anotheredenwiki/d/df/216000004_icon.png" style="height:28px;pointer-events:none;"></label>
</div>
</div></div>
Character Filter
<div style="display:flex;justify-content:center;align-items:center;flex-direction:column"><!--
--><div class="character-filters" style="display:inline-flex;flex-wrap:wrap;justify-content:center">
<div id="chara-search-container" style="display:inline-block; align-self:center; margin: 0.3rem; ">
<input type="text" style="min-width:200px;" id="chara-text" placeholder="Search for Character">
</div>
<div class="mw-ui-button-group filter-group-free" style="margin: 0.3rem;">
<label class="mw-ui-button" title="Free" style="padding:10px; align-self:stretch; color:#555" data-key="free" data-value="free">Free</label>
</div>
<div class="mw-ui-button-group filter-group-role" style="margin: 0.3rem;">
<label class="mw-ui-button" title="Healer" style="padding:10px; align-self:stretch; color:#555" data-key="role" data-value="healer">Healer</label>
<label class="mw-ui-button" title="Regen" style="padding:10px; align-self:stretch; color:#555" data-key="role" data-value="regen"><img src="https://static.miraheze.org/anotheredenwiki/b/b2/Regen.png" style="height:20px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Recover MP" style="padding:10px; align-self:stretch; color:#555" data-key="role" data-value="teammprecover"><img src="https://static.miraheze.org/anotheredenwiki/7/78/RecoverMP.png" style="height:20px;pointer-events:none;"></label>
<label class="mw-ui-button" title="MP Costs down" style="padding:10px; align-self:stretch; color:#555" data-key="role" data-value="TeamMpUseDown"><img src="https://static.miraheze.org/anotheredenwiki/f/f2/MP_cost_down.png" style="height:20px;pointer-events:none;"></label>
</div>
<div class="mw-ui-button-group filter-group-rarity" style="margin: 0.3rem;">
<label class="mw-ui-button" title="3" style="padding:10px; align-self:stretch; color:#555" data-key="rarity" data-value="3">3★</label>
<label class="mw-ui-button" title="4" style="padding:10px; align-self:stretch; color:#555" data-key="rarity" data-value="4">4★</label>
<label class="mw-ui-button" title="5" style="padding:10px; align-self:stretch; color:#555" data-key="rarity" data-value="5">5★</label>
<label class="mw-ui-button" title="AS" style="padding:10px; align-self:stretch; color:#555" data-key="rarity" data-value="AS">AS(5★)</label>
</div>
<div class="mw-ui-button-group filter-group-weapon" style="margin: 0.3rem;">
<label class="mw-ui-button" title="Staff" style="padding:5px 7px" data-key="weapon" data-value="staff"><img src="https://static.miraheze.org/anotheredenwiki/1/11/202000000_icon.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Sword" style="padding:5px 7px" data-key="weapon" data-value="sword"><img src="https://static.miraheze.org/anotheredenwiki/7/7f/202000001_icon.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Katana" style="padding:5px 7px" data-key="weapon" data-value="katana"><img src="https://static.miraheze.org/anotheredenwiki/5/58/202000002_icon.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Ax" style="padding:5px 7px" data-key="weapon" data-value="ax"><img src="https://static.miraheze.org/anotheredenwiki/5/5e/202000003_icon.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Lance" style="padding:5px 7px" data-key="weapon" data-value="lance"><img src="https://static.miraheze.org/anotheredenwiki/c/c0/202000004_icon.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Bow" style="padding:5px 7px" data-key="weapon" data-value="bow"><img src="https://static.miraheze.org/anotheredenwiki/7/76/202000005_icon.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Fists" style="padding:5px 7px" data-key="weapon" data-value="fists"><img src="https://static.miraheze.org/anotheredenwiki/d/dc/202000006_icon.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Hammer" style="padding:5px 7px" data-key="weapon" data-value="hammer"><img src="https://static.miraheze.org/anotheredenwiki/c/c9/202000007_icon.png" style="height:28px;pointer-events:none;"></label>
</div><!--
temp switch off - seems not very usefull filter
<div class="mw-ui-button-group filter-group-accessory" style="margin: 0.3rem;">
<label class="mw-ui-button" title="Bangle" style="padding:5px 7px" data-key="accessory" data-value="bangle"><img src="https://static.miraheze.org/anotheredenwiki/0/07/216000002_icon.png" style="height:28px;pointer-events:none;"/></label>
<label class="mw-ui-button" title="Necklace" style="padding:5px 7px" data-key="accessory" data-value="necklace"><img src="https://static.miraheze.org/anotheredenwiki/a/a8/216000003_icon.png" style="height:28px;pointer-events:none;"/></label>
<label class="mw-ui-button" title="Ring" style="padding:5px 7px" data-key="accessory" data-value="ring"><img src="https://static.miraheze.org/anotheredenwiki/d/df/216000004_icon.png" style="height:28px;pointer-events:none;"/></label>
</div>
-->
<div class="mw-ui-button-group filter-group-type" style="margin: 0.3rem;">
<label class="mw-ui-button" title="Light" style="padding:7px; color:#555" data-key="type" data-value="light"><img src="https://static.miraheze.org/anotheredenwiki/8/82/Guiding_Light_Icon.png" style="height:20px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Shadow" style="padding:7px; color:#555" data-key="type" data-value="shadow"><img src="https://static.miraheze.org/anotheredenwiki/0/0e/Luring_Shadow_Icon.png" style="height:20px;pointer-events:none;"></label>
</div>
<div class="mw-ui-button-group filter-group-crit" style="margin: 0.3rem;">
<label class="mw-ui-button" title="Team Crit Rate" style="padding:7px; color:#555" data-key="crit" data-value="teamcritrate"><img src="https://static.miraheze.org/anotheredenwiki/9/94/CritRate.png" style="height:20px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Team Crit Damage" style="padding:7px; color:#555" data-key="crit" data-value="teamcritdmg"><img src="https://static.miraheze.org/anotheredenwiki/4/4b/CritDamage.png" style="height:20px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Team Magic Crit Rate" style="padding:7px; color:#555" data-key="crit" data-value="teammagcritrate"><img src="https://static.miraheze.org/anotheredenwiki/c/cf/MagicCritRate.png" style="height:20px;pointer-events:none;"></label>
</div>
<div class="mw-ui-button-group filter-group-poison" style="margin: 0.3rem;">
<label class="mw-ui-button" title="Inflict Poison" style="padding:7px; color:#555" data-key="poison" data-value="inflictpoison"><img src="https://static.miraheze.org/anotheredenwiki/0/05/Poison.png" style="height:20px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Inflict Poison Ignore Res" style="padding:7px; color:#555;" data-key="poison" data-value="inflictpoisonignore"><img src="https://static.miraheze.org/anotheredenwiki/4/48/Poison_ignore.png" style="height:20px;pointer-events:none;"></label>
</div>
<div class="mw-ui-button-group filter-group-pain" style="margin: 0.3rem;">
<label class="mw-ui-button" title="Inflict Pain" style="padding:7px; color:#555" data-key="pain" data-value="inflictpain"><img src="https://static.miraheze.org/anotheredenwiki/5/54/Pain.png" style="height:20px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Inflict Pain Ignore Res" style="padding:7px; color:#555;" data-key="pain" data-value="inflictpainignore"><img src="https://static.miraheze.org/anotheredenwiki/8/83/Pain_ignore.png" style="height:20px;pointer-events:none;"></label>
</div>
<div class="mw-ui-button-group filter-group-rage" style="margin: 0.3rem;">
<label class="mw-ui-button" title="Inflict Rage" style="padding:7px; color:#555" data-key="rage" data-value="inflictrage"><img src="https://static.miraheze.org/anotheredenwiki/2/27/Rage.png" style="height:20px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Inflict Rage Ignore Res" style="padding:7px; color:#555;" data-key="rage" data-value="inflictrageignore"><img src="https://static.miraheze.org/anotheredenwiki/9/94/Rage_ignore.png" style="height:20px;pointer-events:none;"></label>
</div><!--
BUFFs GROUP buttons
--><div class="mw-ui-button-group filter-group-buff" style="margin: 0.3rem;">
<label class="mw-ui-button" title="Elemental/Null Damage Buff" style="padding:7px; color:#555" data-key="buff" data-value="elenulldmgbuff"><img src="https://static.miraheze.org/anotheredenwiki/1/10/Damage_Buff.png" style="height:20px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Elemental/All Resistance Buff" style="padding:7px; color:#555" data-key="buff" data-value="eleallresbuff"><img src="https://static.miraheze.org/anotheredenwiki/2/2a/Resistance_Buff.png" style="height:20px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Physical Resistance Buff" style="padding:7px; color:#555" data-key="buff" data-value="pdefbuff"><img src="https://static.miraheze.org/anotheredenwiki/6/6a/PDef_Buff.png" style="height:20px;pointer-events:none;"></label>
</div><!--
DEBUFF GROUP buttons
--><div class="mw-ui-button-group filter-group-debuff" style="margin: 0.3rem;">
<label class="mw-ui-button" title="Elemental/All Resistance Debuff" style="padding:7px; color:#555" data-key="debuff" data-value="eleallresdebuff"><img src="https://static.miraheze.org/anotheredenwiki/3/38/Resistance_Debuff.png" style="height:20px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Physical Resistance Debuff" style="padding:7px; color:#555" data-key="debuff" data-value="pdefdebuff"><img src="https://static.miraheze.org/anotheredenwiki/7/7a/PDef_Debuff.png" style="height:20px;pointer-events:none;"></label>
</div><!--
-->
<div class="mw-ui-button-group filter-group-element" style="margin: 0.3rem;">
<label class="mw-ui-button" title="None" style="padding:5px 7px" data-key="element" data-value="none"><img src="https://static.miraheze.org/anotheredenwiki/4/4f/Skill_Type_8_0.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Fire" style="padding:5px 7px" data-key="element" data-value="fire"><img src="https://static.miraheze.org/anotheredenwiki/0/0f/Skill_Type_8_1.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Earth" style="padding:5px 7px" data-key="element" data-value="earth"><img src="https://static.miraheze.org/anotheredenwiki/f/f6/Skill_Type_8_2.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Wind" style="padding:5px 7px" data-key="element" data-value="wind"><img src="https://static.miraheze.org/anotheredenwiki/5/5c/Skill_Type_8_4.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Water" style="padding:5px 7px" data-key="element" data-value="water"><img src="https://static.miraheze.org/anotheredenwiki/5/51/Skill_Type_8_8.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Thunder" style="padding:5px 7px" data-key="element" data-value="thunder"><img src="https://static.miraheze.org/anotheredenwiki/1/15/Skill_Type_8_16.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Shade" style="padding:5px 7px" data-key="element" data-value="shade"><img src="https://static.miraheze.org/anotheredenwiki/4/48/Skill_Type_8_32.png" style="height:28px;pointer-events:none;"></label>
<label class="mw-ui-button" title="Crystal" style="padding:5px 7px" data-key="element" data-value="crystal"><img src="https://static.miraheze.org/anotheredenwiki/6/61/Skill_Type_8_64.png" style="height:28px;pointer-events:none;"></label>
</div><!--
<div class="mw-ui-button-group filter-group-statboost" style="margin:1em">
<label class="mw-ui-button" title="Light" style="padding:5px 7px" data-key="statboost" data-value="light"><img src="https://static.miraheze.org/anotheredenwiki/8/82/Guiding_Light_Icon.png" style="height:28px;pointer-events:none;"/></label>
<label class="mw-ui-button" title="Shadow" style="padding:5px 7px" data-key="statboost" data-value="shadow"><img src="https://static.miraheze.org/anotheredenwiki/0/0e/Luring_Shadow_Icon.png" style="height:28px;pointer-events:none;"/></label>
</div>
<div class="mw-ui-button-group filter-group-personality" style="margin:3px 1px">
<label class="mw-ui-button" title="IDA School" style="padding:5px 7px" data-key="personality" data-value="ida school">IDA School</label>
<label class="mw-ui-button" title="Eastern" style="padding:5px 7px" data-key="personality" data-value="eastern">Eastern</label>
<label class="mw-ui-button" title="Miner" style="padding:5px 7px" data-key="personality" data-value="miner">Miner</label>
<label class="mw-ui-button" title="Forager" style="padding:5px 7px" data-key="personality" data-value="forager">Forager</label>
<label class="mw-ui-button" title="Cat lover" style="padding:5px 7px" data-key="personality" data-value="cat lover">Cat lover</label>
<label class="mw-ui-button" title="Miglance Palace" style="padding:5px 7px" data-key="personality" data-value="miglance palace">Miglance Palace</label>
<label class="mw-ui-button" title="Sweet tooth" style="padding:5px 7px" data-key="personality" data-value="sweet tooth">Sweet tooth</label>
<label class="mw-ui-button" title="Glasses" style="padding:5px 7px" data-key="personality" data-value="glasses">Glasses</label>
<label class="mw-ui-button" title="Mask" style="padding:5px 7px" data-key="personality" data-value="mask">Mask</label>
<label class="mw-ui-button" title="Clergy" style="padding:5px 7px" data-key="personality" data-value="clergy">Clergy</label>
<label class="mw-ui-button" title="Elf" style="padding:5px 7px" data-key="personality" data-value="elf">Elf</label>
<label class="mw-ui-button" title="Blacksmith" style="padding:5px 7px" data-key="personality" data-value="blacksmith">Blacksmith</label>
<label class="mw-ui-button" title="Guiding Light" style="padding:5px 7px" data-key="personality" data-value="guiding light">Guiding Light</label>
<label class="mw-ui-button" title="Protagonist" style="padding:5px 7px" data-key="personality" data-value="protagonist">Protagonist</label>
<label class="mw-ui-button" title="Minstrel" style="padding:5px 7px" data-key="personality" data-value="minstrel">Minstrel</label>
</div>
--></div></div>
