Technological Bench

<style> .mw-tab-buttons {

 display: flex;
 width: 100%;
 background: #0b0f14;
 border-radius: 10px;
 padding: 4px;
 gap: 4px;

}

.mw-tab-btn {

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

}

.mw-tab-btn.active {

 background: linear-gradient(180deg, #1ec8ff, #0ea5e9);
 color: #001018;

}

.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;

}

.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>

Survival

Production

Combat

Build

<select id="survivalSelect">

 <option value="">Select Item</option>
 <option value="stove">Primary Stove</option>
 <option value="meat">Meat Drier</option>
 <option value="treatment">Treatment</option>
 <option value="adrenaline">Adrenaline Shots</option>
 <option value="waterfilter">Compact Water Filter</option>
 <option value="rainwater">Rainwater Collection System</option>

</select>

<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 survivalData = {

 stove: {
   title: "Primary Stove",
   lines: [
     "Tech Level 1: 29 Copper Ore + 17 Gravel + 25 Wood",
     "Tech Level 8: 29 Copper Ore + 17 Gravel + 25 Wood",
     "Tech Level 12: 30 Copper Ore + 25 Gravel + 17 Wood"
   ]
 },
 meat: {
   title: "Meat Drier",
   lines: [
     "Tech Level 1: 9 Iron Ingot + 13 Metal Scraps + 17 Wood",
     "Tech Level 8: 6 Iron Ingot + 8 Metal Scraps + 17 Wood",
     "Tech Level 12: 9 Iron Ingot + 8 Metal Scraps + 17 Wood"
   ]
 },
 treatment: {
   title: "Treatment",
   lines: [
     "Tech Level 1: 1 Detoxident + 1 Glass + 5 Rubber + 1 Acid + 1 Boiled Water",
     "Tech Level 8: 1 Detoxident + 1 Glass + 3 Rubber + 1 Acid + 1 Boiled Water",
     "Tech Level 12: 1 Detoxident + 1 Glass + 5 Rubber + 1 Acid + 1 Boiled Water"
   ]
 },
 adrenaline: {
   title: "Adrenaline Shots",
   lines: [
     "Tech Level 1: 7 Acid + 1 Glass + 2 Rubber + 17 Stardust Source",
     "Tech Level 8: 3 Acid + 1 Glass + 2 Rubber + 17 Stardust Source",
     "Tech Level 12: 5 Acid + 1 Glass + 2 Rubber + 17 Stardust Source"
   ]
 },
 waterfilter: {
   title: "Compact Water Filter",
   lines: [
     "Tech Level 1: 41 Wood + 13 Adhesive + 17 Charcoal + 21 Iron Ingot + 1 Power Cable",
     "Tech Level 8: 41 Wood + 13 Adhesive + 17 Charcoal + 21 Iron Ingot + 1 Power Cable",
     "Tech Level 12: 41 Wood + 13 Adhesive + 17 Charcoal + 21 Iron Ingot + 1 Power Cable"
   ]
 },
 rainwater: {
   title: "Rainwater Collection System",
   lines: [
     "Tech Level 1: 25 Wood + 13 Fiber + 5 Rubber",
     "Tech Level 8: 25 Wood + 13 Fiber + 2 Rubber",
     "Tech Level 12: 26 Wood + 13 Fiber + 3 Rubber"
   ]
 }

};

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

 const val = this.value;
 const output = document.getElementById("survivalOutput");
 if (!val) {
   output.style.display = "none";
   return;
 }
 const item = survivalData[val];
 output.innerHTML =

'

' + item.title + '

' + item.lines.map(line => '

' + line + '

').join("");

 output.style.display = "block";

}; </script>