Jump to content

Technological Bench: Difference between revisions

From Once Human Guide
← Older editNewer edit →
Bones (talk | contribs)
Bureaucrats, Interface administrators, Administrators
1,328 edits
No edit summary
Tag: Reverted
No edit summary
Tag: Manual revert
Line 1: Line 1:
<html>
<a href="https://ohwikiguide.com">Return to Front Page</a>
<br><br>
<div style="max-width:420px; margin:0 auto;">
<div style="max-width:420px; margin:0 auto;">


<style>
<style>
/* ===== TABS ===== */
.mw-tab-buttons {
.mw-tab-buttons {
   display: flex;
   display: flex;
Line 27: Line 33:
}
}


/* ===== DROPDOWN UI ===== */
.dropdown {
.dropdown {
   width: 100%;
   width: 100%;
Line 42: Line 49:
}
}


/* ===== OUTPUT PANEL ===== */
.output {
.output {
   margin-top: 10px;
   margin-top: 10px;
Line 76: Line 84:
</style>
</style>


<!-- TABS -->
<div class="mw-tab-buttons">
<div class="mw-tab-buttons">
   <div class="mw-tab-btn active" data-tab="slot1">Survival</div>
   <div class="mw-tab-btn active" data-tab="slot1">Survival</div>
Line 83: Line 92:
</div>
</div>


<!-- ================= SURVIVAL ================= -->
<div id="slot1" class="mw-tab-content active">
<div id="slot1" class="mw-tab-content active">
<div class="dropdown">
<div class="dropdown">
<select id="survivalSelect">
<select id="survivalSelect">
Line 90: Line 101:
   <option value="meat">Meat Drier</option>
   <option value="meat">Meat Drier</option>
   <option value="treatment">Treatment</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>
</div>
</div>
<div id="survivalOutput" class="output" style="display:none;"></div>
<div id="survivalOutput" class="output" style="display:none;"></div>
</div>
</div>


<!-- ================= PRODUCTION ================= -->
<div id="slot2" class="mw-tab-content"></div>
<div id="slot2" class="mw-tab-content"></div>
<!-- ================= COMBAT ================= -->
<div id="slot3" class="mw-tab-content"></div>
<div id="slot3" class="mw-tab-content"></div>
<!-- ================= BUILD ================= -->
<div id="slot4" class="mw-tab-content"></div>
<div id="slot4" class="mw-tab-content"></div>
</div>


<script>
<script>
/* TAB SYSTEM */
document.querySelectorAll('.mw-tab-btn').forEach(btn => {
document.querySelectorAll('.mw-tab-btn').forEach(btn => {
   btn.onclick = () => {
   btn.onclick = () => {
     document.querySelectorAll('.mw-tab-btn').forEach(b => b.classList.remove('active'));
     document.querySelectorAll('.mw-tab-btn').forEach(b => b.classList.remove('active'));
     document.querySelectorAll('.mw-tab-content').forEach(c => c.classList.remove('active'));
     document.querySelectorAll('.mw-tab-content').forEach(c => c.classList.remove('active'));
     btn.classList.add('active');
     btn.classList.add('active');
     document.getElementById(btn.dataset.tab).classList.add('active');
     document.getElementById(btn.dataset.tab).classList.add('active');
Line 112: Line 131:
});
});


/* DATA */
const survivalData = {
const survivalData = {
   stove: {
   stove: {
Line 135: Line 155:
       "Tech Level 8: 1 Detoxident + 1 Glass + 3 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"
       "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"
     ]
     ]
   }
   }
};
};


/* DROPDOWN LOGIC */
document.getElementById("survivalSelect").onchange = function () {
document.getElementById("survivalSelect").onchange = function () {
   const val = this.value;
   const val = this.value;
   const output = document.getElementById("survivalOutput");
   const output = document.getElementById("survivalOutput");
   if (!val) {
   if (!val) {
     output.style.display = "none";
     output.style.display = "none";
     return;
     return;
   }
   }
   const item = survivalData[val];
   const item = survivalData[val];
   output.innerHTML =
   output.innerHTML =
     '<div class="output-title">' + item.title + '</div>' +
     `<div class="output-title">${item.title}</div>` +
     item.lines.map(line => '<div class="output-line">' + line + '</div>').join("");
     item.lines.map(line => `<div class="output-line">${line}</div>`).join("");
 
   output.style.display = "block";
   output.style.display = "block";
};
};
</script>
</script>


</div>
</html>

Revision as of 16:30, 24 April 2026

Return to Front Page

Survival
Production
Combat
Build

Retrieved from "https://ohwikiguide.com/index.php?title=Technological_Bench&oldid=1180"