134 lines
6.6 KiB
HTML
134 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>My Spells 5e</title>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.teal-pink.min.css" />
|
|
<link rel="stylesheet" href="./app.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
|
|
<header class="mdl-layout__header">
|
|
<div class="mdl-layout__header-row">
|
|
<div class="mdl-layout-spacer"></div>
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
|
|
<label class="mdl-button mdl-js-button mdl-button--icon" for="fixed-header-drawer-exp">
|
|
<i class="material-icons">search</i>
|
|
</label>
|
|
<div class="mdl-textfield__expandable-holder">
|
|
<input class="mdl-textfield__input" data-action-search type="text" name="sample" id="fixed-header-drawer-exp" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<aside class="mdl-layout__drawer">
|
|
<span class="mdl-layout-title">My Spells</span>
|
|
<nav class="mdl-navigation">
|
|
<form id="class-list">
|
|
</form>
|
|
</nav>
|
|
</aside>
|
|
<main class="mdl-layout__content">
|
|
<div class="page-content">
|
|
<form id="form-spells">
|
|
<table class="mdl-data-table mdl-shadow--2dp">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="table-header">
|
|
<input type="checkbox" id="table-header" class="mdl-checkbox__input" />
|
|
</label>
|
|
</th>
|
|
<th>Level</th>
|
|
<th class="mdl-data-table__cell--non-numeric">Name</th>
|
|
<th class="mdl-data-table__cell--non-numeric">School</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="spell-list">
|
|
<tr>
|
|
<td colspan="2">
|
|
<div id="loader" class="mdl-spinner mdl-js-spinner is-active"></div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<dialog class="mdl-dialog card">
|
|
<article id="spell-detail-container"></article>
|
|
</dialog>
|
|
|
|
|
|
<!-- SPELL DETAILS -->
|
|
<script id="spell-detail" type="x-template">
|
|
<div class="mdl-card">
|
|
<div class="mdl-card__title mdl-color--pink-600 mdl-color-text--white">
|
|
<h2 class="mdl-card__title-text" data-id-spelldetail="name"></h2>
|
|
</div>
|
|
<div class="mdl-card__supporting-text">
|
|
<p data-id-spelldetail="classes"></p>
|
|
<p data-id-spelldetail="description"></p>
|
|
|
|
<div class="left">
|
|
<div data-id-spelldetail="level"></div>
|
|
<div data-id-spelldetail="castingtime"></div>
|
|
<div data-id-spelldetail="duration"></div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="right" data-id-spelldetail="range"></div>
|
|
<ul class="right clear" data-id-spelldetail="components"></ul>
|
|
<div class="clear" data-id-spelldetail="materials"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mdl-card__menu">
|
|
<button data-action-close class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
|
|
<i class="material-icons mdl-color-text--white">close</i>
|
|
</button>
|
|
</div>
|
|
<footer class="mdl-card__actions mdl-card--border">
|
|
<label data-action-select class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
|
|
<input type="checkbox" class="mdl-checkbox__input">
|
|
</label>
|
|
<!--<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">-->
|
|
<!--TODO-->
|
|
<!--</a>-->
|
|
</footer>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- SPELL -->
|
|
<script id="spell-item" type="x-template">
|
|
<tr data-action-dialog>
|
|
<td>
|
|
<label data-id-spellitem="checklabel" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select dontprop">
|
|
<input type="checkbox" name="id" value="" data-id-spellitem="checkbox" class="mdl-checkbox__input dontprop" />
|
|
</label>
|
|
</td>
|
|
<td data-id-spellitem="level"></td>
|
|
<td class="mdl-data-table__cell--non-numeric">
|
|
<strong data-id-spellitem="name"></strong>
|
|
</td>
|
|
<td data-id-spellitem="school" class="mdl-data-table__cell--non-numeric"></td>
|
|
</tr>
|
|
</script>
|
|
|
|
<script id="class-toggle" type="x-template">
|
|
<label class="mdl-navigation__link">
|
|
<div class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
|
|
<input data-action-classtoggle name="class" type="checkbox" class="mdl-switch__input">
|
|
<span data-id-classtoggle="name" class="mdl-switch__label"></span>
|
|
</div>
|
|
</label>
|
|
</script>
|
|
|
|
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
|
|
<script src="./app.js"></script>
|
|
</body>
|
|
</html>
|