Loading page and landing page initial styling.

html/static/js/main.js

@@ -1,4 +1,31 @@
-function incrementCounter() {
-    let elem = document.querySelector("#counter");
-    elem.innerHTML = Number(elem.innerHTML) + 1;
+function setPageContent(elemID) {
+    let elem = document.querySelector(elemID);
+    let target = document.querySelector("#page-content");
+    target.style.opacity=0;
+    setTimeout(function () {
+        target.innerHTML = elem.innerHTML;
+        target.style.opacity = 1;
+    }, 500);
+}
+
+function nextPage() {
+    page = Math.min(page+1, pages.length-1);
+    setPageContent(pages[page]);
+}
+
+function prevPage() {
+    page = Math.max(page-1, 0);
+    setPageContent(pages[page]);
+}
+
+function showLoader(opacity) {
+    let elem = document.querySelector("#loading-page");
+    elem.style.opacity = opacity ? 1 : 0;
+    if (opacity) {
+        elem.style.display = "flex";
+    } else {
+        setTimeout(function () {
+            elem.style.display = "none";
+        }, 500)
+    }
 }