Structures the html templates a bit more and adds categories in the page.

NExt steps:
- List all currently tracked hashtags on main page
- Add icon to remove those hashtags next to them.

twiderboard/flask_app.py

@@ -75,7 +75,17 @@ def stop():
 
 @app.route('/')
 def index():
+    return render_template('index.html')
+
+
+@app.route('/statistics')
+def statistics():
     return render_template('statistics.html')
 
+
+@app.route('/about')
+def about():
+    return render_template('about.html')
+
 if __name__ == '__main__':
     app.run(debug=True)

twiderboard/templates/about.html

@@ -0,0 +1,6 @@
+{% extends "layout.html" %}
+{% block restbody %}
+<p>
+  Nothing
+</p>
+{% endblock %}

twiderboard/templates/index.html

@@ -0,0 +1,35 @@
+{% extends "layout.html" %}
+{% block restbody %}
+<script type=text/javascript>
+  $(function() {
+    var submit_form = function(e) {
+      $.getJSON($SCRIPT_ROOT + '/_add_hashtag', {
+        new_hash: $('input[name="new_hash"]').val()
+      }, function(data) {
+        $('#hash').text(data.hash);
+        $('input[name=new_hash]').focus().select();
+      });
+      return false;
+    };
+
+    $('a#calculate').bind('click', submit_form);
+
+    $('input[type=text]').bind('keydown', function(e) {
+      if (e.keyCode == 13) {
+        submit_form(e);
+      }
+    });
+
+    $('input[name=new_hash]').focus();
+  });
+</script>
+<h1>Current Hashtags</h1>
+{% include "trendy.html" %}
+<h1>Add new Hashtag</h1>
+<p>
+  <input type=text size=5 name='new_hash'>
+  <span id='hash'></span>
+  </br>
+  <a href=# id='calculate'>Add hashtag!</a>
+</p>
+{% endblock %}

twiderboard/templates/layout.html

@@ -5,4 +5,8 @@
 <script type=text/javascript>
   var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
 </script>
-{% block body %}{% endblock %}
+{% block body %}
+{% include "top_bar.html" %}
+{% block restbody %}
+{% endblock %}
+{% endblock %}

twiderboard/templates/statistics.html

@@ -1,5 +1,5 @@
 {% extends "layout.html" %}
-{% block body %}
+{% block restbody %}
 <script>
 (function worker() {
   $.ajax({
@@ -15,29 +15,6 @@
   });
 })();
 </script>
-<script type=text/javascript>
-  $(function() {
-    var submit_form = function(e) {
-      $.getJSON($SCRIPT_ROOT + '/_add_hashtag', {
-        new_hash: $('input[name="new_hash"]').val()
-      }, function(data) {
-        $('#hash').text(data.hash);
-        $('input[name=new_hash]').focus().select();
-      });
-      return false;
-    };
-
-    $('a#calculate').bind('click', submit_form);
-
-    $('input[type=text]').bind('keydown', function(e) {
-      if (e.keyCode == 13) {
-        submit_form(e);
-      }
-    });
-
-    $('input[name=new_hash]').focus();
-  });
-</script>
 <h1>Database information</h1>
 <p>
   Current number of active hastags in database :
@@ -51,11 +28,4 @@
   Current number of members in database :
   <span id='members'>?</span>
 </p>
-<h1>Hashtags</h1>
-<p>
-  <input type=text size=5 name='new_hash'>
-  <span id='hash'></span>
-  </br>
-  <a href=# id='calculate'>Add hashtag!</a>
-</p>
 {% endblock %}

twiderboard/templates/top_bar.html

@@ -0,0 +1,5 @@
+<table>
+    <td><a href="/statistics">Statistics</a></td>
+    <td><a href="">Tracked hashtags</a></td>
+    <td><a href="/about">About</a></td>
+</table>

twiderboard/templates/trendy.html

@@ -0,0 +1 @@
+I'm trendy!