89 lines
4.4 KiB
HTML
89 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Fortune Roundtable</title>
|
|
<meta charset="UTF-8"/>
|
|
<link rel="stylesheet" href="./style/style.css"/>
|
|
<link rel="stylesheet" href="./style/fontawesome.min.css"/>
|
|
<script src="./script/jquery-3.3.1.min.js"></script>
|
|
<script src="./script/script.js"></script>
|
|
</head>
|
|
<body onload="loadDataStore()">
|
|
<div id="editor" style="display: grid; grid-template-columns: 1fr 1fr">
|
|
<div id="groupA">
|
|
<p>
|
|
<span id="groupANameDisplay"><i class="fa fa-edit" onclick="renameGroupA()"></i> <span class="groupAName">Group A</span></span>
|
|
<span id="groupANameEdit" style="display: none"><input type="text" value="Group A" id="groupANameField"/><button class="forfa" onclick="saveGroupA()"><i class="fa fa-check"></i></button></span>
|
|
</p>
|
|
<p>Elements:</p>
|
|
<input type="text" id="groupAInput"/>
|
|
<button class="forfa" type="button" onclick="addGroupA()"><i class="fa fa-plus"></i></button>
|
|
<ul id="groupAList">
|
|
<!-- here goes the elements -->
|
|
</ul>
|
|
</div>
|
|
<div id="groupB">
|
|
<p>
|
|
<span id="groupBNameDisplay"><i class="fa fa-edit" onclick="renameGroupB()"></i> <span class="groupBName">Group B</span></span>
|
|
<span id="groupBNameEdit" style="display: none"><input type="text" value="Group B" id="groupBNameField"/><button class="forfa" onclick="saveGroupB()"><i class="fa fa-check"></i></button></span>
|
|
</p>
|
|
<p>Elements:</p>
|
|
<input type="text" id="groupBInput"/>
|
|
<button class="forfa" type="button" onclick="addGroupB()"><i class="fa fa-plus"></i></button>
|
|
<ul id="groupBList">
|
|
<!-- here goes the elements -->
|
|
</ul>
|
|
</div>
|
|
<div id="options">
|
|
<input type="checkbox" id="remFromBOnMatch" onclick="updateOptions()"/><label for="remFromBOnMatch">Remove element from group B when it has a match</label>
|
|
<br/>
|
|
<input type="file" id="fileImport"/>
|
|
<button type="button" onclick="importFile()">Import from file</button>
|
|
<br/>
|
|
<button class="start" onclick="reroll()">Finish</button>
|
|
<button class="start" onclick="reset()">Clear ALL data</button>
|
|
</div>
|
|
</div>
|
|
<div id="roller" style="display: none">
|
|
<div class="roller__base">
|
|
<div class="roller__holder">
|
|
<div id="rollerA" class="roller">
|
|
<!-- here goes group A -->
|
|
</div>
|
|
</div>
|
|
<div class="roller__pointer__holder">
|
|
<div class="roller__pointer">
|
|
</div>
|
|
</div>
|
|
<div class="roller__holder">
|
|
<div id="rollerB" class="roller">
|
|
<!-- here goes group B -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="roll_results" class="roller__results" style="display: none">
|
|
<div id="resA" class="roller__result__label">
|
|
<!-- here goes the result from group A -->
|
|
</div>
|
|
<div id="resB" class="roller__result__label roller__result__label__right">
|
|
<!-- here goes the result from group B -->
|
|
</div>
|
|
<button onclick="reroll()" class="roller__button roller__result__button">Roll again!</button>
|
|
</div>
|
|
<button id="roller_button" type="button" class="roller__button" onclick="roll()">Roll!</button>
|
|
</div>
|
|
<div id="results" style="display: none">
|
|
<table class="resultsTable">
|
|
<thead>
|
|
<tr>
|
|
<th class="groupAName">Group A</th>
|
|
<th class="groupBName">Group B</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="resultsTable">
|
|
<!-- here goes the results -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</body>
|
|
</html> |