From dc1efca7653495c67fd27ae9d64ec6ecbd9a8c6a Mon Sep 17 00:00:00 2001
From: Sai Raj <39055732+sairajzero@users.noreply.github.com>
Date: Wed, 26 Feb 2020 18:13:02 +0530
Subject: [PATCH] TEDx Monitor 1.0.8

---
 TEDxKanke_monitor.html | 1216 ++++++++++++++++++++++++++++++++++------
 1 file changed, 1051 insertions(+), 165 deletions(-)
diff --git a/TEDxKanke_monitor.html b/TEDxKanke_monitor.html
index 0177171..33e2ed8 100644
--- a/TEDxKanke_monitor.html
+++ b/TEDxKanke_monitor.html
@@ -1,179 +1,1065 @@
 <!DOCTYPE html>
-    <head>
-        <title>TEDxKanke Monitor</title>
-        <script id="floGlobals">
-            /* Constants for FLO blockchain operations !!Make sure to add this at begining!! */
-            const floGlobals = {
-              adminID: "FTMnSh1m99GSDAuxGyevs375BLudffso9F",
-              subAdmins: [],
-              application: "TEDxKanke",
-              webAppURL: "ranchimall.duckdns.org:3874"
-            }
-        </script>
-        <script id="onLoadStartUp">
-            function onLoadStartUp() {
-                console.log('onLoadStartUp')
-                TEDxKanke_monitor.getProjectList().then(result => {
-                    projects = result;
-                    TEDxKanke_monitor.getTaskList().then(result => {
-                        tasks = TEDxKanke_monitor.taskTitles(result);
-                    }).catch(error => console.error(error))
-                }).catch(error => console.error(error))
-            }
-        </script>
-    </head>
-    <body onload="onLoadStartUp()">
-        <script id="TEDxKanke_monitor">
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TEDxKanke monitor</title>
+    <!--<link rel="stylesheet" href="css/main.css">-->
+<style>
+        * {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: 'Roboto', sans-serif;
+}
+
+:root {
+  --accent-color: #e62b1e;
+  --background:   34, 34, 34;
+  --foreground: #2a2a2a;
+  --rgb-bw: 255, 255, 255;
+  --light-text: #eee;
+  --light-color: #aaa;
+  --dark-color: #111;
+}
+
+body {
+  margin: 0;
+  font-size: 16px;
+  background: rgba(var(--background), 1);
+  color: rgba(var(--rgb-bw), 1);
+}
+
+.hide-completely {
+  display: none !important;
+}
+
+button {
+  padding: 0.4rem 0.6rem;
+  border: none;
+  font-weight: 500;
+  background: transparent;
+  color: #00C853;
+  border-radius: 0.2rem;
+  cursor: pointer;
+  text-transform: uppercase;
+}
+
+.padding {
+  padding: 1rem;
+}
+
+.hover {
+  -webkit-transition: background 0.3s ease;
+  transition: background 0.3s ease;
+  cursor: pointer;
+}
+
+.hover:hover {
+  background: rgba(var(--rgb-bw), 0.06);
+}
+
+.page {
+  display: -ms-grid;
+  display: grid;
+  margin: 1rem;
+}
+
+#recent_activity {
+  margin-bottom: 1rem;
+}
+
+#tasks_container,
+#activity_container {
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.container {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-flow: column wrap;
+          flex-flow: column wrap;
+  border-radius: 0.6rem;
+  background: var(--foreground);
+  -ms-flex-item-align: start;
+      align-self: flex-start;
+}
+
+.container header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin-bottom: 1rem;
+}
+
+.container header h3 {
+  font-weight: 500;
+  color: rgba(var(--rgb-bw), 1);
+}
+
+.container header button {
+  margin-left: auto;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+ul .person-card, ul .task-card {
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: auto 1fr;
+      grid-template-columns: auto 1fr;
+      grid-template-areas: 'profile .'
+ 'profile .';
+  gap: 0.5rem 1rem;
+  margin-bottom: 0.5rem;
+}
+
+ul .person-card span, ul .task-card span {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 0.8rem;
+  font-size: 1.4rem;
+  color: rgba(var(--background), 1);
+  font-weight: 500;
+  -ms-grid-row: 1;
+  -ms-grid-row-span: 2;
+  -ms-grid-column: 1;
+  grid-area: profile;
+  -ms-flex-item-align: start;
+      align-self: flex-start;
+  background: #00E5FF;
+  border-radius: 2rem;
+  line-height: 0;
+}
+
+ul .person-card span::after, ul .task-card span::after {
+  content: '';
+  display: block;
+  padding-top: 100%;
+}
+
+ul .person-card h5, ul .task-card h5 {
+  font-weight: normal;
+  opacity: 0.8;
+  word-break: break-all;
+}
+
+ul .person-card h4, ul .task-card h4 {
+  text-transform: capitalize;
+  font-weight: 500;
+}
+
+ul .person-card:last-of-type, ul .task-card:last-of-type {
+  margin-bottom: 0;
+}
+
+.update-card {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-flow: column wrap;
+          flex-flow: column wrap;
+  margin-bottom: 1rem;
+}
+
+.update-card:last-of-type {
+  margin-bottom: 0;
+}
+
+.update-card p {
+  line-height: 1.6;
+  opacity: 0.9;
+}
+
+.update-card .time {
+  font-size: 0.8rem;
+  opacity: 0.9;
+  margin-left: auto;
+  color: mediumspringgreen;
+}
+
+.update-card .capitalise {
+  text-transform: capitalize;
+}
+
+#top_nav {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 4;
+}
+
+#top_nav .spacer {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+
+#top_nav .logo {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+.logo {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  font-size: 1.2rem;
+}
+
+.logo .cls-2, .logo .cls-3 {
+  fill: rgba(var(--rgb-bw), 1);
+  font-size: 146.9px;
+  font-family: ArialMT, Arial;
+}
+
+.logo svg {
+  height: 2.5rem;
+}
+
+.logo h4 {
+  margin: 0;
+}
+
+#recent_activity header nav {
+  margin-left: auto;
+}
+
+.container-header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-bottom: 1rem;
+}
+
+.container-header h3 {
+  font-weight: 500;
+}
+
+#show_all {
+  background: var(--foreground);
+  border-radius: 0.6rem;
+}
+
+#show_all .popup-container {
+  pointer-events: none;
+  background: transparent;
+}
+
+.hide {
+  visibility: hidden;
+}
+
+.back-arrow {
+  fill: none;
+  stroke: rgba(var(--rgb-bw), 0.8);
+  stroke-width: 6;
+  overflow: visible;
+  width: 2rem;
+  height: 2rem;
+  padding: 0.5rem 0.5rem 0.5rem 0;
+  cursor: pointer;
+}
+
+.loader {
+  height: 4rem;
+  width: 4rem;
+  stroke-width: 2;
+  overflow: visible;
+  stroke: var(--accent-color);
+  fill: none;
+  stroke-dashoffset: 180;
+  stroke-dasharray: 180;
+  will-change: stroke-dashoffset;
+}
+
+.loading-animation {
+  -webkit-animation: load 3.6s linear infinite, spin 1s linear infinite;
+          animation: load 3.6s linear infinite, spin 1s linear infinite;
+}
+
+.popup-container {
+  display: -ms-grid;
+  display: grid;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  place-items: center;
+  background: rgba(0, 0, 0, 0.24);
+  z-index: 10;
+  -webkit-transition: opacity 0.3s ease;
+  transition: opacity 0.3s ease;
+}
+
+.popup-container .popup {
+  -ms-flex-item-align: end;
+      align-self: flex-end;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  width: 100%;
+  border-radius: 0.5rem 0.5rem 0 0;
+  padding: 1rem;
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  background: var(--foreground);
+  -webkit-transform: translateY(1rem);
+          transform: translateY(1rem);
+  -webkit-transition: -webkit-transform 0.3s ease;
+  transition: -webkit-transform 0.3s ease;
+  transition: transform 0.3s ease;
+  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
+  -webkit-box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.24);
+          box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.24);
+}
+
+.popup-container .popup h5 {
+  margin: 0.5rem 0;
+}
+
+.popup-container .popup button:first-of-type {
+  margin-left: auto;
+}
+
+.popup-container .popup .container-header {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 0;
+}
+
+.popup-container .popup .container-header button {
+  background: rgba(var(--rgb-bw), 0.1);
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
+}
+
+.solid-background {
+  background: rgba(var(--background), 1);
+}
+
+#main_loader {
+  text-align: center;
+}
+
+#main_loader h4 {
+  font-weight: normal;
+}
+
+#main_loader .logo {
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  margin: 2rem 0;
+}
+
+@-webkit-keyframes load {
+  50% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes load {
+  50% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}
+
+.fade-in {
+  -webkit-animation: fadein 0.4s ease;
+          animation: fadein 0.4s ease;
+}
+
+@-webkit-keyframes fadein {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadein {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+#show_message {
+  -webkit-transform: translate(0, 0.4rem);
+          transform: translate(0, 0.4rem);
+  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
+  transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+  transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease;
+  -webkit-box-shadow: 0.2rem 0.4rem 0.8rem rgba(0, 0, 0, 0.16);
+          box-shadow: 0.2rem 0.4rem 0.8rem rgba(0, 0, 0, 0.16);
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  color: white;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  z-index: 11;
+}
+
+#show_message span {
+  font-weight: 500;
+  padding: 1rem;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+
+#show_message button {
+  padding: 0.5rem 1rem;
+  margin: 0;
+}
+
+#show_message button svg {
+  stroke: white;
+}
+
+@media only screen and (min-width: 640px) {
+  .page, #top_nav {
+    margin: 1rem 2vw;
+  }
+  .container {
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+  }
+  ::-webkit-scrollbar {
+    width: 0.3rem;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: rgba(var(--rgb-bw), 0.3);
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(var(--rgb-bw), 0.6);
+  }
+  #main_page {
+    -ms-grid-columns: 2fr 1fr;
+        grid-template-columns: 2fr 1fr;
+    gap: 1rem;
+  }
+  #top_nav .logo {
+    -webkit-box-pack: left;
+        -ms-flex-pack: left;
+            justify-content: left;
+  }
+  #show_message {
+    -webkit-transform: translate(0.4rem, 0);
+            transform: translate(0.4rem, 0);
+    margin: 1rem;
+    width: -webkit-max-content;
+    width: -moz-max-content;
+    width: max-content;
+    border-radius: 0.2rem;
+  }
+}
+
+@media only screen and (min-width: 1280px) {
+  .page, #top_nav {
+    margin: 1rem 4vw;
+  }
+}
+/*# sourceMappingURL=main.css.map */
+    </style>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
+    <script id="floGlobals">
+        /* Constants for FLO blockchain operations !!Make sure to add this at begining!! */
+        const floGlobals = {
+          blockchain: "FLO",
+          adminID: "FTMnSh1m99GSDAuxGyevs375BLudffso9F",
+          subAdmins: [],
+          application: "TEDxKanke",
+          webAppURL: "tedxkanke.duckdns.org"
+        }
+    </script>
+    <script id="onLoadStartUp">
+        function onLoadStartUp() {
+            console.log('onLoadStartUp')
+            Promise.all([TEDxKanke_monitor.getProjectList(), TEDxKanke_monitor.getTaskList(), TEDxKanke_monitor.getInternList(), webAppClient.requestSubAdminList()]).then(results => {
+                projects = results[0];
+                tasks = TEDxKanke_monitor.taskTitles(results[1]);
+                internList = results[2];
+                floGlobals.subAdmins = results[3]
+                console.log(projects, tasks, internList, floGlobals.subAdmins)
+                renderElements()
+            }).catch(error => console.error(error))
+        }
+    </script>
+</head>
+<body onload="onLoadStartUp()">
+    <div id="main_loader" class="popup-container solid-background">
+        <div>
+            <svg viewBox="0 0 64 64" class="loader loading-animation">
+                <circle cx="32" cy="32" r="32"/>
+            </svg>   
+            <div class="logo">
+                <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 794.1 193.19">
+                    <defs>
+                        <style>.cls-1{fill:#ff2b06;}
+                        </style>
+                    </defs>
+                    <title>TEDx_logo_place_k_RGB_CS2</title>
+                    <path class="cls-1" d="M89.93,380.9,82.36,370h7.22l4,6,4-6h7l-7.57,10.77,8.5,12.24H98.34l-4.8-7.25L88.73,393H81.65Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M135.51,379.38H113v-4.76h22.48Zm0,9.53H113v-4.77h22.48Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M152.73,366.43h-6.32v-5.21h6.32ZM146.41,370h6.32v23h-6.32Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M156.82,370h6v3.2H163a8.2,8.2,0,0,1,7-3.82c6.72,0,8.41,3.78,8.41,9.48V393h-6.32V380c0-3.78-1.11-5.65-4.05-5.65-3.43,0-4.89,1.92-4.89,6.59V393h-6.33Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M198.75,390.06h-.09c-1.47,2.5-4,3.57-7,3.57-6.94,0-10.32-6-10.32-12.33,0-6.19,3.42-11.93,10.19-11.93a8,8,0,0,1,6.85,3.42h.05V361.22h6.32V393h-6Zm-5.52-15.93c-4.14,0-5.56,3.56-5.56,7.34,0,3.61,1.64,7.39,5.56,7.39,4.18,0,5.43-3.65,5.43-7.43S197.33,374.13,193.23,374.13Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M213.84,383c.18,4,2.13,5.83,5.65,5.83,2.54,0,4.58-1.56,5-3H230c-1.78,5.43-5.56,7.75-10.77,7.75-7.26,0-11.75-5-11.75-12.11,0-6.9,4.76-12.15,11.75-12.15,7.83,0,11.61,6.58,11.17,13.66Zm10.28-4c-.58-3.21-2-4.9-5-4.9a5,5,0,0,0-5.25,4.9Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M233.29,370h6v2.94h.08a7.67,7.67,0,0,1,6.86-3.56c7.21,0,10.46,5.83,10.46,12.37,0,6.14-3.38,11.89-10.11,11.89a8.17,8.17,0,0,1-6.89-3.48h-.09v11h-6.32Zm17.09,11.57c0-3.65-1.47-7.43-5.52-7.43s-5.48,3.69-5.48,7.43,1.43,7.3,5.52,7.3S250.38,385.3,250.38,381.56Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M264.8,383c.18,4,2.13,5.83,5.65,5.83,2.54,0,4.58-1.56,5-3H281c-1.78,5.43-5.56,7.75-10.77,7.75-7.26,0-11.75-5-11.75-12.11,0-6.9,4.76-12.15,11.75-12.15,7.83,0,11.61,6.58,11.17,13.66Zm10.28-4c-.58-3.21-2-4.9-5-4.9a5,5,0,0,0-5.25,4.9Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M284.25,370h6v3.2h.13a8.2,8.2,0,0,1,7-3.82c6.72,0,8.41,3.78,8.41,9.48V393h-6.32V380c0-3.78-1.11-5.65-4.05-5.65-3.42,0-4.89,1.92-4.89,6.59V393h-6.32Z" transform="translate(-79.33 -208.54)"/><path class="cls-2" d="M326.17,390.06h-.09c-1.47,2.5-4.05,3.57-7,3.57-7,0-10.33-6-10.33-12.33,0-6.19,3.43-11.93,10.19-11.93a8,8,0,0,1,6.86,3.42h0V361.22h6.32V393h-6Zm-5.52-15.93c-4.14,0-5.56,3.56-5.56,7.34,0,3.61,1.65,7.39,5.56,7.39,4.19,0,5.43-3.65,5.43-7.43S324.75,374.13,320.65,374.13Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M341.26,383c.18,4,2.14,5.83,5.65,5.83,2.54,0,4.59-1.56,5-3h5.56c-1.78,5.43-5.56,7.75-10.77,7.75-7.26,0-11.75-5-11.75-12.11,0-6.9,4.76-12.15,11.75-12.15,7.83,0,11.62,6.58,11.17,13.66Zm10.28-4c-.58-3.21-2-4.9-5-4.9a5,5,0,0,0-5.25,4.9Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M360.71,370h6v3.2h.13a8.2,8.2,0,0,1,7-3.82c6.72,0,8.42,3.78,8.42,9.48V393H376V380c0-3.78-1.12-5.65-4.06-5.65-3.42,0-4.89,1.92-4.89,6.59V393h-6.32Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M394.22,370h4.63v4.23h-4.63v11.39c0,2.14.54,2.67,2.67,2.67a10,10,0,0,0,2-.17v4.94a25.34,25.34,0,0,1-3.69.22c-3.88,0-7.26-.89-7.26-5.48V374.22h-3.83V370h3.83v-6.9h6.32Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M401.16,361.22h6.32V393h-6.32Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M422.93,395.9c-1.38,3.69-3.56,5.2-7.92,5.2a38.81,38.81,0,0,1-3.88-.22v-5.21a34.67,34.67,0,0,0,3.7.23c2.18-.23,2.89-2.5,2.18-4.32L408.91,370h6.76l5.21,15.76H421L426,370h6.54Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M456.44,369.37c7.26,0,11.93,4.8,11.93,12.15s-4.67,12.11-11.93,12.11-11.88-4.81-11.88-12.11S449.23,369.37,456.44,369.37Zm0,19.49c4.32,0,5.61-3.69,5.61-7.34s-1.29-7.39-5.61-7.39-5.56,3.69-5.56,7.39S452.17,388.86,456.44,388.86Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M470.68,370h6v4.27h.09a8.14,8.14,0,0,1,7.35-4.89,4.92,4.92,0,0,1,1.38.22v5.87a11.89,11.89,0,0,0-2.27-.22c-4.63,0-6.24,3.34-6.24,7.39V393h-6.32Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M509.23,391.53c0,3.79-1.34,10.2-11.93,10.2-4.54,0-9.84-2.14-10.15-7.39h6.28c.58,2.36,2.49,3.16,4.72,3.16,3.51,0,5.11-2.41,5.07-5.7v-3h-.09a7.76,7.76,0,0,1-6.9,3.56c-6.9,0-9.84-5.25-9.84-11.57,0-6,3.43-11.39,9.89-11.39,3,0,5.34,1,6.85,3.69h.09V370h6Zm-6-10.32c0-3.74-1.29-7.08-5.39-7.08-3.56,0-5.12,3.12-5.12,6.54s1.25,6.9,5.12,6.9C501.44,387.57,503.22,384.5,503.22,381.21Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M512.25,377.07c.36-5.92,5.66-7.7,10.82-7.7,4.58,0,10.1,1,10.1,6.54v12c0,2.1.23,4.19.8,5.12h-6.41a9.3,9.3,0,0,1-.44-2.22,10.56,10.56,0,0,1-7.75,2.85c-4.36,0-7.83-2.19-7.83-6.9,0-5.21,3.92-6.46,7.83-7s7.48-.45,7.48-3-1.87-3.11-4.09-3.11c-2.41,0-4,1-4.19,3.47Zm14.6,4.67c-1.07.94-3.29,1-5.25,1.34s-3.74,1.06-3.74,3.38,1.83,2.94,3.87,2.94c4.94,0,5.12-3.92,5.12-5.3Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M537.18,370h6v3.2h.13a8.2,8.2,0,0,1,7-3.82c6.72,0,8.41,3.78,8.41,9.48V393h-6.32V380c0-3.78-1.11-5.65-4.05-5.65-3.42,0-4.89,1.92-4.89,6.59V393h-6.32Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M568.29,366.43H562v-5.21h6.32ZM562,370h6.32v23H562Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M571,388.24l12-13.49H571.85V370h19.4v4.76l-12,13.49H592.1V393H571Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M599.8,383c.18,4,2.13,5.83,5.65,5.83,2.54,0,4.59-1.56,5-3H616c-1.78,5.43-5.56,7.75-10.77,7.75-7.26,0-11.75-5-11.75-12.11,0-6.9,4.76-12.15,11.75-12.15,7.83,0,11.61,6.58,11.17,13.66Zm10.28-4c-.58-3.21-2-4.9-5-4.9a5,5,0,0,0-5.25,4.9Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M635.67,390.06h-.09c-1.47,2.5-4.05,3.57-7,3.57-6.94,0-10.32-6-10.32-12.33,0-6.19,3.43-11.93,10.19-11.93a8,8,0,0,1,6.86,3.42h0V361.22h6.32V393h-6Zm-5.52-15.93c-4.14,0-5.56,3.56-5.56,7.34,0,3.61,1.65,7.39,5.56,7.39,4.19,0,5.43-3.65,5.43-7.43S634.25,374.13,630.15,374.13Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M664.73,367.1h-9.52v-5.88h26v5.88h-9.53V393h-7Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M684,361.22h23.77v5.88H691v6.81h15.4v5.43H691v7.79h17.14V393H684Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M711.06,361.22h13.71c8.24,0,14.42,5.17,14.42,15.71,0,9.22-4.71,16.07-14.42,16.07H711.06Zm7,25.91h6.23c4.05,0,7.93-2.5,7.93-9.53,0-6.41-2.23-10.5-9.17-10.5h-5Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M759.18,383c.17,4,2.13,5.83,5.65,5.83,2.54,0,4.58-1.56,5-3h5.57c-1.78,5.43-5.57,7.75-10.77,7.75-7.26,0-11.75-5-11.75-12.11,0-6.9,4.76-12.15,11.75-12.15,7.83,0,11.61,6.58,11.17,13.66Zm10.28-4c-.58-3.21-2-4.9-5-4.9a5,5,0,0,0-5.25,4.9Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M790.47,393h-7l-7.88-23h6.64L787,385.7h.09L792,370h6.27Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M804.31,383c.17,4,2.13,5.83,5.65,5.83,2.54,0,4.58-1.56,5-3h5.57c-1.78,5.43-5.57,7.75-10.77,7.75-7.26,0-11.75-5-11.75-12.11,0-6.9,4.76-12.15,11.75-12.15,7.83,0,11.61,6.58,11.17,13.66Zm10.28-4c-.58-3.21-2-4.9-5-4.9a5,5,0,0,0-5.25,4.9Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M823.76,370h6v3.2h.14a8.2,8.2,0,0,1,7-3.82c6.72,0,8.41,3.78,8.41,9.48V393H839V380c0-3.78-1.11-5.65-4-5.65-3.43,0-4.89,1.92-4.89,6.59V393h-6.32Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-2" d="M857.27,370h4.63v4.23h-4.63v11.39c0,2.14.53,2.67,2.67,2.67a10,10,0,0,0,2-.17v4.94a25.39,25.39,0,0,1-3.7.22c-3.87,0-7.25-.89-7.25-5.48V374.22h-3.83V370H851v-6.9h6.32Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-1" d="M109,256.08H79.33V229h91.88v27.12H141.56v78.7H109Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-1" d="M176.27,229h89.19v27.12H208.87v13.19h56.59v25.2H208.87v13.19h56.61v27.12H176.27Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-1" d="M271,229h53.5c35.27,0,47.73,26.08,47.73,52.75,0,32.47-17.19,53.07-54.1,53.07H271Zm32.6,78.7H316.3c20.31,0,23.28-16.46,23.28-26.4,0-6.66-2.09-25.18-25.66-25.18H303.55Z" transform="translate(-79.33 -208.54)"/>
+                    <path class="cls-1" d="M419,294l-9.94-16.49L399.38,294H375.49l22.68-33.35-21.83-31.89h23.89l8.85,15.76,9.1-15.76h23.89l-21.83,31.89L442.92,294Z" transform="translate(-79.33 -208.54)"/>
+                    <text class="cls-3" transform="translate(377.56 126.07)">Kanke</text>
+                </svg>
+            </div>
+            A FLO Blockchain App by RanchiMall
+        </div>
+    </div>
+    <div id="show_message" class="hide">
+        <span>Message</span>
+        <button id="hide_banner_btn">
+        <svg class="close-svg" viewBox="0 0 50.71 50.71">
+            <title>Close this notification</title>
+            <line x1="50.35" y1="0.35" x2="0.36" y2="50.35"/>
+            <line x1="0.35" y1="0.35" x2="50.35" y2="50.35"/>
+        </svg>
+        </button>
+    </div>
+    <nav id="top_nav" class="padding">
+        <div class="logo">
+            <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 794.1 193.19">
+                <defs>
+                    <style>.cls-1{fill:#ff2b06;}
+                    </style>
+                </defs>
+                <title>TEDx_logo_place_k_RGB_CS2</title>
+                <path class="cls-1" d="M89.93,380.9,82.36,370h7.22l4,6,4-6h7l-7.57,10.77,8.5,12.24H98.34l-4.8-7.25L88.73,393H81.65Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M135.51,379.38H113v-4.76h22.48Zm0,9.53H113v-4.77h22.48Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M152.73,366.43h-6.32v-5.21h6.32ZM146.41,370h6.32v23h-6.32Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M156.82,370h6v3.2H163a8.2,8.2,0,0,1,7-3.82c6.72,0,8.41,3.78,8.41,9.48V393h-6.32V380c0-3.78-1.11-5.65-4.05-5.65-3.43,0-4.89,1.92-4.89,6.59V393h-6.33Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M198.75,390.06h-.09c-1.47,2.5-4,3.57-7,3.57-6.94,0-10.32-6-10.32-12.33,0-6.19,3.42-11.93,10.19-11.93a8,8,0,0,1,6.85,3.42h.05V361.22h6.32V393h-6Zm-5.52-15.93c-4.14,0-5.56,3.56-5.56,7.34,0,3.61,1.64,7.39,5.56,7.39,4.18,0,5.43-3.65,5.43-7.43S197.33,374.13,193.23,374.13Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M213.84,383c.18,4,2.13,5.83,5.65,5.83,2.54,0,4.58-1.56,5-3H230c-1.78,5.43-5.56,7.75-10.77,7.75-7.26,0-11.75-5-11.75-12.11,0-6.9,4.76-12.15,11.75-12.15,7.83,0,11.61,6.58,11.17,13.66Zm10.28-4c-.58-3.21-2-4.9-5-4.9a5,5,0,0,0-5.25,4.9Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M233.29,370h6v2.94h.08a7.67,7.67,0,0,1,6.86-3.56c7.21,0,10.46,5.83,10.46,12.37,0,6.14-3.38,11.89-10.11,11.89a8.17,8.17,0,0,1-6.89-3.48h-.09v11h-6.32Zm17.09,11.57c0-3.65-1.47-7.43-5.52-7.43s-5.48,3.69-5.48,7.43,1.43,7.3,5.52,7.3S250.38,385.3,250.38,381.56Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M264.8,383c.18,4,2.13,5.83,5.65,5.83,2.54,0,4.58-1.56,5-3H281c-1.78,5.43-5.56,7.75-10.77,7.75-7.26,0-11.75-5-11.75-12.11,0-6.9,4.76-12.15,11.75-12.15,7.83,0,11.61,6.58,11.17,13.66Zm10.28-4c-.58-3.21-2-4.9-5-4.9a5,5,0,0,0-5.25,4.9Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M284.25,370h6v3.2h.13a8.2,8.2,0,0,1,7-3.82c6.72,0,8.41,3.78,8.41,9.48V393h-6.32V380c0-3.78-1.11-5.65-4.05-5.65-3.42,0-4.89,1.92-4.89,6.59V393h-6.32Z" transform="translate(-79.33 -208.54)"/><path class="cls-2" d="M326.17,390.06h-.09c-1.47,2.5-4.05,3.57-7,3.57-7,0-10.33-6-10.33-12.33,0-6.19,3.43-11.93,10.19-11.93a8,8,0,0,1,6.86,3.42h0V361.22h6.32V393h-6Zm-5.52-15.93c-4.14,0-5.56,3.56-5.56,7.34,0,3.61,1.65,7.39,5.56,7.39,4.19,0,5.43-3.65,5.43-7.43S324.75,374.13,320.65,374.13Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M341.26,383c.18,4,2.14,5.83,5.65,5.83,2.54,0,4.59-1.56,5-3h5.56c-1.78,5.43-5.56,7.75-10.77,7.75-7.26,0-11.75-5-11.75-12.11,0-6.9,4.76-12.15,11.75-12.15,7.83,0,11.62,6.58,11.17,13.66Zm10.28-4c-.58-3.21-2-4.9-5-4.9a5,5,0,0,0-5.25,4.9Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M360.71,370h6v3.2h.13a8.2,8.2,0,0,1,7-3.82c6.72,0,8.42,3.78,8.42,9.48V393H376V380c0-3.78-1.12-5.65-4.06-5.65-3.42,0-4.89,1.92-4.89,6.59V393h-6.32Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M394.22,370h4.63v4.23h-4.63v11.39c0,2.14.54,2.67,2.67,2.67a10,10,0,0,0,2-.17v4.94a25.34,25.34,0,0,1-3.69.22c-3.88,0-7.26-.89-7.26-5.48V374.22h-3.83V370h3.83v-6.9h6.32Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M401.16,361.22h6.32V393h-6.32Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M422.93,395.9c-1.38,3.69-3.56,5.2-7.92,5.2a38.81,38.81,0,0,1-3.88-.22v-5.21a34.67,34.67,0,0,0,3.7.23c2.18-.23,2.89-2.5,2.18-4.32L408.91,370h6.76l5.21,15.76H421L426,370h6.54Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M456.44,369.37c7.26,0,11.93,4.8,11.93,12.15s-4.67,12.11-11.93,12.11-11.88-4.81-11.88-12.11S449.23,369.37,456.44,369.37Zm0,19.49c4.32,0,5.61-3.69,5.61-7.34s-1.29-7.39-5.61-7.39-5.56,3.69-5.56,7.39S452.17,388.86,456.44,388.86Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M470.68,370h6v4.27h.09a8.14,8.14,0,0,1,7.35-4.89,4.92,4.92,0,0,1,1.38.22v5.87a11.89,11.89,0,0,0-2.27-.22c-4.63,0-6.24,3.34-6.24,7.39V393h-6.32Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M509.23,391.53c0,3.79-1.34,10.2-11.93,10.2-4.54,0-9.84-2.14-10.15-7.39h6.28c.58,2.36,2.49,3.16,4.72,3.16,3.51,0,5.11-2.41,5.07-5.7v-3h-.09a7.76,7.76,0,0,1-6.9,3.56c-6.9,0-9.84-5.25-9.84-11.57,0-6,3.43-11.39,9.89-11.39,3,0,5.34,1,6.85,3.69h.09V370h6Zm-6-10.32c0-3.74-1.29-7.08-5.39-7.08-3.56,0-5.12,3.12-5.12,6.54s1.25,6.9,5.12,6.9C501.44,387.57,503.22,384.5,503.22,381.21Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M512.25,377.07c.36-5.92,5.66-7.7,10.82-7.7,4.58,0,10.1,1,10.1,6.54v12c0,2.1.23,4.19.8,5.12h-6.41a9.3,9.3,0,0,1-.44-2.22,10.56,10.56,0,0,1-7.75,2.85c-4.36,0-7.83-2.19-7.83-6.9,0-5.21,3.92-6.46,7.83-7s7.48-.45,7.48-3-1.87-3.11-4.09-3.11c-2.41,0-4,1-4.19,3.47Zm14.6,4.67c-1.07.94-3.29,1-5.25,1.34s-3.74,1.06-3.74,3.38,1.83,2.94,3.87,2.94c4.94,0,5.12-3.92,5.12-5.3Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M537.18,370h6v3.2h.13a8.2,8.2,0,0,1,7-3.82c6.72,0,8.41,3.78,8.41,9.48V393h-6.32V380c0-3.78-1.11-5.65-4.05-5.65-3.42,0-4.89,1.92-4.89,6.59V393h-6.32Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M568.29,366.43H562v-5.21h6.32ZM562,370h6.32v23H562Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M571,388.24l12-13.49H571.85V370h19.4v4.76l-12,13.49H592.1V393H571Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M599.8,383c.18,4,2.13,5.83,5.65,5.83,2.54,0,4.59-1.56,5-3H616c-1.78,5.43-5.56,7.75-10.77,7.75-7.26,0-11.75-5-11.75-12.11,0-6.9,4.76-12.15,11.75-12.15,7.83,0,11.61,6.58,11.17,13.66Zm10.28-4c-.58-3.21-2-4.9-5-4.9a5,5,0,0,0-5.25,4.9Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M635.67,390.06h-.09c-1.47,2.5-4.05,3.57-7,3.57-6.94,0-10.32-6-10.32-12.33,0-6.19,3.43-11.93,10.19-11.93a8,8,0,0,1,6.86,3.42h0V361.22h6.32V393h-6Zm-5.52-15.93c-4.14,0-5.56,3.56-5.56,7.34,0,3.61,1.65,7.39,5.56,7.39,4.19,0,5.43-3.65,5.43-7.43S634.25,374.13,630.15,374.13Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M664.73,367.1h-9.52v-5.88h26v5.88h-9.53V393h-7Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M684,361.22h23.77v5.88H691v6.81h15.4v5.43H691v7.79h17.14V393H684Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M711.06,361.22h13.71c8.24,0,14.42,5.17,14.42,15.71,0,9.22-4.71,16.07-14.42,16.07H711.06Zm7,25.91h6.23c4.05,0,7.93-2.5,7.93-9.53,0-6.41-2.23-10.5-9.17-10.5h-5Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M759.18,383c.17,4,2.13,5.83,5.65,5.83,2.54,0,4.58-1.56,5-3h5.57c-1.78,5.43-5.57,7.75-10.77,7.75-7.26,0-11.75-5-11.75-12.11,0-6.9,4.76-12.15,11.75-12.15,7.83,0,11.61,6.58,11.17,13.66Zm10.28-4c-.58-3.21-2-4.9-5-4.9a5,5,0,0,0-5.25,4.9Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M790.47,393h-7l-7.88-23h6.64L787,385.7h.09L792,370h6.27Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M804.31,383c.17,4,2.13,5.83,5.65,5.83,2.54,0,4.58-1.56,5-3h5.57c-1.78,5.43-5.57,7.75-10.77,7.75-7.26,0-11.75-5-11.75-12.11,0-6.9,4.76-12.15,11.75-12.15,7.83,0,11.61,6.58,11.17,13.66Zm10.28-4c-.58-3.21-2-4.9-5-4.9a5,5,0,0,0-5.25,4.9Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M823.76,370h6v3.2h.14a8.2,8.2,0,0,1,7-3.82c6.72,0,8.41,3.78,8.41,9.48V393H839V380c0-3.78-1.11-5.65-4-5.65-3.43,0-4.89,1.92-4.89,6.59V393h-6.32Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-2" d="M857.27,370h4.63v4.23h-4.63v11.39c0,2.14.53,2.67,2.67,2.67a10,10,0,0,0,2-.17v4.94a25.39,25.39,0,0,1-3.7.22c-3.87,0-7.25-.89-7.25-5.48V374.22h-3.83V370H851v-6.9h6.32Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-1" d="M109,256.08H79.33V229h91.88v27.12H141.56v78.7H109Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-1" d="M176.27,229h89.19v27.12H208.87v13.19h56.59v25.2H208.87v13.19h56.61v27.12H176.27Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-1" d="M271,229h53.5c35.27,0,47.73,26.08,47.73,52.75,0,32.47-17.19,53.07-54.1,53.07H271Zm32.6,78.7H316.3c20.31,0,23.28-16.46,23.28-26.4,0-6.66-2.09-25.18-25.66-25.18H303.55Z" transform="translate(-79.33 -208.54)"/>
+                <path class="cls-1" d="M419,294l-9.94-16.49L399.38,294H375.49l22.68-33.35-21.83-31.89h23.89l8.85,15.76,9.1-15.76h23.89l-21.83,31.89L442.92,294Z" transform="translate(-79.33 -208.54)"/>
+                <text class="cls-3" transform="translate(377.56 126.07)">Kanke</text>
+            </svg>
+        </div>
+    </nav>
+    <main>
+        <div id="main_page" class="page hide-completely fade-in">
+            <div id="recent_activity" class="container padding">
+                <header class="padding">
+                    <h3>Activities</h3>
+                </header>
+                <ul id="activity_container">
+                </ul>
+            </div>
+            <div id="tasks" class="container padding">
+                <header class="padding">
+                    <h3>Tasks</h3>
+                </header>
+                <ul id="tasks_container"> 
+                </ul>
+            </div>
+        </div>
+        <div id="show_all" class="page hide-completely fade-in">
+            <header class="container-header padding">
+                <svg class="back-arrow" onclick="goBack()" viewBox="0 0 31.24 56.83">
+                    <title>Go back</title>
+                    <polyline points="29.83,1.41 2.83,28.41 29.83,55.41 " />
+                </svg>
+                <h3 id="task_title">Category</h3>
+            </header>
+            <ul id="assigned" class="padding">
+                <li class="person-card">
+                    <span></span>
+                    <h4>Name</h4>
+                    <h5>FLOID</h5>
+                </li>
+            </ul>
+            <div id="intern_loader" class="popup-container">
+              <div>
+                  <svg viewBox="0 0 64 64" class="loader">
+                      <circle cx="32" cy="32" r="32"/>
+                  </svg>   
+              </div>
+          </div>
+        </div>
+    </main>
+    <script id="TEDxKanke_monitor">
             
-            const TEDxKanke_monitor = {
-                
-                taskCodes: function(taskList, taskTitle){
-                    var result = []
-                    for(taskCode in taskList)
-                        if(taskList[taskCode].taskTitle === taskTitle)
-                            result.push(taskCode)
-                    return result
-                },
+        const TEDxKanke_monitor = {
+            
+            taskCodes: function(taskList, taskTitle){
+                var result = []
+                for(taskCode in taskList)
+                    if(taskList[taskCode].taskTitle === taskTitle)
+                        result.push(taskCode)
+                return result
+            },
 
-                taskTitles: function(taskList) {
-                    var result = {}
-                    for(taskCode in taskList){
-                        var taskTitle = taskList[taskCode].taskTitle
-                        if(taskTitle in result)
-                            result[taskTitle].push(taskCode)
-                        else
-                            result[taskTitle] = [taskCode]
-                    }
-                    return result
-                },
+            taskTitles: function(taskList) {
+                var result = {}
+                for(taskCode in taskList){
+                    var taskTitle = taskList[taskCode].taskTitle
+                    if(taskTitle in result)
+                        result[taskTitle].push(taskCode)
+                    else
+                        result[taskTitle] = [taskCode]
+                }
+                return result
+            },
 
-                getGeneralUpdate: function(type, vectorClock = '0'){
+            getGeneralUpdate: function(type, vectorClock = '0'){
+                return new Promise((resolve, reject) => {
+                    webAppClient.requestGeneralData(type, vectorClock)
+                        .then(results => resolve(results))
+                        .catch(error => reject(error))
+                })
+            },
+
+            getProjectList: function(){
+                return new Promise((resolve, reject) => {
+                    webAppClient.requestObjectData(["TEDxKanke", "projectDetails"])
+                        .then(results => resolve(results))
+                        .catch(error => reject(error))
+                })
+            }, 
+
+            getTaskList: function(){
+                return new Promise((resolve, reject) => {
+                    webAppClient.requestObjectData(["TEDxKanke", "projectTaskDetails"])
+                        .then(results => resolve(results))
+                        .catch(error => reject(error))
+                })
+            }, 
+
+            getInternList: function(){
+                return new Promise((resolve, reject) => {
+                    webAppClient.requestObjectData(["TEDxKanke", "internList"])
+                        .then(results => resolve(results))
+                        .catch(error => reject(error))
+                })
+            },
+
+            getAssignedInterns(taskCode){
+                return new Promise((resolve, reject) => {
+                    webAppClient.requestObjectData(["TEDxKanke", "internsAssigned", taskCode])
+                        .then(results => resolve(results))
+                        .catch(error => reject(error))
+                })
+            }, 
+
+            getInternDetails(floID){
+                return new Promise((resolve, reject) => {
+                    webAppClient.requestObjectData(["TEDxKanke", "internList", floID])
+                        .then(results => resolve(results))
+                        .catch(error => reject(error))
+                })
+            }, 
+            
+        }
+    </script>
+    <script id="webAppClient">
+        //Add this to the client script to request data from floWebappServer
+        const webAppClient = {
+            util: {
+                sendData(data) {
                     return new Promise((resolve, reject) => {
-                        floWebappClient.requestGeneralData(type, vectorClock)
-                            .then(results => resolve(results))
-                            .catch(error => reject(error))
+                        var websocket = new WebSocket("wss://" + floGlobals.webAppURL + "/ws");
+                        websocket.onmessage = (evt => {
+                            if (evt.data == '$+') {
+                                websocket.send(data);
+                                resolve(`Data sent to webApp`);
+                            } else if (evt.data == '$-')
+                                reject(`webApp not available`)
+                            else
+                                reject(evt.data)
+                            websocket.close();
+                        })
+                        websocket.onerror = (evt) => {
+                            reject(`webApp server not found`)
+                        };
                     })
                 },
 
-                getProjectList: function(){
+                requestData(request = []) {
                     return new Promise((resolve, reject) => {
-                        floWebappClient.requestObjectData(["TEDxKanke", "projectDetails"])
-                            .then(results => resolve(results))
-                            .catch(error => reject(error))
-                    })
-                }, 
-
-                getTaskList: function(){
-                    return new Promise((resolve, reject) => {
-                        floWebappClient.requestObjectData(["TEDxKanke", "projectTaskDetails"])
-                            .then(results => resolve(results))
-                            .catch(error => reject(error))
-                    })
-                }, 
-
-                getAssignedInterns(taskCode){
-                    return new Promise((resolve, reject) => {
-                        floWebappClient.requestObjectData(["TEDxKanke", "internsAssigned", taskCode])
-                            .then(results => resolve(results))
-                            .catch(error => reject(error))
-                    })
-                }, 
-
-                getInternDetails(floID){
-                    return new Promise((resolve, reject) => {
-                        floWebappClient.requestObjectData(["TEDxKanke", "internList", floID])
-                            .then(results => resolve(results))
-                            .catch(error => reject(error))
-                    })
-                }, 
-                
-            }
-        </script>
-        <script id="floWebappClient">
-            const floWebappClient = {
-                util:{
-                    sendData(data) {
-                        return new Promise((resolve, reject) => {
-                            var websocket = new WebSocket("ws://" + floGlobals.webAppURL + "/ws");
-                            websocket.onmessage = (evt => {
-                                if (evt.data == '$+') {
-                                    websocket.send(data);
-                                    resolve(`Data sent to webApp`);
-                                } else if (evt.data == '$-')
-                                    reject(`webApp not available`)
-                                else
-                                    reject(evt.data)
+                        var websocket = new WebSocket("wss://" + floGlobals.webAppURL + "/ws");
+                        websocket.onmessage = (evt => {
+                            if (evt.data == '$+') {
+                                websocket.send(`?${JSON.stringify(request)}`);
+                            } else if (evt.data == '$-') {
+                                reject(`webApp not available`)
+                                websocket.close()
+                            } else {
+                                resolve(JSON.parse(evt.data));
                                 websocket.close();
-                            })
-                            websocket.onerror = (evt) => {
-                                reject(`webApp server not found`)
-                            };
+                            }
                         })
-                    },
-
-                    requestData(request = []) {
-                        return new Promise((resolve, reject) => {
-                            var websocket = new WebSocket("ws://" + floGlobals.webAppURL + "/ws");
-                            websocket.onmessage = (evt => {
-                                if (evt.data == '$+') {
-                                    websocket.send(`?${JSON.stringify(request)}`);
-                                } else if (evt.data == '$-') {
-                                    reject(`webApp not available`)
-                                    websocket.close()
-                                } else {
-                                    resolve(JSON.parse(evt.data));
-                                    websocket.close();
-                                }
-                            })
-                            websocket.onerror = (evt) => {
-                                reject(`webApp server not found`)
-                            };
-                        })
-                    }
-                },
-
-                sendGeneralData: function(message, type, options = {}){
-                    return new Promise((resolve,reject) => {
-                        var data = {
-                            senderID : myFloID,
-                            receiverID: options.receiverID || floGlobals.adminID,
-                            pubKey : myPubKey,
-                            message : message,
-                            sign: floCrypto.signData(JSON.stringify(message), myPrivKey),
-                            application : options.application || floGlobals.application,
-                            type: type,
-                            comment: options.comment || ""
-                        }
-                        this.util.sendData(JSON.stringify(data), data.receiverID)
-                            .then(result => resolve(result))
-                            .catch(error => reject(error))
-                    })
-                },
-
-                requestGeneralData: function(type, vectorClock = '0'){
-                    if(typeof vectorClock !== 'string')
-                        vectorClock.toString()
-                    return new Promise((resolve, reject) => {
-                        this.util.requestData(['generalData', type, vectorClock]).then(result => {
-                                if(result[0])
-                                    resolve(result[1])
-                                else
-                                    reject(result[1])
-                            }).catch(error => reject(error))
-                    })
-                }, 
-
-                requestObjectData: function(keyPath){
-                    return new Promise((resolve, reject) => {
-                        this.util.requestData(['objectData'].concat(keyPath)).then(result => {
-                                if(result[0])
-                                    resolve(result[1])
-                                else
-                                    reject(result[1])
-                            }).catch(error => reject(error))
+                        websocket.onerror = (evt) => {
+                            reject(`webApp server not found`)
+                        };
                     })
                 }
+            },
+
+            sendGeneralData: function (message, type, options = {}) {
+                return new Promise((resolve, reject) => {
+                    var data = {
+                        senderID: myFloID,
+                        receiverID: options.receiverID || floGlobals.adminID,
+                        pubKey: myPubKey,
+                        message: message,
+                        sign: floCrypto.signData(JSON.stringify(message), myPrivKey),
+                        application: options.application || floGlobals.application,
+                        type: type,
+                        comment: options.comment || ""
+                    }
+                    this.util.sendData(JSON.stringify(data), data.receiverID)
+                        .then(result => resolve(result))
+                        .catch(error => reject(error))
+                })
+            },
+
+            requestGeneralData: function (type, vectorClock = '0') {
+                if (typeof vectorClock !== 'string')
+                    vectorClock.toString()
+                return new Promise((resolve, reject) => {
+                    this.util.requestData([floGlobals.application, 'generalData', type, vectorClock])
+                        .then(
+                            result => {
+                                if (result[0])
+                                    resolve(result[1])
+                                else
+                                    reject(result[1])
+                            }).catch(error => reject(error))
+                })
+            },
+
+            requestObjectData: function (keyPath) {
+                return new Promise((resolve, reject) => {
+                    this.util.requestData([floGlobals.application, 'appObjects'].concat(keyPath)).then(
+                        result => {
+                            if (result[0])
+                                resolve(result[1])
+                            else
+                                reject(result[1])
+                        }).catch(error => reject(error))
+                })
+            }, 
+            
+            requestSubAdminList: function(){
+                return new Promise((resolve, reject) => {
+                    this.util.requestData([floGlobals.application, 'subAdmins']).then(
+                        result => {
+                            if (result[0])
+                                resolve(result[1])
+                            else
+                                reject(result[1])
+                        }).catch(error => reject(error))
+                })
             }
-        </script>
-    </body>
-</html>
\ No newline at end of file
+        }
+    </script>
+    <script id="UI_functions">
+        let frag = document.createDocumentFragment();
+        if(!navigator.onLine) 
+                showMessage('error', 'There seems to be a problem connecting to the internet.', 'fixed')
+            window.addEventListener('offline', () =>{
+                showMessage('error', 'There seems to be a problem connecting to the internet.', 'fixed')
+            })
+            window.addEventListener('online', () =>{
+                showMessage('', 'We are back online.')
+            }) 
+                let currentTimeout;
+            function showMessage(mode, message, behavior){
+                let banner = document.getElementById('show_message')
+                if(mode === 'error')
+                    banner.style.background = '#D32F2F';
+                else
+                    banner.style.background = '#00C853';
+                banner.classList.add('no-transformations')
+                banner.classList.remove('hide')
+                banner.children[0].textContent = message.charAt(0).toUpperCase() + message.slice(1);
+                banner.children[1].onclick = function() {
+                    banner.classList.add('hide')
+                    banner.classList.remove('no-transformations')
+                }
+                clearTimeout(currentTimeout)
+                if(behavior === 'fixed') return;
+                currentTimeout = setTimeout(()=>{
+                    banner.classList.add('hide')
+                    banner.classList.remove('no-transformations')
+                }, 4000)
+            }
+        let render = {
+            taskCard: function(task, taskCode){
+                let card = document.createElement('li'),
+                    inital = task.charAt(0);
+                card.classList.add('task-card', 'padding', 'hover')
+                card.setAttribute('data-task-code', taskCode)
+                card.innerHTML = `<span>${inital}</span>
+                                <h4>${task}</h4>`;
+                return card;
+            },
+            personCard: function(floID, name){
+            	name = name || "#Undefined"
+                let card = document.createElement('li'),
+                    inital = name.charAt(0);
+                card.classList.add('person-card', 'padding')
+                card.innerHTML = `<span>${inital}</span>
+                                <h4>${name}</h4>
+                                <h5>${floID}</h5>`;
+                return card;
+            },
+            updateCard: function(message, timestamp){
+                let card = document.createElement('div'),
+                    time = new Date(parseInt(timestamp))
+                function addZero(i) {
+                  if (i < 10) {
+                    i = "0" + i;
+                  }
+                  return i;
+                }
+                let hours = time.getHours(),
+                    minutes = addZero(time.getMinutes()),
+                    postfix = hours < 12 ? 'AM': 'PM';
+                hours = addZero(hours > 12 ? (hours - 12) : hours);
+                card.classList.add('update-card', 'padding')
+                card.innerHTML = `  <p>${message}</p>
+                                    <span class="time">${hours}:${minutes} ${postfix}</span>
+                                    `;
+                return card;
+            }
+        }
+            let appState = {
+                page: 'main_page',
+                type: ''
+            }
+            history.pushState(appState, null, null)
+            
+            window.onpopstate = (event) => showPage(event.state.page)
+            let lastTask;
+            function showPage(page, type, card){
+                if(page === 'main_page'){
+                    appState.page = 'main_page';
+                    appState.type = ''
+                    history.pushState(appState, null, null)
+                }
+                if(type === 'interns' && lastTask !== card.dataset.taskCode){
+                    loader('show', 'intern_loader')
+                    showAssignedInterns(card)
+                    lastTask = card.dataset.taskCode;
+                }
+                let thisPage = document.getElementById(page),
+                        allPages = document.querySelectorAll('.page')
+                allPages.forEach((pages) =>{
+                    pages.classList.add('hide-completely');
+                });
+                thisPage.classList.remove('hide-completely');
+            }
+            let lastState = '';
+            document.getElementById('tasks_container').addEventListener('click', (e) => {
+                        if(e.target.closest('.task-card')){
+                            showPage('show_all', 'interns', e.target.closest('.task-card'))
+                            appState.page = 'show_all';
+                            appState.type = 'interns'
+                        }
+                        if(lastState !== appState.page)
+                            history.pushState(appState, null, null)
+                        lastState = appState.page;
+                }) 
+        function showAssignedInterns(card){
+            let task = card.dataset.taskCode,
+                container = document.getElementById('assigned');
+            container.innerHTML = ``;
+            TEDxKanke_monitor.getAssignedInterns(task).then((assignedInterns) => {
+                if(assignedInterns)
+	                assignedInterns.forEach((intern) => {
+	                    frag.appendChild(render.personCard(intern, internList[intern]))
+	                })
+                container.append(frag)
+                loader('hide', 'intern_loader')
+            })
+            document.getElementById('task_title').textContent = card.children[1].textContent;
+        }
+        function goBack(){
+            history.back()
+            loader('hide', 'intern_loader')
+        }
+        function loader(mode, loader){
+                loader = document.getElementById(loader);
+                if(mode === 'show'){
+                    loader.classList.remove('hide')
+                    loader.firstElementChild.children[0].classList.add('loading-animation')
+                }
+                else{
+                    loader.classList.add('hide')
+                    loader.firstElementChild.children[0].classList.remove('loading-animation')
+                }
+            }
+        function renderElements(){
+            let taskContainer = document.getElementById('tasks_container'),
+                updateContainer = document.getElementById('activity_container');
+            for(task in tasks){
+                frag.appendChild(render.taskCard(task, tasks[task][0]))
+            }
+            taskContainer.append(frag)
+            TEDxKanke_monitor.getGeneralUpdate('InternUpdates').then((updates) => {
+                updates.reverse().forEach((update) => {
+                    if(floGlobals.subAdmins.includes(update.sender))
+                      frag.appendChild(render.updateCard(update.message, update.vectorClock.split('_')[0]))
+                })
+                updateContainer.append(frag)
+                var autoRefresh = setInterval(liveUpdates, 60000)
+                loader('hide', 'main_loader')
+                showPage('main_page')
+            })
+        }
+        function liveUpdates(){
+          let updateContainer = document.getElementById('activity_container');
+          var intervalTime = Date.now() - 60000
+          console.log(`Fetching Live Updates from ${intervalTime}`)
+          TEDxKanke_monitor.getGeneralUpdate('InternUpdates', intervalTime).then((updates) => {
+                updates.reverse().forEach((update) => {
+                    if(floGlobals.subAdmins.includes(update.sender))
+                      frag.appendChild(render.updateCard(update.message, update.vectorClock.split('_')[0]))
+                })
+                updateContainer.insertBefore(frag, updateContainer.firstChild)
+            })
+        }
+    </script>
+</body>
+</html>
