From 6811582de4275964023c65e673836fd3bae6dc64 Mon Sep 17 00:00:00 2001
From: Russell Champoux <Russell.Champoux@thomsonreuters.com>
Date: Tue, 27 Jan 2015 16:41:23 -0500
Subject: [PATCH] Addded about.html; improved app for mobile viewing

---
 about.html   | 31 +++++++++++++++++++++++++++++++
 grimoire.css |  9 +++++++--
 index.html   | 26 +++++++++++++++++---------
 3 files changed, 55 insertions(+), 11 deletions(-)
 create mode 100644 about.html

diff --git a/about.html b/about.html
new file mode 100644
index 0000000..8c9da39
--- /dev/null
+++ b/about.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-us" ng-app="grimoire" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>About Grimoire App</title>
+</head>
+<html>
+    <h2>About Grimoire App</h2>
+    <ul>
+    <li>Grimoire is a simple, single page app that generates random treasure loot for the Pathfinder Role Playing Game system.</li>
+    <li>It utilizes roll tables and loot tables from the Core Rulebook and the Advanced Player's Guide.</li>
+    <li>Spell lists are taken from the CRB, APG, and additionally Ultimate Magic and several other sources</li>
+    <li>Some randomly determined properties (such as the create type of a Bane weapon) do not have official roll tables. I made up my own roll tables for these values.</li>
+    <li>GMs are highly encouraged to add/remove/disregard any item or part of an item that they want to the random loot drops.</li>
+    </ul>
+
+    <h2>How to Use Grimoire App</h2>
+    <ol>
+    <li>Select from the sources on the left hand side
+    <ul><li>Currently only the checkbox and the radio buttons work</li>
+    <li>Marking the checkbox will result in all items being included in the roll</li>
+    <li>Selecting a radio button will result in only that item type being rolled</li></ul>
+    </li>
+    <li>Select how many randomly generated items you want
+    <ul><li>Reference your Core Rulebook for example of minor, medium, and major loot items</li></ul></li>
+    <li>Click "GO"
+    <ul><li>Optional: Select a minimum total value for the treasure rolled up. Grimoire will attempt 10 times before giving up</li></ul></li>
+    </ol>
+    <ul>
+    <li>There are several other quick featuers that can be accessed using the buttons on the bottom</li>
+    </ul>
+</html>
\ No newline at end of file
diff --git a/grimoire.css b/grimoire.css
index 89d5943..90604d3 100644
--- a/grimoire.css
+++ b/grimoire.css
@@ -30,12 +30,17 @@
     padding-bottom:5em;
 }
 
+.itemcounter {
+    font-size: 200%;
+    text-align: center;
+}
+
 .header {
-    height: 2em;
+    height: auto;
 }
 
 .footer {
-    height: 2em;
+    height: auto;
     white-space:nowrap;
     padding-bottom:4em;
 }
diff --git a/index.html b/index.html
index ce93958..6144e05 100644
--- a/index.html
+++ b/index.html
@@ -60,21 +60,29 @@
 </div>
 <div class="col-md-12 footer">
 <div class="col-md-7">
-<div class="col-md-4 big menu">Minor Item <input type="number" class="numberbox form-control" ng-model="grimoire.itemCount[0]"></div>
-<div class="col-md-4 big menu">Medium Item <input type="number" class="numberbox form-control" ng-model="grimoire.itemCount[1]"></div>
-<div class="col-md-4 big menu">Major Item <input type="number" class="numberbox form-control" ng-model="grimoire.itemCount[2]"></div>
+<div class="col-md-4 itemcounter menu">Minor Item <input type="number" class="numberbox form-control" ng-model="grimoire.itemCount[0]"></div>
+<div class="col-md-4 itemcounter menu">Medium Item <input type="number" class="numberbox form-control" ng-model="grimoire.itemCount[1]"></div>
+<div class="col-md-4 itemcounter menu">Major Item <input type="number" class="numberbox form-control" ng-model="grimoire.itemCount[2]"></div>
 </div>
-<div class="col-md-5 menu"><input type="button" value="GO" class="big" ng-click="grimoire.generateItems()">(Minimum Total Cost: <input type="number" class="largecount form-control" ng-model="grimoire.minimumTotalCost">gp)</div>
+<div class="col-md-4 menu"><input type="button" value="GO" class="big" ng-click="grimoire.generateItems()">(Minimum Total Cost: <input type="number" class="largecount form-control" ng-model="grimoire.minimumTotalCost">gp)</div>
 </div>
 <div class="col-md-12 footer">
-<strong>Quick Links:</strong>
+<div class="col-md-1 col-sm-12"><strong>Quick Links:</strong></div>
+<div class="col-md-3 col-sm-12">
 <button class="btn btn-default btn-md" ng-click="grimoire.getDeity()">Get Deity</button>
 <button class="btn btn-default btn-md" ng-click="grimoire.getEnergyType()">Get Energy Type</button>
-<button class="btn btn-default btn-md" ng-click="grimoire.getSpell(grimoire.spellType, grimoire.spellLevel)">Get Spell</button> (Level <input type="number" class="numberbox form-control" ng-model="grimoire.spellLevel"> <input type="radio" name="spellType" value="arcane" ng-model="grimoire.spellType">Arcane <input type="radio" name="spellType" value="divine" ng-model="grimoire.spellType">Divine)
-<button class="btn btn-default btn-md" ng-click="grimoire.generateSpellbook(grimoire.casterLevel)">Generate Spellbook</button>(Caster Level: <input type="number" class="numberbox form-control" ng-model="grimoire.casterLevel">)
-<button class="btn btn-default btn-md" ng-click="grimoire.generateIntelligence(grimoire.baseCost)">Generate Item Intelligence</button>(Base cost: <input type="number" class="numberbox form-control" ng-model="grimoire.baseCost">)
-
 </div>
+<div class="col-md-4 col-sm-12">
+<button class="btn btn-default btn-md" ng-click="grimoire.getSpell(grimoire.spellType, grimoire.spellLevel)">Get Spell</button> (Level <input type="number" class="numberbox form-control" ng-model="grimoire.spellLevel"> <input type="radio" name="spellType" value="arcane" ng-model="grimoire.spellType">Arcane <input type="radio" name="spellType" value="divine" ng-model="grimoire.spellType">Divine)
+</div>
+<div class="col-md-3 col-sm-12">
+<button class="btn btn-default btn-md" ng-click="grimoire.generateSpellbook(grimoire.casterLevel)">Generate Spellbook</button>(Caster Level: <input type="number" class="numberbox form-control" ng-model="grimoire.casterLevel">)
+</div>
+<div class="col-md-3 col-sm-12">
+<button class="btn btn-default btn-md" ng-click="grimoire.generateIntelligence(grimoire.baseCost)">Generate Item Intelligence</button>(Base cost: <input type="number" class="largecount form-control" ng-model="grimoire.baseCost">gp)
+</div>
+</div>
+~~<a href="about.html">About</a>~~
 
 <!--GrimoireJS library-->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>