SlayerWeightCalculator/index.html
2019-04-26 14:48:29 +02:00

102 lines
4.9 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Slayer Calc</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/datatables.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/datatables.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>Slayer task weights</h1>
<p>A calculator for slayer geeks that need to know percentages.</p>
</div>
<div class="container">
<ul class="nav nav-tabs justify-content-center mx-auto ">
<li class="nav-item"><a data-toggle="tab" class="nav-link active" href="#" onclick="applyChanges('krystilia');return false;">Krystilia</a></li>
<li><a data-toggle="tab" class="nav-link" href="#" onclick="applyChanges('turael');return false;">Turael</a></li>
<li><a data-toggle="tab" class="nav-link" href="#" onclick="applyChanges('mazchna');return false;">Mazchna</a></li>
<li><a data-toggle="tab" class="nav-link" href="#" onclick="applyChanges('vannaka');return false;">Vannaka</a></li>
<li><a data-toggle="tab" class="nav-link" href="#" onclick="applyChanges('konar');return false;">Konar quo Maten</a></li>
<li><a data-toggle="tab" class="nav-link" href="#" onclick="applyChanges('chaeldar');return false;">Chaeldar</a></li>
<li><a data-toggle="tab" class="nav-link" href="#" onclick="applyChanges('nieve');return false;">Nieve/Steve</a></li>
<li><a data-toggle="tab" class="nav-link" href="#" onclick="applyChanges('duradel');return false;">Duradel</a></li>
</ul>
<div class="row">
<div class="col">
<h3>Slayer settings</h3>
</div>
</div>
<div class="row">
<div class="col-6">
<p>Unlocks:</p>
<form>
<ul>
<li><label><input type="checkbox" name="reddrags" id="reddrags">
Seeing red (Unlocks Red Dragons)</label></li>
<li><label><input type="checkbox" name="mithdrags" id="mithdrags">
I hope you mith me (Unlocks Mithril Dragons)</label></li>
<li><label><input type="checkbox" name="aviansies" id="aviansies">
Watch the birdie (Unlocks Aviansies)</label></li>
<li><label><input type="checkbox" name="tzhaar" id="tzhaar">
Hot stuff (Unlocks TzHaars)</label></li>
<li><label><input type="checkbox" name="lizardmen" id="lizardmen">
Reptile got ripped (Unlocks Lizardmen)</label></li>
<li><label><input type="checkbox" name="bosses" id="bosses">
Like a boss (Unlocks Bosses)</label></li>
<li><label><input type="checkbox" name="fossilwyverns" id="fossilwyverns">
Stop the Wyvern (Disables Fossil Island Wyverns)</label></li>
</ul>
</form>
</div>
<div class="col-6">
<p>Task blocks:</p>
<div id="blocklist">
<ol>
<li> <select class="blocktask"><option value=""></option></select> (50 QP)</li>
<li> <select class="blocktask"><option value=""></option></select> (100 QP)</li>
<li> <select class="blocktask"><option value=""></option></select> (150 QP)</li>
<li> <select class="blocktask"><option value=""></option></select> (200 QP)</li>
<li> <select class="blocktask"><option value=""></option></select> (250 QP)</li>
<li> <select class="blocktask"><option value=""></option></select> (Quest Cape)</li>
</ol>
</div>
</div>
<div class="col-6 text-center">
Slayer level:
<input type="text" min="1" max="99" name="slayerlevel" id="slayerlevel" maxlength="2" placeholder="99" value="99">
</div>
<div class="col-6 text-center">
<input type="submit" value="Apply changes" onclick="applyChanges(currentMaster)">
</div>
</div>
<div class="row">
<div class="col">
<h3 id="mastertitle"></h3>
<table id="master" class="display nowrap" width="100%">
<thead>
<tr>
<th>Monster</th>
<th>Task weight</th>
<th>Chance</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>