Technological Bench: Difference between revisions
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
| Line 1: | Line 1: | ||
<div style="max-width:420px; margin:0 auto;"> | <div style="max-width:420px; margin:0 auto;"> | ||
<style> | <style> | ||
.tb-tabs{display:flex;gap:6px;margin-bottom:12px;} | .tb-tabs{display:flex;gap:6px;margin-bottom:12px;} | ||
| Line 15: | Line 14: | ||
.tb-tier{font-size:10px;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:1px;} | .tb-tier{font-size:10px;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:1px;} | ||
</style> | </style> | ||
<div class="tb-tabs"> | <div class="tb-tabs"> | ||
<div class="tb-tab active" data-tab="survival">Survival</div> | <div class="tb-tab active" data-tab="survival">Survival</div> | ||
| Line 22: | Line 20: | ||
<div class="tb-tab" data-tab="build">Build</div> | <div class="tb-tab" data-tab="build">Build</div> | ||
</div> | </div> | ||
<div id="survival" class="tb-panel active"> | <div id="survival" class="tb-panel active"> | ||
<select class="tb-select" id="survivalSelect"> | <select class="tb-select" id="survivalSelect"> | ||
| Line 35: | Line 32: | ||
<div class="tb-output" id="survivalOutput"></div> | <div class="tb-output" id="survivalOutput"></div> | ||
</div> | </div> | ||
<div id="production" class="tb-panel"> | <div id="production" class="tb-panel"> | ||
<select class="tb-select"><option value="">Select item</option></select> | <select class="tb-select"><option value="">Select item</option></select> | ||
| Line 45: | Line 41: | ||
<select class="tb-select"><option value="">Select item</option></select> | <select class="tb-select"><option value="">Select item</option></select> | ||
</div> | </div> | ||
<script> | <script> | ||
var data={stove:{title:"Primary stove",tiers:[{label:"Tech level 1",recipe:"29 Copper Ore | 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.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;} | document.getElementById('survivalSelect').onchange=function(){var out=document.getElementById('survivalOutput');var item=data[this.value];if(!item){out.style.display='none';return;}var html='<div class="tb-out-title">'+item.title+'</div>';for(var i=0;i<item.tiers.length;i++){html+='<div class="tb-line"><span class="tb-tier">'+item.tiers[i].label+'</span>'+item.tiers[i].recipe+'</div>';}out.innerHTML=html;out.style.display='block';}; | ||
</script> | </script> | ||
</div> | </div> | ||
Revision as of 16:28, 24 April 2026
<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>