Jump to content

Gear Hides Test: Difference between revisions

From Once Human Guide
Newer edit →
Bones (talk | contribs)
Bureaucrats, Interface administrators, Administrators
1,328 edits
Created page with "<a href="https://ohwikiguide.com">Return to Front Page</a> <br><br> <div style="max-width:420px; margin:0 auto;"> <style> →TABS: .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; } /*..."
 
No edit summary
Line 5: Line 5:


<style>
<style>
/* TABS */
.mw-tab-buttons {
.mw-tab-buttons {
   display: flex;
   display: flex;
Line 30: Line 28:
}
}


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


/* UI BLOCK */
.mw-ui-select {
.mw-ui-select {
   width: 100%;
   width: 100%;
Line 49: Line 40:
}
}


/* OUTPUT */
.mw-ui-output {
.mw-ui-output {
   margin-top: 10px;
   margin-top: 10px;
Line 67: Line 57:
   border-top: 1px solid #1a222b;
   border-top: 1px solid #1a222b;
}
}
 
.mw-ui-line:first-child { border-top: none; }
.mw-ui-line:first-of-type {
  border-top: none;
}
 
</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 84: Line 69:
</div>
</div>


<!-- HELMET -->
<div id="helmet" class="mw-tab-content active">
<div id="helmet" class="mw-tab-content active">
   <select class="mw-ui-select">
   <select id="helmetSelect" class="mw-ui-select">
     <option>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>
</div>


<!-- TOP -->
<div id="top" class="mw-tab-content">Top content</div>
<div id="top" class="mw-tab-content">
<div id="bottoms" class="mw-tab-content">Bottoms content</div>
  <select class="mw-ui-select">
<div id="gloves" class="mw-tab-content">Gloves content</div>
    <option>Select Top</option>
<div id="boots" class="mw-tab-content">Boots content</div>
  </select>
<div id="mask" class="mw-tab-content">Mask content</div>
</div>
 
<!-- BOTTOMS -->
<div id="bottoms" class="mw-tab-content">
  <select class="mw-ui-select">
    <option>Select Bottoms</option>
  </select>
</div>
 
<!-- GLOVES -->
<div id="gloves" class="mw-tab-content">
  <select class="mw-ui-select">
    <option>Select Gloves</option>
  </select>
</div>
 
<!-- BOOTS -->
<div id="boots" class="mw-tab-content">
  <select class="mw-ui-select">
    <option>Select Boots</option>
  </select>
</div>
 
<!-- MASK -->
<div id="mask" class="mw-tab-content">
  <select class="mw-ui-select">
    <option>Select Mask</option>
  </select>
</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 = () => {
     document.querySelectorAll('.mw-tab-btn').forEach(b => b.classList.remove('active'));
     document.querySelectorAll('.mw-tab-btn').forEach(b => b.classList.remove('active'));
     document.querySelectorAll('.mw-tab-content').forEach(c => c.classList.remove('active'));
     document.querySelectorAll('.mw-tab-content').forEach(c => c.classList.remove('active'));
     btn.classList.add('active');
     btn.classList.add('active');
     document.getElementById(btn.dataset.tab).classList.add('active');
     document.getElementById(btn.dataset.tab).classList.add('active');
Line 142: Line 97:
});
});


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:19, 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>
   <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>

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