Technological Bench: Difference between revisions
No edit summary |
No edit summary |
||
| Line 5: | Line 5: | ||
<div style="max-width:420px; margin:0 auto;"> | <div style="max-width:420px; margin:0 auto;"> | ||
<style> | |||
.mw-tab-buttons { | |||
display: flex; | |||
width: 100%; | |||
background: #0b0f14; | |||
border-radius: 10px; | |||
padding: 4px; | |||
gap: 4px; | |||
} | |||
.mw-tab-btn { | |||
flex: 1; | |||
text-align: center; | |||
padding: 10px 0; | |||
font-weight: 600; | |||
color: #cfd6df; | |||
background: #11161c; | |||
border-radius: 6px; | |||
cursor: pointer; | |||
transition: all 0.15s ease; | |||
white-space: nowrap; | |||
} | |||
.mw-tab-btn:hover { | |||
background: #1a222b; | |||
} | |||
.mw-tab-btn.active { | |||
background: linear-gradient(180deg, #1ec8ff, #0ea5e9); | |||
color: #001018; | |||
box-shadow: 0 0 8px rgba(30,200,255,0.4); | |||
} | |||
.mw-tab-content { | |||
display: none; | |||
padding: 10px 0; | |||
} | |||
.mw-tab-content.active { | |||
display: block; | |||
} | |||
</style> | |||
<!-- TABS --> | <!-- TABS --> | ||
<div class="mw-tab-buttons | <div class="mw-tab-buttons"> | ||
<div class="mw-tab-btn" | <div class="mw-tab-btn active" data-tab="slot1">Survival</div> | ||
<div class="mw-tab-btn" | <div class="mw-tab-btn" data-tab="slot2">Production</div> | ||
<div class="mw-tab-btn" | <div class="mw-tab-btn" data-tab="slot3">Combat</div> | ||
<div class="mw-tab-btn" | <div class="mw-tab-btn" data-tab="slot4">Build</div> | ||
</div> | </div> | ||
<!-- ================= SURVIVAL ================= --> | <!-- ================= SURVIVAL ================= --> | ||
<div id="slot1" class="mw-tab-content"> | <div id="slot1" class="mw-tab-content active"> | ||
<!-- Empty on purpose --> | <!-- Empty on purpose --> | ||
</div> | </div> | ||
| Line 35: | Line 78: | ||
</div> | </div> | ||
<script> | |||
document.querySelectorAll('.mw-tab-btn').forEach(btn => { | |||
btn.addEventListener('click', () => { | |||
// Remove active from all | |||
document.querySelectorAll('.mw-tab-btn').forEach(b => b.classList.remove('active')); | |||
document.querySelectorAll('.mw-tab-content').forEach(c => c.classList.remove('active')); | |||
// Activate clicked | |||
btn.classList.add('active'); | |||
document.getElementById(btn.dataset.tab).classList.add('active'); | |||
}); | |||
}); | |||
</script> | |||
</html> | </html> | ||
Revision as of 08:02, 24 April 2026
Build content goes here