craftingguide/website
1
0
Fork 0
Code Pull Requests Actions Activity

Added initial version of styling to the UI

Browse Source
This commit is contained in:
Andrew Miner
2013-08-18 01:13:32 -07:00
parent 7ea8fcb5ec
commit c4709c28bd
19 changed files with 532 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/index.html
+39 -42
View File
@@ -1,53 +1,50 @@
<!doctype html5!>
<html>
<head>
<style>
.disabled { color: gray; }
#craft_button { margin-left: 10px; width: 90px; }
#crafting { display: none; }
#crafting_error { color: red; display: none; font-weight: bold; width: 100%; }
#crafting_output { display: none; }
#item_to_craft { width: 540px; }
#load_error { color: red; display: none; font-weight: bold; width: 100%; }
#loaded_recipes { display: none; }
#recipe_url { width: 540px; }
#recipe_load_button { margin-left: 10px; width: 90px; }
div { margin-top: 50px; }
</style>
<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>
<div id="recipes">
<h1>Recipes</h1>
<p>
<input id="recipe_url" placeholder="recipe URL"></input>
<button id="recipe_load_button">Load</button>
<p id="load_error"></p>
<div id="loaded_recipes">
<p>Loaded recipes:</p>
<ul></ul>
</div>
</p>
</div>
<div id="crafting">
<h1>Crafting</h1>
<select id="crafting_selector" disabled></select>
<div id="crafting_output">
<p>You'll need:</p>
<ul id="missing_materials"></ul>
<p>You'll get:</p>
<ul id="leftover_materials"></ul>
</div>
<div id="crafting_error"></div>
</div>
<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="header_border" class="grid_12 alpha omega">&nbsp;</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>&nbsp;</td>
<td>
<input id="recipebook_url" placeholder="load another recipebook..."></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>Crafting</h1>
<select id="crafting_selector" disabled></select>
<div id="crafting_output" class="hidden">
<p>You'll need:</p>
<ul id="missing_materials"></ul>
<p>You'll get:</p>
<ul id="leftover_materials"></ul>
</div>
<div id="crafting_error" class="error"></div>
</div> <!-- #crafting -->
</div> <!-- .container_12 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="crafting.js"></script>
<script>
var __recipes = {};
var __inventory = {};
$(function() { onPageLoad() })
</script>
</body>
</html>