bestiary.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">


	<!--
	XML data was compiled by a reddit community for use with the "Fight Club 5" app.
	Google "5e xml files" for more info.

	Feel free to use, edit, and redistribute this as you wish.
	I don't own any of the XML data anyway.

-->

	<title>Bestiary - 5estuff</title>

	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="icon" href="favicon.png">

</head>

<body>
	<header class="hidden-xs hidden-sm">
		<div class="container">

			<h1>Bestiary</h1>
			<p>Search by name on the left, click monster name to display on the right.</p>
		</div>
	</header>
	<nav class="container">
		<ul class="nav nav-pills ">
			<li role="presentation"><a href="index.html">5estuff</a></li>
			<li role="presentation"><a href="rules.html">Rules</a></li>
			<li role="presentation" class="dropdown">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Player Options <span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li role="presentation"><a href="classes.html">Classes</a></li>
					<li role="presentation"><a href="backgrounds.html">Backgrounds</a></li>
					<li role="presentation"><a href="feats.html">Feats</a></li>
					<li role="presentation"><a href="races.html">Races</a></li>
				</ul>
			</li>
			<li role="presentation" class="dropdown">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">DM Tools <span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li role="presentation"><a href="crcalculator.html">CR Calculator</a></li>
					<li role="presentation"><a href="lootgen.html">Loot Generator</a></li>
					<li role="presentation"><a href="loot-tables.html">Loot Tables</a></li>
					<li role="presentation"><a href="templates.html">Templates</a></li>
				</ul>
			</li>
			<li role="presentation" class="dropdown active">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">References <span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li role="presentation" class="active"><a href="bestiary.html">Bestiary</a></li>
					<li role="presentation"><a href="conditions.html">Conditions</a></li>
					<li role="presentation"><a href="items.html">Items</a></li>
					<li role="presentation"><a href="spells.html">Spells</a></li>
				</ul>
			</li>
			<li role="presentation"><a href="statgen.html">Statgen</a></li>
			<li role="presentation" class="dropdown">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Utilities<span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li role="presentation"><a href="converter.html">Stat Block to JSON</a></li>
					<li role="presentation"><a href="editor.html">WYSIWYG Editor</a></li>
				</ul>
			</li>
		</ul>
	</nav>
	<main class="container bodyContent">

		<div class="row">

			<div class="col-sm-6" id="monstercontainer">
				<div class="input-group" style="vertical-align: top;">
					<input type="search" id="search" class="search form-control" placeholder="Find monster...">
					<span class="input-group-btn">
						<button class="btn btn-default" type="button" id="reset">Reset</button>
					</span>
				</div>

				<form id="filtertools" class="form-group" autocomplete="off">
					<select class="sourcefilter">
						<option value="All">All Sources</option>
					</select>
					<select class="3ppfilter">
						<option value="All">Third Party</option>
						<option value="None">No Third Party</option>
						<option value="Only">Third Party Only</option>
					</select>
					<select class="crfilter">
						<option value="All">All CRs</option>
					</select>
					<select class="typefilter">
						<option value="All">All Types</option>
					</select>
					<select class="mountfilter">
						<option value="All">All</option>
					</select>
					<select class="npcfilter">
						<option value="All">All</option>
					</select>
					<span class="sortlabel btn-group">
							<button class="col-xs-4 sort btn btn-default btn-xs" type="button" sort="name" sortby="asc">Name</button>
							<button class="col-xs-2 sort btn btn-default btn-xs" type="button" sort="source" sortby="asc">Source</button>
							<button class="col-xs-3 sort btn btn-default btn-xs" type="button" sort="type" sortby="asc">Type</button>
							<button class="col-xs-3 sort btn btn-default btn-xs" type="button" sort="cr" sortby="asc">CR</button>
						</span>
				</form>
				<ul id="monsters" class="list">

				</ul>
				<hr>
			</div>
			<div class="col-sm-6">
				<img src="" alt="" id="token">
				<table id="stats" class="monster">
					<tr>
						<th class="border" colspan="6"></th>
					</tr>
					<tr>
						<th id="name" colspan="6">Name <span class="source" title="Source book">SRC</source></th>
							</tr>
							<tr>
								<td id="sizetypealignment" colspan="6"><span id="size">Size</span> <span id="type">type</span>, <span id="alignment">alignment</span></td>
					</tr>
					<tr>
						<td><span id='value'></span></td>
					</tr>
					<tr>
						<td class="divider" colspan="6">
							<div></div>
						</td>
					</tr>
					<tr>
						<td colspan="6"><strong>Armor Class</strong> <span id="ac">## (source)</span></td>
					</tr>
					<tr>
						<td colspan="6"><strong>Hit Points</strong> <span id="hp">hp</span></td>
					</tr>
					<tr>
						<td colspan="6"><strong>Speed</strong> <span id="speed">30 ft.</span></td>
					</tr>
					<tr>
						<td class="divider" colspan="6">
							<div></div>
						</td>
					</tr>
					<tr id="abilitynames">
						<th>STR </th>
						<th>DEX </th>
						<th>CON </th>
						<th>INT </th>
						<th>WIS </th>
						<th>CHA </th>
					</tr>
					<tr id="abilityscores">
						<td id="str"><span class="score">10</span> (<span class="mod">0</span>)</td>
						<td id="dex"><span class="score">10</span> (<span class="mod">0</span>)</td>
						<td id="con"><span class="score">10</span> (<span class="mod">0</span>)</td>
						<td id="int"><span class="score">10</span> (<span class="mod">0</span>)</td>
						<td id="wis"><span class="score">10</span> (<span class="mod">0</span>)</td>
						<td id="cha"><span class="score">10</span> (<span class="mod">0</span>)</td>
					</tr>
					<tr>
						<td class="divider" colspan="6">
							<div></div>
						</td>
					</tr>
					<tr>
						<td colspan="6"><strong>Saving Throws</strong> <span id="saves">Str +0</span></td>
					</tr>
					<tr>
						<td colspan="6"><strong>Skills</strong> <span id="skills">Perception +0</span></td>
					</tr>
					<tr>
						<td colspan="6"><strong>Damage Vulnerabilities</strong> <span id="dmgvuln">fire</span></td>
					</tr>
					<tr>
						<td colspan="6"><strong>Damage Resistances</strong> <span id="dmgres">cold</span></td>
					</tr>
					<tr>
						<td colspan="6"><strong>Damage Immunities</strong> <span id="dmgimm">lightning</span></td>
					</tr>
					<tr>
						<td colspan="6"><strong>Condition Immunities</strong> <span id="conimm">exhaustion</span></td>
					</tr>
					<tr>
						<td colspan="6"><strong>Senses</strong> <span id="senses">darkvision 30 ft.</span> passive Perception <span id="pp">10</span></td>
					</tr>
					<tr>
						<td colspan="6"><strong>Languages</strong> <span id="languages">Common</span></td>
					</tr>
					<tr>
						<td colspan="6"><strong>Challenge</strong> <span id="cr">1</span> (<span id="xp">450</span> XP)</td>
					</tr>
					<tr id="traits">
						<td class="divider" colspan="6">
							<div></div>
						</td>
					</tr>
					<tr class="trait">
						<td colspan="6"><span class="name">Trait.</span> <span class="content">Content.</span></td>
					</tr>
					<tr id="actions">
						<td colspan="6"><span>Actions</span></td>
					</tr>
					<tr class="action">
						<td colspan="6"><span class="name">Action.</span> <span class="content">Content.</span></td>
					</tr>
					<tr id="reactions">
						<td colspan="6"><span>Reactions</span></td>
					</tr>
					<tr class="reaction">
						<td colspan="6"><span class="name">Reaction.</span> <span class="content">Content.</span></td>
					</tr>
					<tr id="legendaries">
						<td colspan="6"><span>Legendary Actions</span></td>
					</tr>
					<tr class="legendary">
						<td colspan="6"><span class="name">Action.</span> <span class="content">Content.</span></td>
					</tr>
					<tr>
						<th class="border" colspan="6"></th>
					</tr>
				</table>
				<div id="output"></div>
				<br>
				<button class="btn btn-block btn-default btn-xs" type="button" id="expandcollapse">Toggle Search</button>
			</div>
		</div>
	</main>
	<footer style="text-align: center;" class="container">
		<small>Content tagged with "3pp" is third-party content from books such as Kobold Press' <em>Tome of Beasts</em>. Use at your own risk.</small>
	</footer>

	<script type="text/javascript" src="js/page-bestiary.js"></script>
	<script type="text/javascript" src="data/bestiary.json"></script>
	<script type="text/javascript" src="data/bestiary-tob.json"></script>
	<script type="text/javascript" src="js/droll.js"></script>
	<script type="text/javascript" src="js/list.js"></script>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>


</body>

</html>