Technological Bench

<style> .tb-tabs { display:flex; gap:6px; margin-bottom:12px; } .tb-tab { flex:1; padding:8px 0; font-size:13px; font-weight:500; text-align:center; border-radius:var(--border-radius-md); border:0.5px solid var(--color-border-secondary); color:var(--color-text-secondary); cursor:pointer; background:var(--color-background-secondary); } .tb-tab.active { background:var(--color-background-primary); color:var(--color-text-primary); border-color:var(--color-border-primary); } .tb-tab:hover:not(.active) { background:var(--color-background-primary); color:var(--color-text-primary); } .tb-panel { display:none; } .tb-panel.active { display:block; } .tb-select { width:100%; padding:9px 10px; font-size:13px; border-radius:var(--border-radius-md); border:0.5px solid var(--color-border-secondary); background:var(--color-background-secondary); color:var(--color-text-primary); margin-bottom:10px; } .tb-output { background:var(--color-background-secondary); border:0.5px solid var(--color-border-tertiary); border-radius:var(--border-radius-lg); padding:12px 14px; display:none; } .tb-out-title { font-size:13px; font-weight:500; color:var(--color-text-primary); margin-bottom:8px; } .tb-line { font-size:12px; color:var(--color-text-secondary); padding:5px 0; border-top:0.5px solid var(--color-border-tertiary); } .tb-line:first-of-type { border-top:none; } .tb-tier { font-size:10px; font-weight:500; color:var(--color-text-tertiary); text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:1px; } </style>

Technological Bench — crafting recipe lookup by category and item

Survival

Production

Combat

Build

   <select class="tb-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>

   <select class="tb-select"><option value="">Select item</option></select>

   <select class="tb-select"><option value="">Select item</option></select>

   <select class="tb-select"><option value="">Select item</option></select>

<script> const data = {

 stove: {
   title: "Primary stove",
   tiers: [
     { label:"Tech level 1", recipe:"29 Copper Ore · 17 Gravel · 25 Wood" },
     { label:"Tech level 8", recipe:"29 Copper Ore · 17 Gravel · 25 Wood" },
     { label:"Tech level 12", recipe:"30 Copper Ore · 25 Gravel · 17 Wood" }
   ]
 },
 meat: {
   title: "Meat drier",
   tiers: [
     { label:"Tech level 1", recipe:"9 Iron Ingot · 13 Metal Scraps · 17 Wood" },
     { label:"Tech level 8", recipe:"6 Iron Ingot · 8 Metal Scraps · 17 Wood" },
     { label:"Tech level 12", recipe:"9 Iron Ingot · 8 Metal Scraps · 17 Wood" }
   ]
 },
 treatment: {
   title: "Treatment",
   tiers: [
     { label:"Tech level 1", recipe:"1 Detoxident · 1 Glass · 5 Rubber · 1 Acid · 1 Boiled Water" },
     { label:"Tech level 8", recipe:"1 Detoxident · 1 Glass · 3 Rubber · 1 Acid · 1 Boiled Water" },
     { label:"Tech level 12", recipe:"1 Detoxident · 1 Glass · 5 Rubber · 1 Acid · 1 Boiled Water" }
   ]
 },
 adrenaline: {
   title: "Adrenaline shots",
   tiers: [
     { label:"Tech level 1", recipe:"7 Acid · 1 Glass · 2 Rubber · 17 Stardust Source" },
     { label:"Tech level 8", recipe:"3 Acid · 1 Glass · 2 Rubber · 17 Stardust Source" },
     { label:"Tech level 12", recipe:"5 Acid · 1 Glass · 2 Rubber · 17 Stardust Source" }
   ]
 },
 waterfilter: {
   title: "Compact water filter",
   tiers: [
     { label:"Tech level 1", recipe:"41 Wood · 13 Adhesive · 17 Charcoal · 21 Iron Ingot · 1 Power Cable" },
     { label:"Tech level 8", recipe:"41 Wood · 13 Adhesive · 17 Charcoal · 21 Iron Ingot · 1 Power Cable" },
     { label:"Tech level 12", recipe:"41 Wood · 13 Adhesive · 17 Charcoal · 21 Iron Ingot · 1 Power Cable" }
   ]
 },
 rainwater: {
   title: "Rainwater collection system",
   tiers: [
     { label:"Tech level 1", recipe:"25 Wood · 13 Fiber · 5 Rubber" },
     { label:"Tech level 8", recipe:"25 Wood · 13 Fiber · 2 Rubber" },
     { label:"Tech level 12", recipe:"26 Wood · 13 Fiber · 3 Rubber" }
   ]
 }

};

document.querySelectorAll('.tb-tab').forEach(btn => {

 btn.onclick = () => {
   document.querySelectorAll('.tb-tab').forEach(b => b.classList.remove('active'));
   document.querySelectorAll('.tb-panel').forEach(p => p.classList.remove('active'));
   btn.classList.add('active');
   document.getElementById(btn.dataset.tab).classList.add('active');
 };

});

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

 const out = document.getElementById('survivalOutput');
 const item = data[this.value];
 if (!item) { out.style.display = 'none'; return; }

out.innerHTML = `

${item.title}

` + item.tiers.map(t => `

${t.label}${t.recipe}

`).join();

 out.style.display = 'block';

}; </script>