Territory Traits: Difference between revisions
Appearance
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
<html> | |||
<a href="https://ohwikiguide.com">Return to Front Page</a> | |||
<br> | <br> | ||
<a href="https://ohwikiguide.com/index.php/Deviation_Trait_Page">Deviant Trait Page</a> | |||
<br><br> | |||
<br> | |||
<div style="max-width:420px; margin:0 auto;"> | <div style="max-width:420px; margin:0 auto;"> | ||
<style> | |||
/* ===== TABS ===== */ | |||
.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; | |||
} | |||
.mw-tab-btn.active { | |||
background: linear-gradient(180deg, #1ec8ff, #0ea5e9); | |||
color: #001018; | |||
} | |||
/* ===== DROPDOWN UI ===== */ | |||
.dropdown { | |||
width: 100%; | |||
margin-top: 10px; | |||
} | |||
.dropdown select { | |||
width: 100%; | |||
padding: 10px; | |||
background: #11161c; | |||
color: #e6edf3; | |||
border: 1px solid #1f2a35; | |||
border-radius: 8px; | |||
font-size: 14px; | |||
} | |||
/* ===== OUTPUT PANEL ===== */ | |||
.output { | |||
margin-top: 10px; | |||
background: #0d1319; | |||
border: 1px solid #1f2a35; | |||
border-radius: 10px; | |||
padding: 12px; | |||
} | |||
.output-title { | |||
font-weight: 700; | |||
margin-bottom: 8px; | |||
color: #e6edf3; | |||
} | |||
.output-line { | |||
font-size: 13px; | |||
color: #9fb0c3; | |||
padding: 4px 0; | |||
border-top: 1px solid #1a222b; | |||
} | |||
.output-line:first-of-type { | |||
border-top: none; | |||
} | |||
.mw-tab-content { | |||
display: none; | |||
} | |||
.mw-tab-content.active { | |||
display: block; | |||
} | |||
</style> | |||
<!-- TABS --> | |||
<div class="mw-tab-buttons"> | <div class="mw-tab-buttons"> | ||
<div class="mw-tab-btn" data-tab="slot1">Slot 1</div> | <div class="mw-tab-btn active" data-tab="slot1">Slot 1</div> | ||
<div class="mw-tab-btn" data-tab="slot2">Slot 2</div> | <div class="mw-tab-btn" data-tab="slot2">Slot 2</div> | ||
<div class="mw-tab-btn" data-tab="slot3">Slot 3</div> | <div class="mw-tab-btn" data-tab="slot3">Slot 3</div> | ||
</div> | </div> | ||
<!-- ================= SLOT 1 ================= --> | |||
<!-- SLOT 1 --> | <div id="slot1" class="mw-tab-content active"> | ||
<div id="slot1" class="mw-tab-content"> | <div class="dropdown"> | ||
<div class=" | <select id="slot1Select"> | ||
<option value="">Select Trait</option> | |||
"cheer_up" | <option value="cheer_up">Cheer Up</option> | ||
"covert_energy" | <option value="covert_energy">Covert Energy</option> | ||
"feeling_blue" | <option value="feeling_blue">Feeling Blue</option> | ||
"growing_pains" | <option value="growing_pains">Growing Pains</option> | ||
"optimist" | <option value="optimist">Optimist</option> | ||
"power_rewind" | <option value="power_rewind">Power Rewind</option> | ||
"rise_and_shine" | <option value="rise_and_shine">Rise and Shine</option> | ||
"stable_energy" | <option value="stable_energy">Stable Energy</option> | ||
"stable_vitality" | <option value="stable_vitality">Stable Vitality</option> | ||
"upper_hand" | <option value="upper_hand">Upper Hand</option> | ||
"worn_out" | <option value="worn_out">Worn-out</option> | ||
<option value="pumpkin">Pumpkin Lantern (Buzzy Bee)</option> | |||
"pumpkin" | <option value="gold_lightning">Gold Lightning (Electric Eel)</option> | ||
"gold_lightning" | <option value="good_fortune">Optimism – Cat</option> | ||
"good_fortune" | <option value="aquarius">Aquarius (Fetch-A-Lot)</option> | ||
"aquarius" | <option value="golden_toad">Golden Toad</option> | ||
"golden_toad" | <option value="shadow_shroom">Shadow Shroom</option> | ||
"shadow_shroom" | </select> | ||
</div> | |||
<div id="slot1Output" class="output" style="display:none;"></div> | |||
</div> | </div> | ||
<!-- ================= SLOT 2 ================= --> | |||
<!-- SLOT 2 --> | |||
<div id="slot2" class="mw-tab-content"> | <div id="slot2" class="mw-tab-content"> | ||
<div class=" | <div class="dropdown"> | ||
<select id="slot2Select"> | |||
"world_charm" | <option value="">Select Trait</option> | ||
"anti_burnout" | <option value="world_charm">A World of Charm</option> | ||
"devoted" | <option value="anti_burnout">Anti-Burnout</option> | ||
"dream_wild" | <option value="devoted">Devoted Laborer</option> | ||
"hydrophilic" | <option value="dream_wild">Dream Wild</option> | ||
"lazy" | <option value="hydrophilic">Hydrophilic</option> | ||
"living_map" | <option value="lazy">Lazy Bones</option> | ||
"oneplus" | <option value="living_map">Living Map</option> | ||
"panovision" | <option value="oneplus">OnePlus</option> | ||
"slacking" | <option value="panovision">Panovision</option> | ||
"stardust" | <option value="slacking">Slacking Off</option> | ||
"sweet_talk" | <option value="stardust">Stardust Affinity</option> | ||
"overtime" | <option value="sweet_talk">Sweet Talk</option> | ||
"workaholic" | <option value="overtime">Voluntary Overtime</option> | ||
<option value="workaholic">Workaholic</option> | |||
"lunar_oracle" | <option value="lunar_oracle">Lunar Oracle</option> | ||
"daydreaming" | <option value="daydreaming">Daydreaming</option> | ||
"toxicologist" | <option value="toxicologist">Toxicologist</option> | ||
"admiral" | <option value="admiral">Admiral</option> | ||
"diamond_duke" | <option value="diamond_duke">Diamond Duke</option> | ||
"workaholic_lights" | <option value="workaholic_lights">Workaholic – Lights</option> | ||
"gold_speaker" | <option value="gold_speaker">Gold Speaker</option> | ||
</select> | |||
</div> | |||
<div id="slot2Output" class="output" style="display:none;"></div> | |||
</div> | </div> | ||
<!-- ================= SLOT 3 ================= --> | |||
<!-- SLOT 3 --> | |||
<div id="slot3" class="mw-tab-content"> | <div id="slot3" class="mw-tab-content"> | ||
<div class=" | <div class="dropdown"> | ||
<select id="slot3Select"> | |||
"brute_force" | <option value="">Select Trait</option> | ||
"clean" | <option value="brute_force">Brute Force Rules</option> | ||
"extra_load" | <option value="clean">Clean and Hygienic</option> | ||
"feline" | <option value="extra_load">Extra Load</option> | ||
"moonlight" | <option value="feline">Feline Creatures</option> | ||
"top_grunt" | <option value="moonlight">Moonlight Assault</option> | ||
<option value="top_grunt">Top Grunt</option> | |||
</select> | |||
</div> | |||
<div id="slot3Output" class="output" style="display:none;"></div> | |||
</div> | </div> | ||
</div> | </div> | ||
<script> | |||
/* TAB SYSTEM */ | |||
document.querySelectorAll('.mw-tab-btn').forEach(btn => { | |||
btn.onclick = () => { | |||
document.querySelectorAll('.mw-tab-btn').forEach(b => b.classList.remove('active')); | |||
document.querySelectorAll('.mw-tab-content').forEach(c => c.classList.remove('active')); | |||
btn.classList.add('active'); | |||
document.getElementById(btn.dataset.tab).classList.add('active'); | |||
}; | |||
}); | |||
/* DATA */ | |||
const slot1Data = { | |||
cheer_up: { | |||
title: "Cheer Up", | |||
lines: ["Max Mood +30% / +40% / +50%"] | |||
}, | |||
covert_energy: { | |||
title: "Covert Energy", | |||
lines: ["Max Deviant Power +10% to +35%"] | |||
}, | |||
feeling_blue: { | |||
title: "Feeling Blue", | |||
lines: ["Max Mood -5% / -10%"] | |||
}, | |||
growing_pains: { | |||
title: "Growing Pains", | |||
lines: ["Max Power +30–50%; Mood recovery -5%"] | |||
}, | |||
optimist: { | |||
title: "Optimist", | |||
lines: ["Max Mood +15–35%"] | |||
}, | |||
power_rewind: { | |||
title: "Power Rewind", | |||
lines: ["Power recovery +5–10%"] | |||
}, | |||
rise_and_shine: { | |||
title: "Rise and Shine", | |||
lines: ["Mood recovery +5–25%"] | |||
}, | |||
stable_energy: { | |||
title: "Stable Energy", | |||
lines: ["Max Deviant Power +30"] | |||
}, | |||
stable_vitality: { | |||
title: "Stable Vitality", | |||
lines: ["Max Mood +30"] | |||
}, | |||
upper_hand: { | |||
title: "Upper Hand", | |||
lines: ["Convert Mood to Power at 0"] | |||
}, | |||
worn_out: { | |||
title: "Worn-out", | |||
lines: ["Max Power -5% / -10%"] | |||
}, | |||
pumpkin: { | |||
title: "Pumpkin Lantern (Buzzy Bee)", | |||
lines: ["+10% Power"] | |||
}, | |||
gold_lightning: { | |||
title: "Gold Lightning (Electric Eel)", | |||
lines: ["+15% Recovery"] | |||
}, | |||
good_fortune: { | |||
title: "Optimism – Cat", | |||
lines: ["+40% Mood"] | |||
}, | |||
aquarius: { | |||
title: "Aquarius (Fetch-A-Lot)", | |||
lines: ["+30% Recovery"] | |||
}, | |||
golden_toad: { | |||
title: "Golden Toad", | |||
lines: ["+20% Recovery"] | |||
}, | |||
shadow_shroom: { | |||
title: "Shadow Shroom", | |||
lines: ["+40% Energy"] | |||
} | |||
}; | |||
const slot2Data = { | |||
world_charm: { | |||
title: "A World of Charm", | |||
lines: ["10% give +20 Mood"] | |||
}, | |||
anti_burnout: { | |||
title: "Anti-Burnout", | |||
lines: ["20% give +5 Power"] | |||
}, | |||
devoted: { | |||
title: "Devoted Laborer", | |||
lines: ["+20% duration"] | |||
}, | |||
dream_wild: { | |||
title: "Dream Wild", | |||
lines: ["10% give +10 Power"] | |||
}, | |||
hydrophilic: { | |||
title: "Hydrophilic", | |||
lines: ["+30% near water"] | |||
}, | |||
lazy: { | |||
title: "Lazy Bones", | |||
lines: ["-5% speed"] | |||
}, | |||
living_map: { | |||
title: "Living Map", | |||
lines: ["-5% interval"] | |||
}, | |||
oneplus: { | |||
title: "OnePlus", | |||
lines: ["Rare crystals chance"] | |||
}, | |||
panovision: { | |||
title: "Panovision", | |||
lines: ["-10% speed"] | |||
}, | |||
slacking: { | |||
title: "Slacking Off", | |||
lines: ["+5% consumption"] | |||
}, | |||
stardust: { | |||
title: "Stardust Affinity", | |||
lines: ["20% no Mood cost"] | |||
}, | |||
sweet_talk: { | |||
title: "Sweet Talk", | |||
lines: ["20% give Mood"] | |||
}, | |||
overtime: { | |||
title: "Voluntary Overtime", | |||
lines: ["10% no cost"] | |||
}, | |||
workaholic: { | |||
title: "Workaholic", | |||
lines: ["+10% duration"] | |||
}, | |||
lunar_oracle: { | |||
title: "Lunar Oracle", | |||
lines: ["+20% duration"] | |||
}, | |||
daydreaming: { | |||
title: "Daydreaming", | |||
lines: ["Restore Power"] | |||
}, | |||
toxicologist: { | |||
title: "Toxicologist", | |||
lines: ["25% no cost"] | |||
}, | |||
admiral: { | |||
title: "Admiral", | |||
lines: ["3% no cost"] | |||
}, | |||
diamond_duke: { | |||
title: "Diamond Duke", | |||
lines: ["5% no cost"] | |||
}, | |||
workaholic_lights: { | |||
title: "Workaholic – Lights", | |||
lines: ["+20% duration"] | |||
}, | |||
gold_speaker: { | |||
title: "Gold Speaker", | |||
lines: ["Extra ores"] | |||
} | |||
}; | |||
const slot3Data = { | |||
brute_force: { | |||
title: "Brute Force Rules", | |||
lines: ["10% double output"] | |||
}, | |||
clean: { | |||
title: "Clean and Hygienic", | |||
lines: ["Sanity ≥ 20%"] | |||
}, | |||
extra_load: { | |||
title: "Extra Load", | |||
lines: ["+15% storage"] | |||
}, | |||
feline: { | |||
title: "Feline Creatures", | |||
lines: ["Extra lightweight item"] | |||
}, | |||
moonlight: { | |||
title: "Moonlight Assault", | |||
lines: ["+15% at night"] | |||
}, | |||
top_grunt: { | |||
title: "Top Grunt", | |||
lines: ["Convert Mood to Energy"] | |||
} | |||
}; | |||
/* DROPDOWN LOGIC */ | |||
function bindDropdown(selectId, outputId, data) { | |||
document.getElementById(selectId).onchange = function () { | |||
const val = this.value; | |||
const output = document.getElementById(outputId); | |||
if (!val) { | |||
output.style.display = "none"; | |||
return; | |||
} | |||
const item = data[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"; | |||
}; | |||
} | |||
bindDropdown("slot1Select", "slot1Output", slot1Data); | |||
bindDropdown("slot2Select", "slot2Output", slot2Data); | |||
bindDropdown("slot3Select", "slot3Output", slot3Data); | |||
</script> | |||
</html> | |||