Cleaned up code and improved website layout.

1 files changed, 31 insertions, 12 deletions

diff --git a/NameGenerator.html b/NameGenerator.html
index 975a092..2c5babe 100644
--- a/NameGenerator.html
+++ b/NameGenerator.html
@@ -14,18 +14,37 @@
 		<div id="navbar"></div>
         <script src="navbar.js"></script>
 		<h2>Name Generator</h2>
-		<p>Name Generator generates names using a method created by <a href="https://en.wikipedia.org/wiki/Claude_Shannon" target="_blank">Claude Shannon</a>.
-		Claude Shannon created fake English text by going to a random page in a book, and writing down the first letter on the page.
-		Let's say it was "h". Then, he would flip to another random page in the book, and find the first occurrence of the letter "h". Let's say
-		it was in the word "had". He would then write down the letter that followed the "h", in this case "a", then flip to another page in the book,
-		and find that the first occurrence of "a" was followed by "l", and so on. This program is slightly different. It takes two random (taking into
-		account the frequencies of letters in English) letters. It finds what those two letters are commonly followed by. Then it takes the last two letters,
-		and finds what those two letters are commonly followed by, and so on. There is also a faster offline version <a href="https://github.com/pommicket/NameGenerator" target="_blank">on GitHub</a><br><br>
-		After clicking "Create Names!", the button will become red until it has finished loading. To download the names, click on the download link, then press Ctrl+S/Command+S.</p>
-
-		Number of names: <input type="number" id="numNames" value=10><br>
-		Display names at bottom <input id="outputNames" type="checkbox" checked=true> (Unchecking this option will mean that you will have to download the names to see them)<br><br>
-		<button id="button" class="btn btn-primary" onclick="create();">Create Names!</button><br>
+		<div class="container-fluid">
+            <div class="col-lg-5 col-md-6 col-sm-8 col-xs-12" id="explanation">
+				Name Generator generates names using a method created by <a href="https://en.wikipedia.org/wiki/Claude_Shannon" target="_blank">Claude Shannon</a>.
+				Claude Shannon created fake English text by going to a random page in a book, and writing down the first letter on the page.
+				Let's say it was "h". Then, he would flip to another random page in the book, and find the first occurrence of the letter "h". Let's say
+				it was in the word "had". He would then write down the letter that followed the "h", in this case "a", then flip to another page in the book,
+				and find that the first occurrence of "a" was followed by "l", and so on. This program is slightly different. It takes two random (taking into
+				account the frequencies of letters in English) letters. It finds what those two letters are commonly followed by. Then it takes the last two letters,
+				and finds what those two letters are commonly followed by, and so on. There is also a faster offline version
+				<a href="https://github.com/pommicket/NameGenerator" target="_blank">on GitHub</a><br><br>
+				After clicking "Create Names!", the button will become red until it has finished loading. To download the names, click on the download link, then press Ctrl+S/Command+S.</div>
+			</div>
+		</div>
+		<br><br>
+		<div class="container-fluid">
+            <div class="row">
+    			<div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10 with-margin">
+                    <span class="input-group-addon">Number of names</span>
+                    <input id="numNames" class="form-control" type="number" value="20">
+                </div>
+            </div>
+			<div class="row">
+    			<div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10 with-margin">
+                    <span class="input-group-addon">
+                        <input id="outputNames" class="checkbox" type="checkbox" checked="true">
+                    </span>
+                    <span class="form-control">Display names</span>
+                </div>
+            </div>
+		</div>
+		<button id="button" class="btn btn-sm btn-primary" onclick="create();">Create Names!</button><br>
 		<a id="download" target="_blank"></a>
 
 		<div id="names">