Added stat placeholder box

frontend/index.css

@@ -16,7 +16,6 @@
     height: 85%;
     width: 100%;
     padding: 5%;
-    overflow: auto;
 }
 
 #menu {
@@ -40,4 +39,19 @@
 
 #taskButton {
     padding-left: 0;
+}
+
+#historyContent {
+    height: 75%;
+    overflow: scroll;
+    width: 100%;
+}
+
+#stats {
+    height: 25%;
+    width: 100%;
+}
+
+#tasks {
+    overflow: scroll;
 }

frontend/index.html

@@ -29,7 +29,17 @@
     <div id="mainPage" style="display: none;">
       <div id="content">
         <div id="tasks" class="screen flex two demo" style=""></div>
-        <div id="history" class="screen" style="display: none;"></div>
+        <div id="history" class="screen" style="display: none;">
+          <div id="stats">
+            <article class="card">
+              <header>
+                <h1>Stats</h1>
+                <pre id="statData"></pre>
+              </header>
+            </article>
+          </div>
+          <div id="historyContent"></div>
+        </div>
         <div id="addTask" class="screen" style="display: none;">Add Task</div>
       </div>
       <div id="menu" class="flex three demo">

frontend/index.js

@@ -54,7 +54,7 @@ async function populateScreen() {
     let tasks = tasksRaw.tasks;
 
     // get historical data
-    let historyPage = document.getElementById("history");
+    let historyPage = document.getElementById("historyContent");
     historyPage.innerHTML = "";
     response = await fetch("/getHistory");
     let historyRaw = await response.json();