* This is step toward implementing #14 in that it shows you a list of the items which need to be crafted. However, it still doesn't show you the steps and proper order in which to craft everything.
112 lines
5.1 KiB
HTML
112 lines
5.1 KiB
HTML
<!doctype html5!>
|
|
<html>
|
|
<head>
|
|
<title>Crafting Guide</title>
|
|
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Press+Start+2P'/>
|
|
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
|
|
<link rel="stylesheet" type="text/css" href="css/text.css"/>
|
|
<link rel="stylesheet" type="text/css" href="css/960.css"/>
|
|
<link rel="stylesheet" type="text/css" href="css/main.css"/>
|
|
</head>
|
|
|
|
<body class="container_12">
|
|
<div id="body" class="grid_12">
|
|
<div id="header" class="grid_12 alpha omega">
|
|
<h1><img src="images/workbench_front.png"> Crafting Guide</h1>
|
|
</div> <!-- #header -->
|
|
<div id="border_stone" class="grid_12 alpha omega"> </div>
|
|
|
|
<div id="recipebooks" class="grid_12 alpha omega">
|
|
<h1><img src="images/bookshelf.png"> Recipe Books</h1>
|
|
<table id="recipebook_table" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td> </td>
|
|
<td>
|
|
<input id="recipebook_url" placeholder="enter a URL to load another recipe book..."></input>
|
|
<button id="recipebook_load_button">Load</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<p id="load_error" class="error"></p>
|
|
</div> <!-- #recipe_books -->
|
|
|
|
<div id="crafting" class="hidden">
|
|
<h1><img src="images/workbench_top.png"> Crafting</h1>
|
|
<p>Choose a recipe:
|
|
<select id="crafting_count">
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="4">4</option>
|
|
<option value="8">8</option>
|
|
<option value="16">16</option>
|
|
<option value="32">32</option>
|
|
<option value="64">64</option>
|
|
</select>
|
|
<select id="crafting_selector" disabled></select>
|
|
</p>
|
|
<table id="crafting_output" class="hidden" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<th width="33%">You need to find:</th>
|
|
<th width="34%">You need to make:</th>
|
|
<th width="33%">You'll end up with:</th></tr>
|
|
<tr>
|
|
<td id="missing_materials"> </td>
|
|
<td id="crafted_items"> </td>
|
|
<td id="leftover_materials"> </td>
|
|
</tr>
|
|
</table>
|
|
<div id="crafting_error" class="error"></div>
|
|
</div> <!-- #crafting -->
|
|
|
|
<div id="border_grass" class="grid_12 alpha omega"> </div>
|
|
<div id="footer" class="grid_12 alpha omega">
|
|
<div class="grid_4 alpha">
|
|
<h2>About</h2>
|
|
<p>Crafting Guide shows you what materials you need to craft even the most complex items, including all the
|
|
tools you'd need (from a crafting table to an industrial centrifuge).</p>
|
|
<p>If you have any questions, comments or requests, feel free to <a
|
|
href="https://github.com/andrewminer/crafting-guide/issues/new">create an issue</a> on GitHub or <a
|
|
href="mailto:andrewminer-at-mac.com">email me</a>.</p>
|
|
</div>
|
|
<div class="grid_4">
|
|
<h2>Donate</h2>
|
|
<p>Crafting Guide is free for all, but if you find it helpful, donations in any amount are gratefully
|
|
accepted.</p>
|
|
<br><br>
|
|
<form action="https://www.paypal.com/cgi-bin/webscr" class="centered" method="post" target="_top">
|
|
<input type="hidden" name="cmd" value="_s-xclick">
|
|
<input type="hidden" name="hosted_button_id" value="GCB2TYZJYLAE6">
|
|
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0"
|
|
name="submit" alt="PayPal - The safer, easier way to pay online!">
|
|
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
|
|
</form>
|
|
</div> <!-- .grid_4 -->
|
|
<div class="grid_4 omega">
|
|
<h2>Get Involved</h2>
|
|
<p>Crafting Guide is completely open-source, and you can help! Whether you want to write a recipe book (all
|
|
simple JSON), or implement new features, just head over to GitHub to get started.</p>
|
|
<p class="centered">
|
|
<iframe src="http://ghbtns.com/github-btn.html?user=andrewminer&repo=crafting-guide&type=fork&size=large"
|
|
allowtransparency="true" frameborder="0" scrolling="0" width="100" height="32"></iframe>
|
|
</p>
|
|
</div> <!-- .grid_4.omega -->
|
|
</div> <!-- #footer -->
|
|
<div id="border_bedrock" class="grid_12 alpha omega"> </div>
|
|
</div> <!-- .container_12 -->
|
|
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
|
<script src="purl.js"></script>
|
|
<script src="crafting.js"></script>
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-5871323-4', 'crafting-guide.com');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|