2 files changed, 31 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 %}
diff --git a/web/templates/layout.html b/web/templates/layout.html
new file mode 100644
index 0000000..ff4077d
--- /dev/null
+++ b/web/templates/layout.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <script src="static/js/jquery.js"></script>
+    <script src="static/js/jquery.imagemapster.js"></script>
+    <script src="static/js/main.js"></script>
+    <link rel="stylesheet" href="static/css/style.css">
+
+  <title>DjVu/Wikisource visualization</title>
+</head>
+
+<body>
+{% block main %}
+{% end %}
+</body>
+</html>