Jump to content

Gear Hides Test: Difference between revisions

From Once Human Guide
← Older editNewer edit →
Bones (talk | contribs)
Bureaucrats, Interface administrators, Administrators
1,328 edits
No edit summary
No edit summary
Line 60: Line 60:
</style>
</style>


<!-- TABS -->
<div class="mw-tab-buttons">
<div class="mw-tab-buttons">
   <div class="mw-tab-btn active" data-tab="helmet">Helmet</div>
   <div class="mw-tab-btn active" data-tab="helmet">Helmet</div>
Line 69: Line 70:
</div>
</div>


<!-- HELMET -->
<div id="helmet" class="mw-tab-content active">
<div id="helmet" class="mw-tab-content active">
   <select id="helmetSelect" class="mw-ui-select">
   <select id="helmetSelect" class="mw-ui-select">
     <option value="">Select Helmet</option>
     <option value="">Select Helmet</option>
    <option value="bear">Bear Skin</option>
    <option value="cowhide">Cowhide</option>
    <option value="hide">Hide</option>
   </select>
   </select>
   <div id="helmetOutput" class="mw-ui-output" style="display:none;"></div>
   <div id="helmetOutput" class="mw-ui-output" style="display:none;"></div>
</div>
</div>


<div id="top" class="mw-tab-content">Top content</div>
<!-- OTHER TABS (EMPTY FOR NOW) -->
<div id="bottoms" class="mw-tab-content">Bottoms content</div>
<div id="top" class="mw-tab-content"></div>
<div id="gloves" class="mw-tab-content">Gloves content</div>
<div id="bottoms" class="mw-tab-content"></div>
<div id="boots" class="mw-tab-content">Boots content</div>
<div id="gloves" class="mw-tab-content"></div>
<div id="mask" class="mw-tab-content">Mask content</div>
<div id="boots" class="mw-tab-content"></div>
<div id="mask" class="mw-tab-content"></div>


</div>
</div>


<script>
<script>
/* TAB SYSTEM */
document.querySelectorAll('.mw-tab-btn').forEach(btn => {
document.querySelectorAll('.mw-tab-btn').forEach(btn => {
   btn.onclick = () => {
   btn.onclick = () => {
Line 96: Line 98:
   };
   };
});
});
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 =
    `<div class="mw-ui-title">${this.options[this.selectedIndex].text}</div>` +
    lines.map(l => `<div class="mw-ui-line">${l}</div>`).join("");
  output.style.display = "block";
};
</script>
</script>

Revision as of 13:21, 24 April 2026

<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>
 </select>

<script> /* TAB SYSTEM */ 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');
 };

}); </script>

Retrieved from "https://ohwikiguide.com/index.php?title=Gear_Hides_Test&oldid=1159"