Gear Hides Test: Difference between revisions
No edit summary |
No edit summary |
||
| Line 12: | Line 12: | ||
.dropdown{width:100%;margin-top:10px;} | .dropdown{width:100%;margin-top:10px;} | ||
.dropdown select{width:100%;padding:10px;background:#11161c;color:#e6edf3;border:1px solid #1f2a35;border-radius:8px;font-size:14px;} | .dropdown select{width:100%;padding:10px;background:#11161c;color:#e6edf3;border:1px solid #1f2a35;border-radius:8px;font-size:14px;} | ||
.output{margin-top:10px;background:#0d1319;border:1px solid #1f2a35;border-radius:10px;padding:12 | .output{margin-top:10px;background:#0d1319;border:1px solid #1f2a35;border-radius:10px;padding:12px;} | ||
.output-title{font-weight:700;margin-bottom:8px;color:#e6edf3;} | |||
.output-line{font-size:13px;color:#9fb0c3;padding:4px 0;border-top:1px solid #1a222b;} | |||
.output-line:first-of-type{border-top:none;} | |||
.mw-tab-content{display:none;} | |||
.mw-tab-content.active{display:block;} | |||
</style> | |||
<div class="mw-tab-buttons"> | |||
<div class="mw-tab-btn active" data-tab="t1">Helmet</div> | |||
<div class="mw-tab-btn" data-tab="t2">Top</div> | |||
<div class="mw-tab-btn" data-tab="t3">Bottoms</div> | |||
<div class="mw-tab-btn" data-tab="t4">Gloves</div> | |||
<div class="mw-tab-btn" data-tab="t5">Boot</div> | |||
<div class="mw-tab-btn" data-tab="t6">Mask</div> | |||
</div> | |||
<div id="t1" class="mw-tab-content active"> | |||
<div class="dropdown"><select id="helmetSelect"><option value="">Select Item</option><option value="h1">Basic Helmet</option></select></div> | |||
<div id="helmetOutput" class="output" style="display:none;"></div> | |||
</div> | |||
<div id="t2" class="mw-tab-content"> | |||
<div class="dropdown"><select id="topSelect"><option value="">Select Item</option><option value="tp1">Basic Top</option></select></div> | |||
<div id="topOutput" class="output" style="display:none;"></div> | |||
</div> | |||
<div id="t3" class="mw-tab-content"> | |||
<div class="dropdown"><select id="bottomsSelect"><option value="">Select Item</option><option value="b1">Basic Bottoms</option></select></div> | |||
<div id="bottomsOutput" class="output" style="display:none;"></div> | |||
</div> | |||
<div id="t4" class="mw-tab-content"> | |||
<div class="dropdown"><select id="glovesSelect"><option value="">Select Item</option><option value="g1">Basic Gloves</option></select></div> | |||
<div id="glovesOutput" class="output" style="display:none;"></div> | |||
</div> | |||
<div id="t5" class="mw-tab-content"> | |||
<div class="dropdown"><select id="bootSelect"><option value="">Select Item</option><option value="bo1">Basic Boot</option></select></div> | |||
<div id="bootOutput" class="output" style="display:none;"></div> | |||
</div> | |||
<div id="t6" class="mw-tab-content"> | |||
<div class="dropdown"><select id="maskSelect"><option value="">Select Item</option><option value="m1">Basic Mask</option></select></div> | |||
<div id="maskOutput" class="output" style="display:none;"></div> | |||
</div> | |||
</div> | |||
<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 data = { | |||
helmet: { | |||
h1: { title:"Basic Helmet", lines:["Tech Level 1: YOUR DATA HERE","Tech Level 8: YOUR DATA HERE","Tech Level 12: YOUR DATA HERE"] } | |||
}, | |||
top: { | |||
tp1: { title:"Basic Top", lines:["Tech Level 1: YOUR DATA HERE","Tech Level 8: YOUR DATA HERE","Tech Level 12: YOUR DATA HERE"] } | |||
}, | |||
bottoms: { | |||
b1: { title:"Basic Bottoms", lines:["Tech Level 1: YOUR DATA HERE","Tech Level 8: YOUR DATA HERE","Tech Level 12: YOUR DATA HERE"] } | |||
}, | |||
gloves: { | |||
g1: { title:"Basic Gloves", lines:["Tech Level 1: YOUR DATA HERE","Tech Level 8: YOUR DATA HERE","Tech Level 12: YOUR DATA HERE"] } | |||
}, | |||
boot: { | |||
bo1: { title:"Basic Boot", lines:["Tech Level 1: YOUR DATA HERE","Tech Level 8: YOUR DATA HERE","Tech Level 12: YOUR DATA HERE"] } | |||
}, | |||
mask: { | |||
m1: { title:"Basic Mask", lines:["Tech Level 1: YOUR DATA HERE","Tech Level 8: YOUR DATA HERE","Tech Level 12: YOUR DATA HERE"] } | |||
} | |||
}; | |||
function bindSelect(selectId, outputId, category) { | |||
document.getElementById(selectId).onchange = function() { | |||
const val = this.value; | |||
const output = document.getElementById(outputId); | |||
if (!val) { output.style.display="none"; return; } | |||
const item = data[category][val]; | |||
output.innerHTML = `<div class="output-title">${item.title}</div>` + item.lines.map(l=>`<div class="output-line">${l}</div>`).join(""); | |||
output.style.display = "block"; | |||
}; | |||
} | |||
bindSelect("helmetSelect","helmetOutput","helmet"); | |||
bindSelect("topSelect","topOutput","top"); | |||
bindSelect("bottomsSelect","bottomsOutput","bottoms"); | |||
bindSelect("glovesSelect","glovesOutput","gloves"); | |||
bindSelect("bootSelect","bootOutput","boot"); | |||
bindSelect("maskSelect","maskOutput","mask"); | |||
</script> | |||
</html> | |||