3 files changed, 39 insertions, 9 deletions
diff --git a/libpathod/templates/frame.html b/libpathod/templates/frame.html
index eaff5c02..b0c298b6 100644
--- a/libpathod/templates/frame.html
+++ b/libpathod/templates/frame.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <title>Pathod</title>
     <link href="/static/bootstrap.min.css" rel="stylesheet">
+    <script src="/static/jquery-1.7.2.min.js"></script>
     <style>
         body {
             padding-top: 45px;
@@ -15,7 +16,7 @@
     <div class="navbar navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
-          <a class="brand" href="#">Pathod</a>
+          <a class="brand" href="/">Pathod</a>
           <ul class="nav">
             <li {% if section== "main" %} class="active" {% end %}><a href="/">Main</a></li>
             <li {% if section== "log" %} class="active" {% end %}><a href="/log">Log</a></li>
diff --git a/libpathod/templates/index.html b/libpathod/templates/index.html
index 38b35dd8..f5808c4d 100644
--- a/libpathod/templates/index.html
+++ b/libpathod/templates/index.html
@@ -1,12 +1,13 @@
 {% extends frame.html %}
 {% block body %}  
-  <!-- Main hero unit for a primary marketing message or call to action -->
-  <div class="hero-unit">
-    <form>
-        <input>
-        <a type="submit" class="btn">explain</a>
-
+    <form class="well form-search" method="GET" action="/preview">
+        <input style="width: 30em;" name="spec" class="input-medium search-query">
+        <input type="submit" class="btn" value="preview">
+        <a href="#" class="btn">go</a>
     </form>
-  </div>
-
+    <script>
+        $(function(){
+            console.log("pigs");
+        });
+    </script>
 {% end %}  
diff --git a/libpathod/templates/preview.html b/libpathod/templates/preview.html
new file mode 100644
index 00000000..6599362f
--- /dev/null
+++ b/libpathod/templates/preview.html
@@ -0,0 +1,28 @@
+{% extends frame.html %}
+{% block body %}  
+
+<h1>Preview</h1>
+
+{% if syntaxerror %}
+    <h2> Error: {{ syntaxerror }} </h2>
+    <pre>{{ marked }}</pre>
+{% elif error %}
+    <h2> Error </h2>
+    <p style="color: #ff0000">{{ error }}</p>
+{% else %}
+
+    <h2>Spec:</h2>
+
+    <pre>{{ spec }}</pre>
+
+    <h2>Response:</h2>
+
+    <pre>{{ output }}</pre>
+
+{% end %}  
+    <form class="well form-search" method="GET" action="/preview">
+        <input style="width: 30em;" name="spec" class="input-medium search-query" value="{{spec}}">
+        <input type="submit" class="btn" value="preview">
+        <a href="#" class="btn">go</a>
+    </form>
+{% end %}