3 files changed, 43 insertions, 10 deletions
diff --git a/fg21sim/webui/templates/console.html b/fg21sim/webui/templates/console.html
new file mode 100644
index 0000000..5516242
--- /dev/null
+++ b/fg21sim/webui/templates/console.html
@@ -0,0 +1,29 @@
+{#
+ # Copyright (c) 2016 Weitian LI <liweitianux@live.com>
+ # MIT license
+ #
+ # Console part
+ #}
+<section id="console">
+  <h2>Console</h2>
+  <hr />
+
+  <p class="status"><strong>
+      Simulation status:
+      <span id="fg21sim-status" class="label label-default">N/A</span>
+  </strong></p>
+
+  <p class="button-group">
+    <button type="button" id="start-fg21sim"><span class="fa fa-play" aria-hidden="true"></span> Start</button>
+    <button type="button" class="button button-warning" id="stop-fg21sim" disabled="disabled"><span class="fa fa-stop" aria-hidden="true"></span> Stop</button>
+  </p>
+
+  <div id="log-messages" class="panel panel-default">
+    <div class="panel-heading">
+      <span class="panel-title">Logging Messages</span>
+    </div>
+    <div class="panel-body">
+      <p>messages ...</p>
+    </div>
+  </div>
+</section>
diff --git a/fg21sim/webui/templates/index.html b/fg21sim/webui/templates/index.html
index 2d5091e..105c4a0 100644
--- a/fg21sim/webui/templates/index.html
+++ b/fg21sim/webui/templates/index.html
@@ -21,16 +21,8 @@
 
 {% block main %}
   {% include "configs.html" %}
-
-  <section id="xxx-results" class="container target">
-    <h2 id="results">Results</h2>
-    <p>Simulation results go here :)</p>
-  </section>
-
-  <section id="logs" class="container target">
-    <h2>Logs</h2>
-    <p>Logging messages should go here :)</p>
-  </section>
+  {% include "console.html" %}
+  {% include "results.html" %}
 {% end %}
 
 {% block footer %}
diff --git a/fg21sim/webui/templates/results.html b/fg21sim/webui/templates/results.html
new file mode 100644
index 0000000..4935f28
--- /dev/null
+++ b/fg21sim/webui/templates/results.html
@@ -0,0 +1,12 @@
+{#
+ # Copyright (c) 2016 Weitian LI <liweitianux@live.com>
+ # MIT license
+ #
+ # Results part
+ #}
+<section id="results">
+  <h2>Results</h2>
+  <hr />
+
+  <p>Simulation results go here :)</p>
+</section>