Webapp now show three columns

image, original text and corrected text. The highlighting is functional
as well.

1 files changed, 21 insertions, 10 deletions

diff --git a/web/templates/index.html b/web/templates/index.html
index b3b5fe0..2ba18c1 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -1,14 +1,25 @@
 {% extends "layout.html" %}
 
 {% block main %}
-    <div id="image_container">
-        <img id="page" src="{{page_number}}.jpg" 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>
+<div id="image_container">
+  <img id="page" src="{{page_number}}.jpg" usemap="#wordmap" />
+</div>
+<map name="wordmap">
+  {% for i, coord in enumerate(orig_coords) %}
+  <area href="#" shape="rect" coords="{{coord}}" data-id="{{i}}" />
+  {% end %}
+</map>
+
+<div id="texte-non-corrige">
+  <h3>Texte original</h3>
+  {% for i, word in enumerate(orig_words) %}
+  <span id="orig-{{i}}">{{word}}</span>
+  {% end %}
+</div>
+<div id="texte-corrige">
+  <h3>Texte corrigé</h3>
+  {% for i, word in enumerate(corr_words) %}
+  <span id="corr-{{corr_coords_index[i]}}">{{word}}</span>
+  {% end %}
+</div>
 {% end %}