update templates

templates/results.html

@@ -0,0 +1,70 @@
+{% extends "base.html" %}
+{% block content %} 
+
+<table class="img-table">
+    <tr>
+        <th class="img-table-heading">Input Image</th>
+        <th class="img-table-heading">Output Heatmap</th>
+    </tr>
+    <tr>
+        {# Original image #}
+        <td class="img-table-cell" id="orig-cell">
+            <img class="img-out" src="data:image/png;base64,{{ img_orig_b64 }}" alt="original image">
+        </td>
+        {# Result image #}
+        <td class="img-table-cell" id="res-cell">
+            <img class="img-out" src="data:image/png;base64,{{ img_res_b64 }}" alt="result image">
+        </td>
+    </tr>
+    {# Legend #}
+    <tr>
+        <td class="img-table-cell"></td>
+        <td class="img-table-cell">
+            <table class="legend" id="legend">
+                <tr>
+                    <th class="legend-heading">Color</th>
+                    <th class="legend-heading">Temperature</th>
+                </tr>
+                {% for temp, color in legend.items() %}
+                <tr>
+                    <td class="legend-cell"><div style="width:30px;height:20px;background-color:{{ color }};"></div></td>
+                    <td class="legend-cell">{{ temp }}°C</td>
+                </tr>
+                {% endfor %}
+            </table>
+        </td>
+    </tr>
+</table>
+{# Temperature Frequency Plot #}
+<strong>Temperature Distribution</strong>
+{{freq_plot}}
+
+<style>
+    .img-table-heading {
+        padding: 4px 10px;
+    }
+
+    .img-table-cell {
+        padding: 10px 20px;
+    }
+
+    .img-out {
+        width: 32rem;
+    }
+
+    .legend {
+        border-spacing: 0px;
+        border-collapse: collapse;
+    }
+
+    .legend-heading {
+        padding: 4px;
+    }
+
+    .legend-cell {
+        border-width: 0px;
+        padding: 0px 20px;
+    }
+</style>
+
+{% endblock %}