First iteration on new UI

.gitignore

@@ -5,4 +5,5 @@ sounds/
 target/
 web/*.css
 web/*.js
+web/images/
 web/output/

web/demo.css

@@ -0,0 +1,94 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body,
+input,
+button {
+  font-family: "Fira Sans";
+}
+
+#main {
+  margin: auto;
+  max-width: 1000px;
+}
+
+h1 {
+  color: #333;
+  font-family: "Happy Monkey";
+  font-size: 3em;
+  margin: 20px 0 10px;
+  text-align: center;
+}
+
+#image-box {
+  width: 100%;
+}
+
+img#trump {
+  display: block;
+  height: 400px;
+  margin: auto;
+}
+
+#input-box {
+  box-sizing: border-box;
+  padding: 10px;
+  width: 100%;
+}
+
+input {
+  box-sizing: border-box;
+  font-size: 1.2em;
+  padding: 0.3em;
+  width: 100%;
+}
+
+button {
+  background-color: #e5e5e5;
+  border: 0;
+  color: #777;
+  font-size: 1.2em;
+  margin: 20px;
+  min-width: 150px;
+  padding: 0.75em;
+  padding: 10px;
+}
+
+#buttons {
+  margin-top: 20px;
+  width: 100%;
+}
+
+#button-left {
+  float: left;
+  width: 50%;
+}
+
+#button-right {
+  float: right;
+  width: 50%;
+}
+
+button#speak {
+  display: block;
+  margin: 0 auto;
+}
+
+button#clear {
+  display: block;
+  margin: 0 auto;
+}
+
+.clear {
+  clear: both;
+}
+
+@media screen and (min-width: 600px) {
+  button {
+    min-width: 250px;
+  }
+}
+

web/demo_jon.html

@@ -1 +1,37 @@
-TODO
+<!doctype html>
+<html>
+  <head>
+    <title>Jungle Horse</title>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="/assets/demo.css" type="text/css">
+    <link href="https://fonts.googleapis.com/css?family=Coming+Soon|Dosis|Happy+Monkey|Kaushan+Script|Lobster|Lobster+Two|Oxygen|Righteous" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Fira+Sans|Open+Sans" rel="stylesheet">
+  </head>
+  <body>
+    <div id="main">
+      <h1>Jungle Horse</h1>
+
+      <div id="image-box">
+        <img id="trump" src="/assets/images/trump_jt.png">
+      </div>
+
+      <form>
+        <div id="input-box">
+          <input name="jungle" value="this is the text we're going to be entering" autocomplete="off">
+        </div>
+
+        <div id="buttons">
+          <div id="button-left">
+            <button id="speak">Speak</button>
+          </div>
+          <div id="button-right">
+            <button id="clear">Clear</button>
+          </div>
+          <div class="clear"></div>
+        </div>
+      </form>
+
+    </div>
+  </body>
+</html>