Widget:Calculator/Combat/Level: Difference between revisions

No edit summary
No edit summary
Line 1: Line 1:
<html>
<html>
<form id="lookup-form" style="margin-bottom: 20px;">
<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">
   <label>Hitpoints: <input type="number" id="stat-hp" value="10" min="1" max="100" /></label><br />
   <table id="combat-table">
  <label>Accuracy: <input type="number" id="stat-accuracy" value="1" min="1" max="100" /></label><br />
    <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>
  <label>Strength: <input type="number" id="stat-strength" value="1" min="1" max="100" /></label><br />
    <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>
  <label>Defense: <input type="number" id="stat-defense" value="1" min="1" max="100" /></label><br />
    <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>
  <label>Magic: <input type="number" id="stat-magic" value="1" min="1" max="100" /></label><br />
    <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>
  <label>Range: <input type="number" id="stat-range" value="1" min="1" max="100" /></label><br /><br />
    <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">
  <div id="level-hints" style="margin-top: 10px; font-style: italic; color: #555;">—</div>
    <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>