Gear Hides Test - Revision history

Bones at 17:49, 24 April 2026

2026-04-24T17:49:14Z

Bones at 17:36, 24 April 2026

2026-04-24T17:36:08Z

@@ Line 109: / Line 109: @@
 <!-- BOTTOMS -->
 <div id="t3" class="mw-tab-content">
-   <div class="dropdown"><select id="bottomsSelect">
+   <div class="dropdown"><select id="bottomsSelect"><option value="">Select Item</option></select></div>
    <div id="bottomsOutput" class="output" style="display:none;"></div>
 </div>
@@ Line 261: / Line 220: @@
 bindDropdown("helmetSelect", "helmetOutput", helmetData);
 bindDropdown("topSelect",    "topOutput",    topData);
 </script>
 </html>

Bones at 17:33, 24 April 2026

2026-04-24T17:33:43Z

← Older revision		Revision as of 13:33, 24 April 2026
Line 261:		Line 261:
	bindDropdown("helmetSelect", "helmetOutput", helmetData);		bindDropdown("helmetSelect", "helmetOutput", helmetData);
	bindDropdown("topSelect", "topOutput", topData);		bindDropdown("topSelect", "topOutput", topData);
			bindDropdown("bottomsSelect", "bottomsOutput", bottomsData);
	</script>		</script>

	</html>		</html>

Bones at 17:33, 24 April 2026

2026-04-24T17:33:11Z

@@ Line 109: / Line 109: @@
 <!-- BOTTOMS -->
 <div id="t3" class="mw-tab-content">
-   <div class="dropdown"><select id="bottomsSelect"><option value="">Select Item</option></select></div>
+   <div class="dropdown"><select id="bottomsSelect">
    <div id="bottomsOutput" class="output" style="display:none;"></div>
 </div>

Bones at 17:29, 24 April 2026

2026-04-24T17:29:20Z

Show changes

Bones at 17:25, 24 April 2026

2026-04-24T17:25:58Z

Show changes

Bones at 17:24, 24 April 2026

2026-04-24T17:24:14Z

