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 27: Line 27:
   cursor: pointer;
   cursor: pointer;
   transition: all 0.15s ease;
   transition: all 0.15s ease;
  white-space: nowrap;
}
}


Line 49: Line 48:
}
}


/* ===== GAME ITEM CARD ===== */
/* ===== DROPDOWN CARD ===== */
.item-card {
.item-card {
   background: #11161c;
   background: #11161c;
   border: 1px solid #1f2a35;
   border: 1px solid #1f2a35;
   border-radius: 10px;
   border-radius: 10px;
  padding: 12px;
   margin-bottom: 10px;
   margin-bottom: 10px;
   box-shadow: 0 0 6px rgba(0,0,0,0.4);
   overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}
}


.item-title {
.item-header {
  padding: 12px;
   font-weight: 700;
   font-weight: 700;
  font-size: 15px;
   color: #e6edf3;
   color: #e6edf3;
   margin-bottom: 8px;
   display: flex;
  justify-content: space-between;
  align-items: center;
}
 
.item-card:hover {
  background: #141b22;
}
 
.item-arrow {
  transition: transform 0.2s ease;
}
 
.item-card.active .item-arrow {
  transform: rotate(90deg);
}
 
.item-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  background: #0d1319;
}
 
.item-card.active .item-content {
  max-height: 300px;
}
}


Line 69: Line 94:
   font-size: 13px;
   font-size: 13px;
   color: #9fb0c3;
   color: #9fb0c3;
   padding: 4px 0;
   padding: 8px 12px;
   border-top: 1px solid #1a222b;
   border-top: 1px solid #1a222b;
}
.item-line:first-of-type {
  border-top: none;
}
}
</style>
</style>
Line 90: Line 111:


<div class="item-card">
<div class="item-card">
   <div class="item-title">Primary Stove</div>
   <div class="item-header">
    Primary Stove
    <span class="item-arrow">▶</span>
  </div>


   <div class="item-line">Tech Level 1: 29 Copper Ore + 17 Gravel + 25 Wood</div>
   <div class="item-content">
  <div class="item-line">Tech Level 8: 29 Copper Ore + 17 Gravel + 25 Wood</div>
    <div class="item-line">Tech Level 1: 29 Copper Ore + 17 Gravel + 25 Wood</div>
  <div class="item-line">Tech Level 12: 30 Copper Ore + 25 Gravel + 17 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>


Line 100: Line 126:


<!-- ================= PRODUCTION ================= -->
<!-- ================= PRODUCTION ================= -->
<div id="slot2" class="mw-tab-content">
<div id="slot2" class="mw-tab-content"></div>
</div>


<!-- ================= COMBAT ================= -->
<!-- ================= COMBAT ================= -->
<div id="slot3" class="mw-tab-content">
<div id="slot3" class="mw-tab-content"></div>
</div>


<!-- ================= BUILD ================= -->
<!-- ================= BUILD ================= -->
Line 115: Line 139:


<script>
<script>
/* TAB SYSTEM */
document.querySelectorAll('.mw-tab-btn').forEach(btn => {
document.querySelectorAll('.mw-tab-btn').forEach(btn => {
   btn.addEventListener('click', () => {
   btn.addEventListener('click', () => {
Line 122: Line 147:
     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 */
document.querySelectorAll('.item-card').forEach(card => {
  card.addEventListener('click', () => {
    card.classList.toggle('active');
   });
   });
});
});

Revision as of 08:06, 24 April 2026

Return to Front Page

Survival
Production
Combat
Build
Primary Stove ▶
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
Build content goes here

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