Technological Bench
<style> .tb-tabs{display:flex;gap:6px;margin-bottom:12px;} .tb-tab{flex:1;padding:8px 0;font-size:13px;font-weight:600;text-align:center;border-radius:8px;border:1px solid #444;color:#aaa;cursor:pointer;background:#1a1a1a;} .tb-tab.active{background:#2a2a2a;color:#fff;border-color:#888;} .tb-tab:hover:not(.active){background:#222;color:#ddd;} .tb-panel{display:none;} .tb-panel.active{display:block;} .tb-select{width:100%;padding:9px 10px;font-size:13px;border-radius:8px;border:1px solid #333;background:#1a1a1a;color:#eee;margin-bottom:10px;} .tb-output{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:10px;padding:12px 14px;display:none;} .tb-out-title{font-size:13px;font-weight:700;color:#eee;margin-bottom:8px;} .tb-line{font-size:12px;color:#999;padding:5px 0;border-top:1px solid #2a2a2a;} .tb-line:first-of-type{border-top:none;} .tb-tier{font-size:10px;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:1px;} </style>
<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> var 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(function(btn){btn.onclick=function(){document.querySelectorAll('.tb-tab').forEach(function(b){b.classList.remove('active');});document.querySelectorAll('.tb-panel').forEach(function(p){p.classList.remove('active');});btn.classList.add('active');document.getElementById(btn.dataset.tab).classList.add('active');};});
document.getElementById('survivalSelect').onchange=function(){var out=document.getElementById('survivalOutput');var item=data[this.value];if(!item){out.style.display='none';return;}var html='</script>