@@ Line 12: / Line 12: @@
 .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{margin-top:10px;background:#0d1319;border:1px solid #1f2a35;border-radius:10px;padding:12
+.output{margin-top:10px;background:#0d1319;border:1px solid #1f2a35;border-radius:10px;padding:12px;}

Bones at 17:24, 24 April 2026

2026-04-24T17:24:00Z

@@ Line 1: / Line 1: @@
 <a href="https://ohwikiguide.com">Return to Front Page</a>
 <br><br>
@@ Line 5: / Line 7: @@
 <style>
-.mw-tab-buttons {
+.mw-tab-buttons{display:flex;width:100%;background:#0b0f14;border-radius:10px;padding:4px;gap:4px;}
-  display: flex;
+.mw-tab-btn{flex:1;text-align:center;padding:10px 0;font-weight:600;color:#cfd6df;background:#11161c;border-radius:6px;cursor:pointer;font-size:12px;}
-  gap: 6px;
+.mw-tab-btn.active{background:linear-gradient(180deg,#1ec8ff,#0ea5e9);color:#001018;}
-  margin-bottom: 10px;
+.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{margin-top:10px;background:#0d1319;border:1px solid #1f2a35;border-radius:10px;padding:12

Bones at 17:23, 24 April 2026

2026-04-24T17:23:02Z

← Older revision		Revision as of 13:23, 24 April 2026
Line 15:		Line 15:
	text-align: center;		text-align: center;
	padding: 8px 0;		padding: 8px 0;
	background: #~~11161c~~;		background: #111;
	border: 1px solid #~~1f2a35~~;		border: 1px solid #444;
	border-radius: 6px;		border-radius: 6px;
	color: #~~cfd6df~~;		color: #ccc;
	cursor: pointer;		cursor: pointer;
	font-weight: ~~600~~;		font-weight: bold;
	}		}

	.mw-tab-btn.active {		.mw-tab-btn.active {
	background: #~~1ec8ff~~;		background: #00bfff;
	color: #~~001018~~;		color: #000;
	}		}

	.mw-tab-content { display: none~~; }~~		.mw-tab-content {
	~~.mw-tab-content.active { display: block; }~~		display: none;

	~~.mw-ui-select {~~
	~~width: 100%;~~
	~~padding: 10px;~~
	~~background: #11161c;~~
	~~color: #e6edf3;~~
	~~border: 1px solid #1f2a35;~~
	~~border-radius: 6px~~;
	}		}

	.mw-ui-~~output~~ {		.mw-tab-content.active {
	~~margin-top: 10px;~~		display: block;
	~~background: #0d1319;~~
	~~border: 1px solid #1f2a35;~~
	~~border-radius: 10px;~~
	~~padding~~: ~~12px~~;
	}		}

	~~.mw-ui-title {~~
	~~font-weight: 700;~~
	~~margin-bottom: 8px;~~
	}

	~~.mw-ui-line {~~
	~~padding: 6px 0;~~
	~~border-top: 1px solid #1a222b;~~
	}
	~~.mw-ui-line:first-child { border-top: none; }~~
	</style>		</style>

	~~<!-- TABS -->~~
	<div class="mw-tab-buttons">		<div class="mw-tab-buttons">
	<div class="mw-tab-btn active" data-tab="helmet">Helmet</div>		<div class="mw-tab-btn active" data-tab="helmet">Helmet</div>
Line 70:		Line 46:
	</div>		</div>

	~~<!-- HELMET -->~~		<div id="helmet" class="mw-tab-content active">Helmet</div>
	<div id="helmet" class="mw-tab-content active">		<div id="top" class="mw-tab-content">Top</div>
	~~<select id="helmetSelect" class="mw-ui-select">~~		<div id="bottoms" class="mw-tab-content">Bottoms</div>
	~~<option value="">Select~~ Helmet~~</option>~~		<div id="gloves" class="mw-tab-content">Gloves</div>
	~~</select>~~		<div id="boots" class="mw-tab-content">Boots</div>
			<div id="mask" class="mw-tab-content">Mask</div>
	~~<div id="helmetOutput" class="mw-ui-output" style="display:none;"></div>~~
	</div>

	~~<!-- OTHER TABS (EMPTY FOR NOW) --~~>
	<div id="top" class="mw-tab-content"></div>
	<div id="bottoms" class="mw-tab-content"></div>
	<div id="gloves" class="mw-tab-content"></div>
	<div id="boots" class="mw-tab-content"></div>
	<div id="mask" class="mw-tab-content"></div>

	</div>		</div>

	<script>		<script>
	~~/* TAB SYSTEM */~~
	document.querySelectorAll('.mw-tab-btn').forEach(btn => {		document.querySelectorAll('.mw-tab-btn').forEach(btn => {
	btn.onclick = () => {		btn.onclick = () => {

Bones at 17:21, 24 April 2026

2026-04-24T17:21:39Z

← Older revision		Revision as of 13:21, 24 April 2026
Line 60:		Line 60:
	</style>		</style>

			<!-- TABS -->
	<div class="mw-tab-buttons">		<div class="mw-tab-buttons">
	<div class="mw-tab-btn active" data-tab="helmet">Helmet</div>		<div class="mw-tab-btn active" data-tab="helmet">Helmet</div>
Line 69:		Line 70:
	</div>		</div>

			<!-- HELMET -->
	<div id="helmet" class="mw-tab-content active">		<div id="helmet" class="mw-tab-content active">
	<select id="helmetSelect" class="mw-ui-select">		<select id="helmetSelect" class="mw-ui-select">
	<option value="">Select Helmet</option>		<option value="">Select Helmet</option>
	~~<option value="bear">Bear Skin</option>~~
	~~<option value="cowhide">Cowhide</option>~~
	~~<option value="hide">Hide</option>~~
	</select>		</select>

	<div id="helmetOutput" class="mw-ui-output" style="display:none;"></div>		<div id="helmetOutput" class="mw-ui-output" style="display:none;"></div>
	</div>		</div>

	<div id="top" class="mw-tab-content">~~Top content~~</div>		<!-- OTHER TABS (EMPTY FOR NOW) -->
	<div id="bottoms" class="mw-tab-content">~~Bottoms content~~</div>		<div id="top" class="mw-tab-content"></div>
	<div id="gloves" class="mw-tab-content">~~Gloves content~~</div>		<div id="bottoms" class="mw-tab-content"></div>
	<div id="boots" class="mw-tab-content">~~Boots content~~</div>		<div id="gloves" class="mw-tab-content"></div>
	<div id="mask" class="mw-tab-content">~~Mask content~~</div>		<div id="boots" class="mw-tab-content"></div>
			<div id="mask" class="mw-tab-content"></div>

	</div>		</div>

	<script>		<script>
			/* TAB SYSTEM */
	document.querySelectorAll('.mw-tab-btn').forEach(btn => {		document.querySelectorAll('.mw-tab-btn').forEach(btn => {
	btn.onclick = () => {		btn.onclick = () => {
Line 96:		Line 98:
	};		};
	});		});

	~~const helmetData = {~~
	~~bear: ["Fullness DMG Reduction", "DMG Reduction +3% when Energy is at 100"],~~
	~~cowhide: ["Crit DMG Reduction +7%"],~~
	~~hide: ["Max HP +100"]~~
	};

	~~document.getElementById("helmetSelect").onchange = function () {~~
	~~const val = this.value;~~
	~~const output = document.getElementById("helmetOutput");~~

	~~if (!val) {~~
	~~output.style.display = "none";~~
	~~return;~~
	}

	~~const lines = helmetData[val];~~

	~~output.innerHTML =~~
	~~`<div class="mw-ui-title">${this.options[this.selectedIndex].text}</div>` +~~
	~~lines.map(l => `<div class="mw-ui-line">${l}</div>`).join("");~~

	~~output.style.display = "block";~~
	};
	</script>		</script>