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 26: Line 26:
   border-radius: 6px;
   border-radius: 6px;
   cursor: pointer;
   cursor: pointer;
  transition: all 0.15s ease;
}
.mw-tab-btn:hover {
  background: #1a222b;
}
}


Line 36: Line 31:
   background: linear-gradient(180deg, #1ec8ff, #0ea5e9);
   background: linear-gradient(180deg, #1ec8ff, #0ea5e9);
   color: #001018;
   color: #001018;
  box-shadow: 0 0 8px rgba(30,200,255,0.4);
}
}


.mw-tab-content {
/* ===== DROPDOWN UI ===== */
   display: none;
.dropdown {
   padding-top: 10px;
   width: 100%;
   margin-top: 10px;
}
}


.mw-tab-content.active {
.dropdown select {
   display: block;
  width: 100%;
  padding: 10px;
  background: #11161c;
  color: #e6edf3;
  border: 1px solid #1f2a35;
  border-radius: 8px;
   font-size: 14px;
}
}


/* ===== DROPDOWN CARD ===== */
/* ===== OUTPUT PANEL ===== */
.item-card {
.output {
   background: #11161c;
  margin-top: 10px;
   background: #0d1319;
   border: 1px solid #1f2a35;
   border: 1px solid #1f2a35;
   border-radius: 10px;
   border-radius: 10px;
   margin-bottom: 10px;
   padding: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}
}


.item-header {
.output-title {
  padding: 12px;
   font-weight: 700;
   font-weight: 700;
  margin-bottom: 8px;
   color: #e6edf3;
   color: #e6edf3;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
}


.item-card:hover {
.output-line {
   background: #141b22;
  font-size: 13px;
  color: #9fb0c3;
  padding: 4px 0;
   border-top: 1px solid #1a222b;
}
}


.item-arrow {
.output-line:first-of-type {
   transition: transform 0.2s ease;
   border-top: none;
}
}


.item-card.active .item-arrow {
.mw-tab-content {
   transform: rotate(90deg);
   display: none;
}
}


.item-content {
.mw-tab-content.active {
  max-height: 0;
   display: block;
  overflow: hidden;
  transition: max-height 0.25s ease;
  background: #0d1319;
}
 
.item-card.active .item-content {
  max-height: 300px;
}
 
.item-line {
   font-size: 13px;
  color: #9fb0c3;
  padding: 8px 12px;
  border-top: 1px solid #1a222b;
}
}
</style>
</style>
Line 110: Line 95:
<div id="slot1" class="mw-tab-content active">
<div id="slot1" class="mw-tab-content active">


<!-- Primary Stove -->
<div class="dropdown">
<div class="item-card">
<select id="survivalSelect">
  <div class="item-header">
  <option value="">Select Item</option>
    Primary Stove
   <option value="stove">Primary Stove</option>
    <span class="item-arrow">▶</span>
  <option value="meat">Meat Drier</option>
  </div>
  <option value="treatment">Treatment</option>
   <div class="item-content">
</select>
    <div class="item-line">Tech Level 1: 29 Copper Ore + 17 Gravel + 25 Wood</div>
    <div class="item-line">Tech Level 8: 29 Copper Ore + 17 Gravel + 25 Wood</div>
    <div class="item-line">Tech Level 12: 30 Copper Ore + 25 Gravel + 17 Wood</div>
  </div>
</div>
</div>


<!-- Meat Drier -->
<div id="survivalOutput" class="output" style="display:none;"></div>
<div class="item-card">
  <div class="item-header">
    Meat Drier
    <span class="item-arrow">▶</span>
  </div>
  <div class="item-content">
    <div class="item-line">Tech Level 1: 9 Iron Ingot + 13 Metal Scraps + 17 Wood</div>
    <div class="item-line">Tech Level 8: 6 Iron Ingot + 8 Metal Scraps + 17 Wood</div>
    <div class="item-line">Tech Level 12: 9 Iron Ingot + 8 Metal Scraps + 17 Wood</div>
  </div>
</div>
 
<!-- Treatment -->
<div class="item-card">
  <div class="item-header">
    Treatment
    <span class="item-arrow">▶</span>
  </div>
  <div class="item-content">
    <div class="item-line">Tech Level 1: 1 Detoxident + 1 Glass + 5 Rubber + 1 Acid + 1 Boiled Water</div>
    <div class="item-line">Tech Level 8: 1 Detoxident + 1 Glass + 3 Rubber + 1 Acid + 1 Boiled Water</div>
    <div class="item-line">Tech Level 12: 1 Detoxident + 1 Glass + 5 Rubber + 1 Acid + 1 Boiled Water</div>
  </div>
</div>


</div>
</div>
Line 158: Line 115:


<!-- ================= BUILD ================= -->
<!-- ================= BUILD ================= -->
<div id="slot4" class="mw-tab-content">
<div id="slot4" class="mw-tab-content"></div>
Build content goes here
</div>


</div>
</div>
Line 167: Line 122:
/* TAB SYSTEM */
/* TAB SYSTEM */
document.querySelectorAll('.mw-tab-btn').forEach(btn => {
document.querySelectorAll('.mw-tab-btn').forEach(btn => {
   btn.addEventListener('click', () => {
   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'));
Line 173: Line 128:
     btn.classList.add('active');
     btn.classList.add('active');
     document.getElementById(btn.dataset.tab).classList.add('active');
     document.getElementById(btn.dataset.tab).classList.add('active');
   });
   };
});
});


/* DROPDOWN CARDS (AUTO-CLOSE) */
/* DATA */
document.querySelectorAll('.item-card').forEach(card => {
const survivalData = {
   card.addEventListener('click', () => {
   stove: {
     const isActive = card.classList.contains('active');
    title: "Primary Stove",
    lines: [
      "Tech Level 1: 29 Copper Ore + 17 Gravel + 25 Wood",
      "Tech Level 8: 29 Copper Ore + 17 Gravel + 25 Wood",
      "Tech Level 12: 30 Copper Ore + 25 Gravel + 17 Wood"
    ]
  },
  meat: {
    title: "Meat Drier",
    lines: [
      "Tech Level 1: 9 Iron Ingot + 13 Metal Scraps + 17 Wood",
      "Tech Level 8: 6 Iron Ingot + 8 Metal Scraps + 17 Wood",
      "Tech Level 12: 9 Iron Ingot + 8 Metal Scraps + 17 Wood"
    ]
  },
  treatment: {
     title: "Treatment",
    lines: [
      "Tech Level 1: 1 Detoxident + 1 Glass + 5 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"
    ]
  }
};


    document.querySelectorAll('.item-card').forEach(c => c.classList.remove('active'));
/* DROPDOWN LOGIC */
document.getElementById("survivalSelect").onchange = function () {
  const val = this.value;
  const output = document.getElementById("survivalOutput");


    if (!isActive) {
  if (!val) {
      card.classList.add('active');
    output.style.display = "none";
     }
     return;
   });
  }
});
 
   const item = survivalData[val];
 
  output.innerHTML =
    `<div class="output-title">${item.title}</div>` +
    item.lines.map(line => `<div class="output-line">${line}</div>`).join("");
 
  output.style.display = "block";
};
</script>
</script>


</html>
</html>

Revision as of 08:55, 24 April 2026

Return to Front Page

Survival
Production
Combat
Build

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