Widget:Calculator/Combat/Level: Difference between revisions
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
<html> | <html> | ||
<form | <style> | ||
#combat-table { | |||
border-collapse: collapse; | |||
margin-top: 10px; | |||
} | |||
#combat-table td { | |||
padding: 6px 10px; | |||
} | |||
#combat-table input { | |||
width: 60px; | |||
} | |||
.results-box { | |||
margin-top: 20px; | |||
padding: 10px; | |||
background-color: #1e1e1e; | |||
color: #ccc; | |||
border: 1px solid #333; | |||
border-radius: 5px; | |||
max-width: 400px; | |||
} | |||
.results-box b { | |||
color: #fff; | |||
} | |||
#lookup-form input[type="text"] { | |||
width: 200px; | |||
} | |||
#lookup-form button { | |||
background-color: #2ecc71; | |||
color: white; | |||
border: none; | |||
padding: 4px 10px; | |||
cursor: pointer; | |||
margin-left: 5px; | |||
border-radius: 3px; | |||
} | |||
#lookup-form button:hover { | |||
background-color: #27ae60; | |||
} | |||
input[type="text"], #lookup-form input[type="text"] { | |||
background-color: var(--bg-main, #1e1f22); | |||
color: var(--text-main, #b6b4b2); | |||
border: 1px solid var(--border-color-base, #2d2d2d); | |||
border-radius: 4px; | |||
padding: 6px 8px; | |||
font-size: 14px; | |||
width: 200px; | |||
box-sizing: border-box; | |||
} | |||
</style> | |||
<form id="lookup-form"> | |||
<label> | <label> | ||
Username: | HighSpell Username: | ||
<input type="text" id="username" placeholder="Enter player name" /> | <input type="text" id="username" placeholder="Enter player name" /> | ||
<button type="button" onclick="lookupStats()">Lookup</button> | <button type="button" onclick="lookupStats()">Lookup</button> | ||
Line 9: | Line 68: | ||
<form id="combat-form"> | <form id="combat-form"> | ||
< | <table id="combat-table"> | ||
<tr><td><span typeof="mw:File"><a href="/w/Hitpoints" title="Hitpoints"><img src="/w/images/thumb/9/96/Hitpoints_icon.png/20px-Hitpoints_icon.png" decoding="async" width="20" height="20" class="mw-file-element" srcset="/w/images/9/96/Hitpoints_icon.png 1.5x" loading="lazy"></a></span> <a href="/w/Hitpoints" title="Hitpoints">Hitpoints</a>:</td><td><input type="number" id="stat-hp" value="10" min="1" max="100" /></td></tr> | |||
<tr><td><span typeof="mw:File"><a href="/w/Accuracy" title="Accuracy"><img src="/w/images/thumb/d/df/Accuracy_icon.png/20px-Accuracy_icon.png" decoding="async" width="20" height="20" class="mw-file-element" srcset="/w/images/d/df/Accuracy_icon.png 1.5x" loading="lazy"></a></span> <a href="/w/Accuracy" title="Accuracy">Accuracy</a>:</td><td><input type="number" id="stat-accuracy" value="1" min="1" max="100" /></td></tr> | |||
<tr><td><span typeof="mw:File"><a href="/w/Accuracy" title="Accuracy"><img src="/w/images/thumb/d/df/Accuracy_icon.png/20px-Accuracy_icon.png" decoding="async" width="20" height="20" class="mw-file-element" srcset="/w/images/d/df/Accuracy_icon.png 1.5x" loading="lazy"></a></span> <a href="/w/Strength" title="Strength">Strength</a>:</td><td><input type="number" id="stat-strength" value="1" min="1" max="100" /></td></tr> | |||
<tr><td><span typeof="mw:File"><a href="/w/Defense" title="Defense"><img src="/w/images/thumb/e/e5/Defense_icon.png/20px-Defense_icon.png" decoding="async" width="20" height="20" class="mw-file-element" srcset="/w/images/e/e5/Defense_icon.png 1.5x" loading="lazy"></a></span> <a href="/w/Defense" title="Defense">Defense</a>:</td><td><input type="number" id="stat-defense" value="1" min="1" max="100" /></td></tr> | |||
<tr><td><span typeof="mw:File"><a href="/w/Magic" title="Magic"><img src="/w/images/thumb/5/5c/Magic_icon.png/20px-Magic_icon.png" decoding="async" width="20" height="20" class="mw-file-element" srcset="/w/images/5/5c/Magic_icon.png 1.5x" loading="lazy"></a></span> <a href="/w/Magic" title="Magic">Magic</a>:</td><td><input type="number" id="stat-magic" value="1" min="1" max="100" /></td></tr> | |||
<tr><td><span typeof="mw:File"><a href="/w/Range" title="Range"><img src="/w/images/thumb/1/13/Range_icon.png/20px-Range_icon.png" decoding="async" width="20" height="20" class="mw-file-element" srcset="/w/images/1/13/Range_icon.png 1.5x" loading="lazy"></a></span> <a href="/w/Range" title="Range">Range</a>:</td><td><input type="number" id="stat-range" value="1" min="1" max="100" /></td></tr> | |||
</table> | |||
<b>Combat Level:</b> <span id="combat-result">—</span><br /> | <div class="results-box"> | ||
<b>Combat Level:</b> <span id="combat-result">—</span><br /> | |||
<div id="level-hints" style="margin-top: 6px; font-style: italic;">—</div> | |||
</div> | |||
</form> | </form> | ||