Basic tornado app displaying a page image and associated text side by side

1 files changed, 14 insertions, 0 deletions

diff --git a/web/templates/index.html b/web/templates/index.html
new file mode 100644
index 0000000..b39017e
--- /dev/null
+++ b/web/templates/index.html
@@ -0,0 +1,14 @@
+{% extends "layout.html" %}
+
+{% block main %}
+    <div id="image_container">
+        <img id="page" src="static/{{page_number}}.png" usemap="#wordmap" />
+    </div>
+    <map name="wordmap">{% for id, coords in areas %}
+        <area href="#" shape="rect" coords="{{coords}}" data-id="{{id}}" />{% end %}
+    </map>
+    <div id="text">
+    {% for id, word in words %}
+    <span id="{{id}}">{{word}}</span> {% end %}
+    </div>
+{% end %}