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
No edit summary
Line 1: Line 1:
<html>
<html>
<a href="https://ohwikiguide.com">Return to Front Page</a>
<a href="https://ohwikiguide.com">Return to Front Page</a>
<br><br>
<br><br>
<div style="max-width:420px; margin:0 auto;">
<div style="max-width:420px; margin:0 auto;">
<style>
<style>
/* ===== TABS ===== */
/* ===== TABS ===== */
Line 16: Line 13:
   gap: 4px;
   gap: 4px;
}
}
.mw-tab-btn {
.mw-tab-btn {
   flex: 1;
   flex: 1;
Line 27: Line 23:
   cursor: pointer;
   cursor: pointer;
}
}
.mw-tab-btn.active {
.mw-tab-btn.active {
   background: linear-gradient(180deg, #1ec8ff, #0ea5e9);
   background: linear-gradient(180deg, #1ec8ff, #0ea5e9);
   color: #001018;
   color: #001018;
}
}
/* ===== DROPDOWN UI ===== */
/* ===== DROPDOWN UI ===== */
.dropdown {
.dropdown {
Line 38: Line 32:
   margin-top: 10px;
   margin-top: 10px;
}
}
.dropdown select {
.dropdown select {
   width: 100%;
   width: 100%;
Line 48: Line 41:
   font-size: 14px;
   font-size: 14px;
}
}
/* ===== OUTPUT PANEL ===== */
/* ===== OUTPUT PANEL ===== */
.output {
.output {
Line 57: Line 49:
   padding: 12px;
   padding: 12px;
}
}
.output-title {
.output-title {
   font-weight: 700;
   font-weight: 700;
Line 63: Line 54:
   color: #e6edf3;
   color: #e6edf3;
}
}
.output-line {
.output-line {
   font-size: 13px;
   font-size: 13px;
Line 70: Line 60:
   border-top: 1px solid #1a222b;
   border-top: 1px solid #1a222b;
}
}
.output-line:first-of-type {
.output-line:first-of-type {
   border-top: none;
   border-top: none;
}
}
.mw-tab-content {
.mw-tab-content {
   display: none;
   display: none;
}
}
.mw-tab-content.active {
.mw-tab-content.active {
   display: block;
   display: block;
}
}
</style>
</style>
<!-- TABS -->
<!-- TABS -->
<div class="mw-tab-buttons">
<div class="mw-tab-buttons">
Line 91: Line 77:
   <div class="mw-tab-btn" data-tab="slot4">Build</div>
   <div class="mw-tab-btn" data-tab="slot4">Build</div>
</div>
</div>
<!-- ================= SURVIVAL ================= -->
<!-- ================= 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">
   <option value="">Select Item</option>
   <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="adrenaline">Adrenaline Shots</option>
  <option value="advancedstove">Advanced Stove</option>
  <option value="backpackexpansion">Backpack Expansion</option>
   <option value="waterfilter">Compact Water Filter</option>
   <option value="waterfilter">Compact Water Filter</option>
  <option value="fridge">Fridge</option>
  <option value="largewaterfilter">Large Water Filter</option>
  <option value="loadhandling">Load Handling</option>
  <option value="meat">Meat Drier</option>
  <option value="portablerainwater">Portable Rainwater Collection System</option>
  <option value="stove">Primary Stove</option>
   <option value="rainwater">Rainwater Collection System</option>
   <option value="rainwater">Rainwater Collection System</option>
   <option value="advancedstove">Advanced Stove</option>
   <option value="stardustfusionstove">Stardust Fusion Stove</option>
  <option value="treatment">Treatment</option>
  <option value="watertank">Water Tank</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 ================= -->
<!-- ================= PRODUCTION ================= -->
<div id="slot2" class="mw-tab-content"></div>
<div id="slot2" class="mw-tab-content"></div>
<!-- ================= COMBAT ================= -->
<!-- ================= COMBAT ================= -->
<div id="slot3" class="mw-tab-content"></div>
<div id="slot3" class="mw-tab-content"></div>
<!-- ================= BUILD ================= -->
<!-- ================= BUILD ================= -->
<div id="slot4" class="mw-tab-content"></div>
<div id="slot4" class="mw-tab-content"></div>
</div>
</div>
<script>
<script>
/* TAB SYSTEM */
/* TAB SYSTEM */
Line 129: Line 113:
     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');
   };
   };
});
});
/* DATA */
/* DATA */
const survivalData = {
const survivalData = {
Line 191: Line 173:
       "<b>Tech Level 8:</b> 41 Steel Ingot + 13 Parts + 1 Power Cable + 9 Metal Scraps + 6 Glass + 9 Electronic Part",
       "<b>Tech Level 8:</b> 41 Steel Ingot + 13 Parts + 1 Power Cable + 9 Metal Scraps + 6 Glass + 9 Electronic Part",
       "<b>Tech Level 12:</b> 41 Steel Ingot + 13 Parts + 1 Power Cable + 9 Metal Scraps + 6 Glass + 9 Electronic Part"
       "<b>Tech Level 12:</b> 41 Steel Ingot + 13 Parts + 1 Power Cable + 9 Metal Scraps + 6 Glass + 9 Electronic Part"
    ]
  },
  watertank: {
    title: "Water Tank",
    lines: [
      "<b>Tech Level 12:</b> 41 Wood + 5 Adhesive + 13 Metal Scraps"
    ]
  },
  fridge: {
    title: "Fridge",
    lines: [
      "<b>Tech Level 1:</b> 25 Steel Ingot + 9 Iron Ingot + 13 Parts + 9 Glass + 17 Electronic Part + 1 Power Cable",
      "<b>Tech Level 8:</b> 25 Steel Ingot + 9 Iron Ingot + 13 Parts + 9 Glass + 17 Electronic Part + 1 Power Cable",
      "<b>Tech Level 12:</b> 25 Steel Ingot + 8 Iron Ingot + 13 Parts + 9 Glass + 17 Electronic Part + 1 Power Cable"
    ]
  },
  largewaterfilter: {
    title: "Large Water Filter",
    lines: [
      "<b>Tech Level 1:</b> 5 Electronic Part + 7 Parts + 7 Adhesive + 6 Rubber + 4 Alloy Steel + 1 Power Cable",
      "<b>Tech Level 8:</b> 5 Electronic Part + 17 Parts + 17 Adhesive + 6 Rubber + 6 Alloy Steel + 1 Power Cable",
      "<b>Tech Level 12:</b> 13 Electronic Part + 7 Parts + 20 Adhesive + 9 Rubber + 9 Alloy Steel + 1 Power Cable"
    ]
  },
  portablerainwater: {
    title: "Portable Rainwater Collection System",
    lines: [
      "<b>Tech Level 8:</b> 10 Fiber + 7 Wood + 4 Adhesive + 4 Stardust Source",
      "<b>Tech Level 12:</b> 10 Fiber + 7 Wood + 4 Adhesive + 4 Stardust Source"
    ]
  },
  loadhandling: {
    title: "Load Handling",
    lines: [
      "<b>Tech Level 8:</b> 10 Fiber + 1 Rawhide + 5 Rubber + 4 Stardust Source",
      "<b>Tech Level 12:</b> 10 Fiber + 1 Rawhide + 5 Rubber + 4 Stardust Source"
    ]
  },
  backpackexpansion: {
    title: "Backpack Expansion",
    lines: [
      "<b>Tech Level 8:</b> Tungsten Ingot + 2 Rawhide + 5 Rubber + 4 Stardust Source",
      "<b>Tech Level 12:</b> Tungsten Ingot + 2 Rawhide + 5 Rubber + 4 Stardust Source"
    ]
  },
  stardustfusionstove: {
    title: "Stardust Fusion Stove",
    lines: [
      "<b>Tech Level 8:</b> 26 Tungsten Ingot + 23 Gold Ore + 7 Parts + 11 Power Cable + 4 Electronic Part + 1 Oven Mitts",
      "<b>Tech Level 12:</b> 61 Tungsten Ingot + 23 Gold Ore + 7 Parts + 11 Power Cable + 4 Electronic Part + 1 Oven Mitts"
     ]
     ]
   }
   }
};
};
/* DROPDOWN LOGIC */
/* 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>
</html>
</html>

Revision as of 20:18, 25 April 2026

Return to Front Page

Survival
Production
Combat
Build

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