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 15: Line 15:
   text-align: center;
   text-align: center;
   padding: 8px 0;
   padding: 8px 0;
   background: #11161c;
   background: #111;
   border: 1px solid #1f2a35;
   border: 1px solid #444;
   border-radius: 6px;
   border-radius: 6px;
   color: #cfd6df;
   color: #ccc;
   cursor: pointer;
   cursor: pointer;
   font-weight: 600;
   font-weight: bold;
}
}


.mw-tab-btn.active {
.mw-tab-btn.active {
   background: #1ec8ff;
   background: #00bfff;
   color: #001018;
   color: #000;
}
}


.mw-tab-content { display: none; }
.mw-tab-content {
.mw-tab-content.active { display: block; }
  display: none;
 
.mw-ui-select {
  width: 100%;
  padding: 10px;
  background: #11161c;
  color: #e6edf3;
  border: 1px solid #1f2a35;
  border-radius: 6px;
}
}


.mw-ui-output {
.mw-tab-content.active {
   margin-top: 10px;
   display: block;
  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>
</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 70: Line 46:
</div>
</div>


<!-- HELMET -->
<div id="helmet" class="mw-tab-content active">Helmet</div>
<div id="helmet" class="mw-tab-content active">
<div id="top" class="mw-tab-content">Top</div>
  <select id="helmetSelect" class="mw-ui-select">
<div id="bottoms" class="mw-tab-content">Bottoms</div>
    <option value="">Select Helmet</option>
<div id="gloves" class="mw-tab-content">Gloves</div>
  </select>
<div id="boots" class="mw-tab-content">Boots</div>
 
<div id="mask" class="mw-tab-content">Mask</div>
  <div id="helmetOutput" class="mw-ui-output" style="display:none;"></div>
</div>
 
<!-- OTHER TABS (EMPTY FOR NOW) -->
<div id="top" class="mw-tab-content"></div>
<div id="bottoms" class="mw-tab-content"></div>
<div id="gloves" class="mw-tab-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 = () => {

Revision as of 13:23, 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: #111;
 border: 1px solid #444;
 border-radius: 6px;
 color: #ccc;
 cursor: pointer;
 font-weight: bold;

}

.mw-tab-btn.active { 

 background: #00bfff;
 color: #000;

}

.mw-tab-content { 

 display: none;

}

.mw-tab-content.active { 

 display: block;

} </style>

Helmet
Top
Bottoms
Gloves
Boots
Mask
Helmet
Top
Bottoms
Gloves
Boots
Mask

<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');
 };

}); </script>

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