Gear Hides Test

<a href="https://ohwikiguide.com">Return to Front Page</a>

<style> .mw-tab-buttons {

 display: flex;
 gap: 6px;
 margin-bottom: 10px;

}

.mw-tab-btn {

 flex: 1;
 text-align: center;
 padding: 8px 0;
 background: #11161c;
 border: 1px solid #1f2a35;
 border-radius: 6px;
 color: #cfd6df;
 cursor: pointer;
 font-weight: 600;

}

.mw-tab-btn.active {

 background: #1ec8ff;
 color: #001018;

}

.mw-tab-content { display: none; } .mw-tab-content.active { display: block; }

.mw-ui-select {

 width: 100%;
 padding: 10px;
 background: #11161c;
 color: #e6edf3;
 border: 1px solid #1f2a35;
 border-radius: 6px;

}

.mw-ui-output {

 margin-top: 10px;
 background: #0d1319;
 border: 1px solid #1f2a35;
 border-radius: 10px;
 padding: 12px;

}

.mw-ui-title {

 font-weight: 700;
 margin-bottom: 8px;

}

.mw-ui-line {

 padding: 6px 0;
 border-top: 1px solid #1a222b;

} .mw-ui-line:first-child { border-top: none; } </style>

Helmet

Top

Bottoms

Gloves

Boots

Mask

 <select id="helmetSelect" class="mw-ui-select">
   <option value="">Select Helmet</option>
   <option value="bear">Bear Skin</option>
   <option value="cowhide">Cowhide</option>
   <option value="hide">Hide</option>
 </select>

Top content

Bottoms content

Gloves content

Boots content

Mask content

<script> document.querySelectorAll('.mw-tab-btn').forEach(btn => {

 btn.onclick = () => {
   document.querySelectorAll('.mw-tab-btn').forEach(b => b.classList.remove('active'));
   document.querySelectorAll('.mw-tab-content').forEach(c => c.classList.remove('active'));
   btn.classList.add('active');
   document.getElementById(btn.dataset.tab).classList.add('active');
 };

});

const helmetData = {

 bear: ["Fullness DMG Reduction", "DMG Reduction +3% when Energy is at 100"],
 cowhide: ["Crit DMG Reduction +7%"],
 hide: ["Max HP +100"]

};

document.getElementById("helmetSelect").onchange = function () {

 const val = this.value;
 const output = document.getElementById("helmetOutput");

 if (!val) {
   output.style.display = "none";
   return;
 }

 const lines = helmetData[val];

 output.innerHTML =

`

${this.options[this.selectedIndex].text}

` + lines.map(l => `

${l}

`).join("");

 output.style.display = "block";

}; </script>