new web page added and weather api key save added

server.py

@@ -237,16 +237,9 @@ def update():
     os.system("sudo reboot now")
     return index()
 
-@app.route("/display_format", methods = ['PUT', 'POST', 'GET'])
-def display_format():
-    global professional
-    data = str(request.data)
-    if "Standard" in data:
-        professional = False
-    elif "Professional" in data:
-        professional = True
-        
-    print(professional)
+@app.route("/restart", methods=['PUT','POST'])
+def restart():
+    os.system("sudo reboot now")
     return index()
     
 @app.route("/save", methods = ['PUT', 'POST', 'GET'])
@@ -449,6 +442,26 @@ def hostname():
     return index()
 
 
+@app.route("/saveWeatherAPIKey", methods = ['PUT', 'POST'])
+def saveWeatherAPIKey():
+    
+    data= request.data.decode('utf-8')
+    settings = json.loads(data)
+    
+    key = settings['api_key']
+    print(key)
+    with open('./api_keys.txt') as f:
+        lines = f.readlines()
+        if len(lines) == 1:
+            lines.append(str(key))
+        elif len(lines) == 2:
+            lines[1] = str(key)
+    print(lines)
+    with open('./api_keys.txt', 'w') as f:
+        for line in lines:
+            f.write(line)
+    return index()
+    
 @app.route("/screensaver", methods = ['PUT', 'POST'])
 def screensaver():
     global displaying_screensaver
@@ -516,7 +529,6 @@ def save_trade_settings(input_settings):
     current_settings['percent'] = input_settings['percent']
     current_settings['point'] = input_settings['point']
     current_settings['logos'] = input_settings['logos']
-    current_settings['chart'] = input_settings['chart']
     current_settings['title'] = input_settings['title']
     
     

static/app.js

@@ -345,11 +345,11 @@ const addEventOnFeaturesList = () => {
           availableFeature.setAttribute("class", "");
         } else {
           availableFeature.setAttribute("class", "active");
-          let getCustomImages = JSON.parse(
-            localStorage.getItem("customImages")
-          );
-          let getCustomGifs = JSON.parse(localStorage.getItem("customGifs"));
-          let getCustomMsg = JSON.parse(localStorage.getItem("customMsg"));
+          // let getCustomImages = JSON.parse(
+          //   localStorage.getItem("customImages")
+          // );
+          // let getCustomGifs = JSON.parse(localStorage.getItem("customGifs"));
+          // let getCustomMsg = JSON.parse(localStorage.getItem("customMsg"));
 
           getCustomImages.map((value) => {
             let scrollSpeed1 = document.getElementById("inputScrollSpeed11");
@@ -484,34 +484,37 @@ allFeaturesRemoveBtns.map((value, index) => {
   value.addEventListener("click", () => {
     for (let i = 0; i < allFeaturesList[index].length; i++) {
       var item = allFeaturesList[index][i];
+      console.log(item);
       if (item.getAttribute("class") == "active") {
         if (item.parentElement.getAttribute("id") == "images-features") {
-          let getImages = JSON.parse(localStorage.getItem("customImages"));
+          // let getImages = JSON.parse(localStorage.getItem("customImages"));
 
           let filter = getImages.filter(
             (value) => value.fileName !== item.innerText
           );
-          localStorage.setItem("customImages", JSON.stringify(filter));
+          // localStorage.setItem("customImages", JSON.stringify(filter));
         } else if (item.parentElement.getAttribute("id") == "gifs-features") {
-          let getGifs = JSON.parse(localStorage.getItem("customGifs"));
+          // let getGifs = JSON.parse(localStorage.getItem("customGifs"));
 
           let filter = getGifs.filter(
             (value) => value.fileName !== item.innerText
           );
-          localStorage.setItem("customGifs", JSON.stringify(filter));
+          // localStorage.setItem("customGifs", JSON.stringify(filter));
         } else if (
           item.parentElement.getAttribute("id") == "messages-features"
         ) {
-          let getMsgs = JSON.parse(localStorage.getItem("customMsg"));
+          // let getMsgs = JSON.parse(localStorage.getItem("customMsg"));
 
           let filter = getMsgs.filter(
             (value) => value.messageName !== item.innerText
           );
-          localStorage.setItem("customMsg", JSON.stringify(filter));
+          // localStorage.setItem("customMsg", JSON.stringify(filter));
         }
+        else {
           item.remove();
         }
       }
+    }
   });
 });
 
@@ -727,6 +730,26 @@ var allFeaturesTextAddBtn = [
   messagesTextAddBtn,
 ];
 
+
+var allFeaturesLimit = [
+  200,
+  100,
+  100,
+  20,
+  20,
+  null,
+  null,
+  null,
+  null,
+  null,
+  20,
+  20,
+  20,
+];
+
+
+
+
 allFeaturesTextAddBtn.map((value, index) => {
   if (value !== null) {
     value.addEventListener("click", () => {
@@ -766,27 +789,45 @@ allFeaturesTextAddBtn.map((value, index) => {
             displayCheck,
           };
 
-          let getCustomMsg = localStorage.getItem("customMsg");
+          // let getCustomMsg = localStorage.getItem("customMsg");
 
           let newValues = getCustomMsg && JSON.parse(getCustomMsg);
           getCustomMsg && newValues.push(values);
 
-          getCustomMsg
-            ? localStorage.setItem("customMsg", JSON.stringify(newValues))
-            : localStorage.setItem("customMsg", JSON.stringify([values]));
+          // getCustomMsg
+            // ? localStorage.setItem("customMsg", JSON.stringify(newValues))
+            // : localStorage.setItem("customMsg", JSON.stringify([values]));
           var tag = document.createElement("li");
-          tag.innerHTML = allFeaturesText[index].value;
-          allFeatures[index].appendChild(tag);
+          var msg = "You've reached the maximum limit of items to add for this feature";
+
+          // if the list length exceeds the limit
+          if (allFeatures[index].getElementsByTagName("li").length == allFeaturesLimit[index]){
+            document.getElementById("limit-msg").innerHTML = msg;
           }
+             
+          else{
+            tag.innerHTML = allFeaturesText[index].value;
+            allFeatures[index].appendChild(tag);
             changeVarValue();
             addEventOnFeaturesList();
+          }
+        }
       } else {
+        var msg = "You've reached the maximum limit of items to add for this feature";
+
+        // if the list length exceeds the limit
+        if (allFeatures[index].getElementsByTagName("li").length > allFeaturesLimit[index]){
+          document.getElementById("limit-msg").innerHTML = msg;
+        }
+
+        else{
             var tag = document.createElement("li");
             tag.innerHTML = allFeaturesText[index].value;
             allFeatures[index].appendChild(tag);
             changeVarValue();
             addEventOnFeaturesList();
         }
+    }
     });
   }
 });
@@ -794,11 +835,9 @@ allFeaturesTextAddBtn.map((value, index) => {
 var startButton = document.getElementById("start-btn");
 // start the display
 startButton.addEventListener("click", () => {
-    
     fetch("/start", {
       method: "PUT",
     }); 
-    
 });
 
 var brightnessButton = document.getElementById("brightness-btn");
@@ -819,6 +858,16 @@ shutdownButton.addEventListener("click", () => {
   });
 });
 
+
+var restartButton = document.getElementById("restart-btn");
+
+restartButton.addEventListener("click", () => {
+  fetch("/restart", {
+    method: "GET",
+  });
+});
+
+
 var stopButton = document.getElementById("stop-btn");
 stopButton.addEventListener("click", () => {
   fetch("/stop", {
@@ -910,13 +959,9 @@ function getDisplaying(){
  
 }
 
-
-// gets feature specific settings
-function getFeatureSettings() {
-  
+function get_page(){
   let featureSelector = document.getElementById("drop");
   feature = getSelected(featureSelector);
-
   let features = [
     "Stocks",
     "Crypto",
@@ -936,6 +981,13 @@ function getFeatureSettings() {
   let pageSelector = "Page" + pageNum.toString();
 
   let page = document.getElementById(pageSelector);
+  return page;
+}
+
+// gets feature specific settings
+function getFeatureSettings() {
+  
+  let page = get_page();
 
   // these common to all settings
   let speed = getSelected(page.querySelectorAll(".speed-select")[0]);
@@ -1021,7 +1073,7 @@ function saveSettings() {
 }
 
 
-let saveSettingsButtons = document.querySelectorAll(".save-btn-div").forEach((button) => button.addEventListener("click", saveSettings));
+let saveSettingsButtons = document.querySelectorAll(".save-btn").forEach((button) => button.addEventListener("click", saveSettings));
 
 // gets the stock, crypto or forex specific settings
 function getTradingSettings(page) {
@@ -1029,7 +1081,6 @@ function getTradingSettings(page) {
   let percent = page.querySelectorAll(".percent-select")[0].checked;
   let point = page.querySelectorAll(".point-select")[0].checked;
   let no_logos = page.querySelectorAll(".logo-select")[0].checked;
-  let chart = page.querySelectorAll(".chart-select")[0].checked;
   let title = page.querySelectorAll(".title-select")[0].checked;
 
   let symbols_el = page.querySelectorAll(".symbol-list")[0];
@@ -1039,7 +1090,6 @@ function getTradingSettings(page) {
     percent: percent,
     point: point,
     logos: no_logos,
-    chart: chart,
     title: title,
     symbols: symbols,
   };
@@ -1053,11 +1103,14 @@ function getWeatherSettings(page) {
   let speed = getSelected(page.querySelectorAll(".wind-speed-select")[0]);
   
   let title = page.querySelectorAll(".title-select")[0].checked;
+  let api_key = page.querySelectorAll(".api-key")[0];
 
+  let
   settings = {
     temp: temp,
     wind_speed: speed,
     title: title,
+    api_key:api_key
   };
 
   //only for daily weather
@@ -1074,19 +1127,41 @@ function getWeatherSettings(page) {
   return settings;
 }
 
+function saveWeatherAPIKey(){
+  let page = get_page();
+  
+  let api_key = page.querySelectorAll(".api-key")[0].value;
+  let settings = {
+    api_key:api_key
+  };
+  
+  console.log(settings);
+  
+  fetch("/saveWeatherAPIKey", {
+    method: "POST",
+    body: JSON.stringify(settings),
+  });
+}
+
+
+
+
+var weatherAPIbtn = document.getElementById("weather-api-btn");
+weatherAPIbtn.addEventListener("click", saveWeatherAPIKey);
+
 function getNewsSettings(page) {
   let country = getSelected(page.querySelectorAll(".country-select")[0]);
   let category = getSelected(page.querySelectorAll(".category-select")[0]);
   let title = page.querySelectorAll(".title-select")[0].checked;
-  let use_sources = page.querySelectorAll(".sources-select")[0].checked;
+  // let use_sources = page.querySelectorAll(".sources-select")[0].checked;
 
-  let sources_el = page.querySelectorAll(".sources-list")[0];
-  let sources = getListItems(sources_el);
+  // let sources_el = page.querySelectorAll(".sources-list")[0];
+  // let sources = getListItems(sources_el);
   settings = {
     country: country,
     category: category,
     title: title,
-    use_sources: use_sources,
+    // use_sources: use_sources,
     sources: sources,
   };
   return settings;
@@ -1111,7 +1186,7 @@ allFeaturesFileAddBtn.map((value, index) => {
       var tag = document.createElement("li");
       tag.innerHTML = allFeaturesFile[index].files[0].name;
       if (index == 10) {
-        let getCustomImg = localStorage.getItem("customImages");
+        // let getCustomImg = localStorage.getItem("customImages");
         let fileName = imagesFile.files[0].name;
         let scrollSpeed = document.getElementById("inputScrollSpeed11").value;
         let scrollSpeed2 = document.getElementById(
@@ -1141,15 +1216,15 @@ allFeaturesFileAddBtn.map((value, index) => {
           let newValues = getCustomImg && JSON.parse(getCustomImg);
           getCustomImg && newValues.push(values);
 
-          getCustomImg
-            ? localStorage.setItem("customImages", JSON.stringify(newValues))
-            : localStorage.setItem("customImages", JSON.stringify([values]));
+          // getCustomImg
+          //   ? localStorage.setItem("customImages", JSON.stringify(newValues))
+          //   : localStorage.setItem("customImages", JSON.stringify([values]));
 
           uploaded_images.push(allFeaturesFile[index].files[0]);
           allFeatures[index].appendChild(tag);
         }
       } else if (index == 11) {
-        let getCustomGifs = localStorage.getItem("customGifs");
+        // let getCustomGifs = localStorage.getItem("customGifs");
         let fileName = allFeaturesFile[index].files[0].name;
         let scrollSpeed = document.getElementById("inputScrollSpeed12").value;
         let scrollSpeed2 = document.getElementById(
@@ -1179,15 +1254,15 @@ allFeaturesFileAddBtn.map((value, index) => {
           let newValues = getCustomGifs && JSON.parse(getCustomGifs);
           getCustomGifs && newValues.push(values);
 
-          getCustomGifs
-            ? localStorage.setItem("customGifs", JSON.stringify(newValues))
-            : localStorage.setItem("customGifs", JSON.stringify([values]));
+          // getCustomGifs
+          //   ? localStorage.setItem("customGifs", JSON.stringify(newValues))
+          //   : localStorage.setItem("customGifs", JSON.stringify([values]));
 
           uploaded_GIFs.push(allFeaturesFile[index].files[0]);
           allFeatures[index].appendChild(tag);
         }
       }
-
+      imagesFile.value = "";
       changeVarValue();
       addEventOnFeaturesList();
     });
@@ -1273,23 +1348,23 @@ let countryCodeInput = document.getElementById("country-code-input");
 let joinNetworkBtn = document.querySelector("#join-network-btn");
 let connectedText = document.querySelector("#connected-text");
 
-joinNetworkBtn.addEventListener("click", () => {
-  localStorage.setItem("wifiSsid", wifiSsidInput.value);
-  localStorage.setItem("wifiPass", wifiPassInput.value);
-  localStorage.setItem("countryCode", countryCodeInput.value);
+// joinNetworkBtn.addEventListener("click", () => {
+//   localStorage.setItem("wifiSsid", wifiSsidInput.value);
+//   localStorage.setItem("wifiPass", wifiPassInput.value);
+//   localStorage.setItem("countryCode", countryCodeInput.value);
 
-  connectedText.style.display = "block";
-  setTimeout(() => {
-    connectedText.style.display = "none";
-  }, 2000);
+//   connectedText.style.display = "block";
+//   setTimeout(() => {
+//     connectedText.style.display = "none";
+//   }, 2000);
   
-  data = {country:countryCodeInput.value, ssid:wifiSsidInput.value, pwd:wifiPassInput.value}
+//   data = {country:countryCodeInput.value, ssid:wifiSsidInput.value, pwd:wifiPassInput.value}
   
-  fetch("/wifi", {
-      method: "POST",
-      body: JSON.stringify(data),
-    });
-});
+//   fetch("/wifi", {
+//       method: "POST",
+//       body: JSON.stringify(data),
+//     });
+// });
 
 // change display format
 let displayFormatDropDown = document.querySelector("#inputDisplayFormat");
@@ -1332,7 +1407,7 @@ let hostNameText = document.getElementById("host-name");
 
 hostNameBtn.addEventListener("click", () => {
   hostNameText.innerText = hostNameInput.value;
-  localStorage.setItem("hostName", hostNameText.innerText);
+  // localStorage.setItem("hostName", hostNameText.innerText);
   
    data = {hostname:hostNameText.innerText}
   
@@ -1342,13 +1417,30 @@ hostNameBtn.addEventListener("click", () => {
     });
 });
 
+// Add Weather API Key
+
+// let weatherKeyInput = document.getElementById("api-key");
+// let weatherKeyBtn = document.getElementById("weather-api-button");
+// let inputTextWeather = document.getElementById("inputText-weather");
+
+// weatherKeyBtn.addEventListener("click", () => {
+//    inputTextWeather.innerText = weatherKeyInput.value;
+//    data = {api-key:inputTextWeather.innerText}
+
+//    fetch("/weatherAPI", {
+//    	method: "POST",
+//    	body: JSON.stringify(data),
+//    });
+// });
+
+
 // change brightness
 
 let brightnessInput = document.getElementById("brightness-input");
 let brightnessBtn = document.getElementById("brightness-btn");
 
 brightnessBtn.addEventListener("click", () => {
-  localStorage.setItem("brightness", brightnessInput.value);
+  // localStorage.setItem("brightness", brightnessInput.value);
 });
 
 // change input animation
@@ -1372,16 +1464,16 @@ for (let i = 1; i <= 13; i++) {
 }
 
 window.onload = () => {
-  let getHostName = localStorage.getItem("hostName");
-  let getBrightness = localStorage.getItem("brightness");
-  let getWifiSsid = localStorage.getItem("wifiSsid");
-  let getWifiPass = localStorage.getItem("wifiPass");
-  let getCountryCode = localStorage.getItem("countryCode");
-  let getInputAnimation = localStorage.getItem("inputAnimation");
+  // let getHostName = localStorage.getItem("hostName");
+  // let getBrightness = localStorage.getItem("brightness");
+  // let getWifiSsid = localStorage.getItem("wifiSsid");
+  // let getWifiPass = localStorage.getItem("wifiPass");
+  // let getCountryCode = localStorage.getItem("countryCode");
+  // let getInputAnimation = localStorage.getItem("inputAnimation");
 
-  getHostName &&
-    (hostNameText.innerText = getHostName) &&
-    (hostNameInput.value = getHostName);
+  // getHostName &&
+  //   (hostNameText.innerText = getHostName) &&
+  //   (hostNameInput.value = getHostName);
 
   //getBrightness && (brightnessInput.value = getBrightness);
   //getWifiSsid && (wifiSsidInput.value = getWifiSsid);

static/bootstrap/css/bootstrap-reboot.css

@@ -0,0 +1,426 @@
+/*!
+ * Bootstrap Reboot v5.0.2 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  background-color: #fff;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+hr {
+  margin: 1rem 0;
+  color: inherit;
+  background-color: currentColor;
+  border: 0;
+  opacity: 0.25;
+}
+
+hr:not([size]) {
+  height: 1px;
+}
+
+h6, h5, h4, h3, h2, h1 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: calc(1.375rem + 1.5vw);
+}
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 2.5rem;
+  }
+}
+
+h2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  h2 {
+    font-size: 2rem;
+  }
+}
+
+h3 {
+  font-size: calc(1.3rem + 0.6vw);
+}
+@media (min-width: 1200px) {
+  h3 {
+    font-size: 1.75rem;
+  }
+}
+
+h4 {
+  font-size: calc(1.275rem + 0.3vw);
+}
+@media (min-width: 1200px) {
+  h4 {
+    font-size: 1.5rem;
+  }
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title],
+abbr[data-bs-original-title] {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul {
+  padding-left: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 0.875em;
+}
+
+mark {
+  padding: 0.2em;
+  background-color: #fcf8e3;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+a {
+  color: #0d6efd;
+  text-decoration: underline;
+}
+a:hover {
+  color: #0a58ca;
+}
+
+a:not([href]):not([class]), a:not([href]):not([class]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1em;
+  direction: ltr /* rtl:ignore */;
+  unicode-bidi: bidi-override;
+}
+
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  font-size: 0.875em;
+}
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}
+
+code {
+  font-size: 0.875em;
+  color: #d63384;
+  word-wrap: break-word;
+}
+a > code {
+  color: inherit;
+}
+
+kbd {
+  padding: 0.2rem 0.4rem;
+  font-size: 0.875em;
+  color: #fff;
+  background-color: #212529;
+  border-radius: 0.2rem;
+}
+kbd kbd {
+  padding: 0;
+  font-size: 1em;
+  font-weight: 700;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: #6c757d;
+  text-align: left;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+label {
+  display: inline-block;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+[role=button] {
+  cursor: pointer;
+}
+
+select {
+  word-wrap: normal;
+}
+select:disabled {
+  opacity: 1;
+}
+
+[list]::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+button:not(:disabled),
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled) {
+  cursor: pointer;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  float: left;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0.5rem;
+  font-size: calc(1.275rem + 0.3vw);
+  line-height: inherit;
+}
+@media (min-width: 1200px) {
+  legend {
+    font-size: 1.5rem;
+  }
+}
+legend + * {
+  clear: left;
+}
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  outline-offset: -2px;
+  -webkit-appearance: textfield;
+}
+
+/* rtl:raw:
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+*/
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::file-selector-button {
+  font: inherit;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+iframe {
+  border: 0;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+/*# sourceMappingURL=bootstrap-reboot.css.map */

static/bootstrap/css/bootstrap-reboot.min.css

@@ -0,0 +1,8 @@
+/*!
+ * Bootstrap Reboot v5.0.2 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;background-color:currentColor;border:0;opacity:.25}hr:not([size]){height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[data-bs-original-title],abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{padding:.2em;background-color:#fcf8e3}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#0d6efd;text-decoration:underline}a:hover{color:#0a58ca}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em;direction:ltr;unicode-bidi:bidi-override}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:#d63384;word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:.875em;color:#fff;background-color:#212529;border-radius:.2rem}kbd kbd{padding:0;font-size:1em;font-weight:700}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]::-webkit-calendar-picker-indicator{display:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::file-selector-button{font:inherit}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}
+/*# sourceMappingURL=bootstrap-reboot.min.css.map */

static/bootstrap/css/bootstrap-reboot.rtl.css

@@ -0,0 +1,423 @@
+/*!
+ * Bootstrap Reboot v5.0.2 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  background-color: #fff;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+hr {
+  margin: 1rem 0;
+  color: inherit;
+  background-color: currentColor;
+  border: 0;
+  opacity: 0.25;
+}
+
+hr:not([size]) {
+  height: 1px;
+}
+
+h6, h5, h4, h3, h2, h1 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: calc(1.375rem + 1.5vw);
+}
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 2.5rem;
+  }
+}
+
+h2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  h2 {
+    font-size: 2rem;
+  }
+}
+
+h3 {
+  font-size: calc(1.3rem + 0.6vw);
+}
+@media (min-width: 1200px) {
+  h3 {
+    font-size: 1.75rem;
+  }
+}
+
+h4 {
+  font-size: calc(1.275rem + 0.3vw);
+}
+@media (min-width: 1200px) {
+  h4 {
+    font-size: 1.5rem;
+  }
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title],
+abbr[data-bs-original-title] {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul {
+  padding-right: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-right: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 0.875em;
+}
+
+mark {
+  padding: 0.2em;
+  background-color: #fcf8e3;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+a {
+  color: #0d6efd;
+  text-decoration: underline;
+}
+a:hover {
+  color: #0a58ca;
+}
+
+a:not([href]):not([class]), a:not([href]):not([class]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1em;
+  direction: ltr ;
+  unicode-bidi: bidi-override;
+}
+
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  font-size: 0.875em;
+}
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}
+
+code {
+  font-size: 0.875em;
+  color: #d63384;
+  word-wrap: break-word;
+}
+a > code {
+  color: inherit;
+}
+
+kbd {
+  padding: 0.2rem 0.4rem;
+  font-size: 0.875em;
+  color: #fff;
+  background-color: #212529;
+  border-radius: 0.2rem;
+}
+kbd kbd {
+  padding: 0;
+  font-size: 1em;
+  font-weight: 700;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: #6c757d;
+  text-align: right;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+label {
+  display: inline-block;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+[role=button] {
+  cursor: pointer;
+}
+
+select {
+  word-wrap: normal;
+}
+select:disabled {
+  opacity: 1;
+}
+
+[list]::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+button:not(:disabled),
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled) {
+  cursor: pointer;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  float: right;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0.5rem;
+  font-size: calc(1.275rem + 0.3vw);
+  line-height: inherit;
+}
+@media (min-width: 1200px) {
+  legend {
+    font-size: 1.5rem;
+  }
+}
+legend + * {
+  clear: right;
+}
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  outline-offset: -2px;
+  -webkit-appearance: textfield;
+}
+
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::file-selector-button {
+  font: inherit;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+iframe {
+  border: 0;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden] {
+  display: none !important;
+}
+/*# sourceMappingURL=bootstrap-reboot.rtl.css.map */

static/bootstrap/css/bootstrap-reboot.rtl.min.css

@@ -0,0 +1,8 @@
+/*!
+ * Bootstrap Reboot v5.0.2 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;background-color:currentColor;border:0;opacity:.25}hr:not([size]){height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[data-bs-original-title],abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-right:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-right:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{padding:.2em;background-color:#fcf8e3}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#0d6efd;text-decoration:underline}a:hover{color:#0a58ca}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em;direction:ltr;unicode-bidi:bidi-override}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:#d63384;word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:.875em;color:#fff;background-color:#212529;border-radius:.2rem}kbd kbd{padding:0;font-size:1em;font-weight:700}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:right}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]::-webkit-calendar-picker-indicator{display:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:right;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:right}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}[type=email],[type=number],[type=tel],[type=url]{direction:ltr}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::file-selector-button{font:inherit}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}
+/*# sourceMappingURL=bootstrap-reboot.rtl.min.css.map */

static/style.css

@@ -12,6 +12,7 @@ html {
 }
 body {
   background-color: black;
+  color:white
 }
 
 /* Top logo bar */
@@ -34,16 +35,11 @@ header {
   transition: 0.25s;
 }
 .hostname-text {
-  margin: 0;
-  align-self: flex-end;
   font-style: italic;
   color: greenyellow;
-  font-size: 18px;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
 }
 
+
 /* General Ticker */
 .buttons-list {
   display: flex;
@@ -238,6 +234,20 @@ li.active {
   }
 }
 
+  .status {
+    width: 25px;
+    height: 25px;
+  }
+  #circle-1 {
+    background-color: green;
+  }
+  #circle-2 {
+    background-color: red;
+  }
+  #circle-3 {
+    background-color: orange;
+  }
+
 @media (min-width: 768px) and (max-width: 991px) {
   .icons-list a {
     position: relative;

templates/index.html

@@ -3,21 +3,19 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
     <title>Fintic</title>
 
     <!-- Bootstrap 5 CDN Links -->
-    <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
-      crossorigin="anonymous"
-    />
       <script
-      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
-      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
-      crossorigin="anonymous"
-      page
+      src="{{ url_for('static', filename='bootstrap/js/bootstrap.bundle.min.js') }}"
     ></script>
+    <link
+      href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}"
+      rel="stylesheet"
+    />
 
     <!-- Fontawesome - for icons -->
     <link
@@ -41,42 +39,65 @@
     <div class="container">
       <!-- Top logo bar -->
 
-      <header>
-        <div class="d-inline-flex align-items-end">
-          <img src="{{ url_for('static', filename='images/logo_white.png') }}" class="img-fluid logo" alt="logo" />
-          <p class="m-0 text-white">Version 1.0</p>
-        </div>
-        <p class="hostname-text">
+      <!-- Top logo bar -->
+      <nav class="navbar navbar-light justify-content-end" style="border-bottom:2px solid white">
+        <div class="container">
+          <a class="navbar-brand" href="#">
+          <img src="{{ url_for('static', filename='images/logo_white.png') }}" class="logo" alt="logo" /><p class="text-white">Version 1.0</p>
+          </a>
+        
+         <div class="hostname-text">
+          <p>
             Hostname: <span id="host-name">{{ general_settings.hostname }}</span>.local
           </p>
-        <a id="update-btn" class="btn update-btn">Check Updates</a>
-      </header>
+        </div>
+        <div class="">
+          <button id="update-btn" class="btn btn-secondary">Check Updates</button>
+        </div>
+        </div>
+      </nav>
+      <!-- End logo bar -->
 
-      <!-- General Ticker Settings -->
-      <section class="general-ticker text-white">
-        <h4 class="pt-3 pb-3">General Ticker Settings:</h4>
-        <ul class="buttons-list">
-          <!--<li><a href="/start" class="btn btn-success">Start Display</a></li>-->
-          <li><a id="start-btn" class="btn btn-success">Start Display</a></li>
-          <li>
-            <a id="stop-btn" class="btn btn-stop-display">Stop Display</a>
-          </li>
-          <li>
-            <a id="screensaver-btn" class="btn btn-warning text-white">Screensaver</a>
-          </li>
-          <li><a id="shutdown-btn" class="btn btn-danger">Shut Down</a></li>
-        </ul>
+      <!-- General Ticker Heading -->
+      <div class="row">
+        <div class="col-lg-11 col-md-11 col-sm-11" style="padding-top:2%">
+          <h3 class="text-white">
+            General Ticker Settings:
+          </h3>
+        </div>
+      </div>
+      <!-- End General Ticker Heading -->
 
-        <div class="row row-1">
+      <!-- Button List -->
+      <div class="row" style="justify-content:center">
+        <div class="col-lg-2 col-md-2 col-sm-2">
+          <a id="start-btn" class="btn btn-success">Start Display</a>
+        </div>
+        <div class="col-lg-2 col-md-2 col-sm-2">
+          <a id="stop-btn" class="btn btn-info">Stop Display</a>
+        </div>
+        <div class="col-lg-2 col-md-2 col-sm-2">
+          <a id="restart-btn" class="btn btn-dark">Restart Display</a>
+        </div>
+        <div class="col-lg-2 col-md-2 col-sm-2">
+          <a id="screensaver-btn" class="btn btn-warning text-white">Screen Saver</a>
+        </div>
+        <div class="col-lg-2 col-md-2 col-sm-2">
+          <a id="shutdown-btn" class="btn btn-danger">Shut Down</a>
+        </div>
+      </div>
+      <!-- End Button List -->
+
+      <!-- Ticker Form -->
+      <!-- First Row -->
+      <div class="ticker-form" style="padding-top:3%; padding-bottom:2%;border-bottom:2px solid white">
+      <div class="row g-3 align-items-center" >
           <div class="col-lg-6 col-md-6 col-sm-12 d-block">
             <div class="row g-3 align-items-center">
+              <!-- Brightness Input --> 
               <div class="col-auto">
-                <label for="brightness-input" class="col-form-label"
-                  >Brightness (1 - 10):
-                </label>
-              </div>
-              <br />
-              <br />
+                <label for="brightness-input" class="col-form-label">Brightness (1 - 10):</label>
+              </div><br /><br />
               <div class="col-auto">
                 <input
                   type="text"
@@ -86,20 +107,18 @@
                   value={{ general_settings.brightness }}
                 />
               </div>
-
               <div class="col-auto">
-                <button class="btn set-btn" id="brightness-btn">Set</button>
+                <button class="btn btn-secondary" id="brightness-btn">Set</button>
               </div>
             </div>
           </div>
-
-          <div class="col-lg-6 col-md-6 col-sm-12 screen-saver">
+        <!-- End Brightness Input -->
+        <div class="col-lg-6 col-md-6 col-sm-12 d-block">
             <div class="row g-3 align-items-center">
               <div class="col-auto">
-                <label for="inputAnimation" class="col-form-label"
-                  >Screensaver animation:
+                <label for="inputAnimation" class="col-form-label">Screensaver animation:
                 </label>
-              </div>
+              </div><br/><br/>
               <div class="col-auto">
                 <select id="inputAnimation" class="form-select">
                   <option>Pulsating Colors</option>
@@ -110,20 +129,21 @@
                 </select>
               </div>
               <div class="col-auto" id="input-animation-btn">
-                <button class="btn set-btn">Set</button>
+                <button class="btn btn-secondary">Set</button>
               </div>
             </div>
           </div>
         </div>
+      <!-- End First Row -->
 
-        <div class="row">
-          <div class="col-lg-6 col-md-6 col-sm-12">
+      <!-- Second Row -->
+      <div class="row g-3 align-items-center" style="padding-top:3%">
+        <div class="col-lg-6 col-md-6 col-sm-12 d-block">
           <div class="row g-3 align-items-center">
+            <!-- Host Name Input --> 
             <div class="col-auto">
-                <label for="host-name-input" class="col-form-label"
-                  >Change host name:
-                </label>
-              </div>
+              <label for="host-name-input" class="col-form-label">Change host name:</label>
+            </div><br/><br/>
               <div class="col-auto">
                 <input
                   type="text"
@@ -133,126 +153,112 @@
                   value={{ general_settings.hostname }}
                 />
               </div>
-
             <div class="col-auto">  
-                <button id="host-name-btn" class="btn set-btn">Set</button>
+              <button class="btn btn-secondary" id="host-name-btn">Set</button>
             </div>
           </div>
         </div>
-          <div class="col-lg-6 col-md-6 col-sm-12">
+        <!-- End Brightness Input -->
+        <div class="col-lg-6 col-md-6 col-sm-12 d-block">
           <div class="row g-3 align-items-center"> 
             <div class="col-auto">
-                <label for="inputDisplayFormat" class="col-form-label"
-                  >Ticker Display Format:
+              <label for="inputDisplayFormat" class="col-form-label">Ticker Display Format:
               </label>        
-              </div>
+            </div><br/><br/>
           <div class="col-auto">
             <select id="inputDisplayFormat" class="form-select">
                   <option>Standard Scrolling</option>
                   <option>Professional two rows</option>
-                  
                 </select>
           </div>   
-              <div class="col-auto">
-                <button id="dispformat-btn" class="btn set-btn">Set</button>
+          <div class="col-auto" id="input-animation-btn">  
+            <button class="btn btn-secondary" id="dispformat-btn">Set</button>
           </div>
           </div>
         </div>
       </div>
+    </div>
+      <!-- End Second Row -->      
+      <!-- End Ticker Form -->
 
-
-
-        <div class="row-2"></div>
-      </section>
-
-      <!-- Features to Display -->
-      <section class="display-features text-white">
-        <h4 class="pt-3">Features to Display:</h4>
+          <!-- Features to Display Heading-->
+    <div class="row">
+      <div class="col-lg-11 col-md-11 col-sm-11" style="padding-top:2%">
+        <h3 class="text-white">Features to Display:</h3>
         <p>
           Selected Display format:
           <span class="font-6" id="selected-display-text"></span>
         </p>
-        <div class="row row-3">
-          <h4 id="top-row-text">Top row</h4>
+      </div>   
+    </div><br>
 
+    <!-- Features List First Row -->
+    <div class="row" style="border-bottom:2px solid white; padding:2%">
+      <!-- Available Features Column -->
       <div class="col-lg-4 col-md-4 col-sm-12 ">
-            <h6>Available Features:</h6>
-            <div class="features-div">
+        <div class="row">
+          <h4 id="top-row-text" style="display:none">Top row</h4>
+        <h6 class="col-lg-6 col-md-6 col-sm-12">Available Features:</h6>
+        </div>
+            <div class="row features-div">
               <ul
                 id="available-features"
-                class="display-features-list text-dark"
-              >
+                class="display-features-list text-dark">
                {% for f in not_displaying %}
                       <li>{{f}}</li>
                   {% endfor%}
               </ul>
             </div>
           </div>
-          <div class="col-lg-2 col-md-2 col-sm-12">
-            <div class="icons-list">
-              <i
-                id="feature-to-display"
-                class="fa fa-chevron-right"
-                aria-hidden="true"
-              ></i>
-              <br />
-              <br />
-              <i
-                id="display-to-feature"
-                class="fa fa-chevron-left"
-                aria-hidden="true"
-              ></i>
+      <!-- End Features Column -->
+      <div class="col-lg-2 col-md-2 col-sm-2 align-self-center" style="padding-top:2%;padding-bottom:5%">
+        <div class="icon-list">
+        <i id="feature-to-display" class="fa fa-chevron-right" aria-hidden="true"></i><br><br>
+        <i id="display-to-feature" class="fa fa-chevron-left" aria-hidden="true"></i>           
         </div>
       </div>
+
+      <!-- DIsplay Format Column -->
       <div class="col-lg-4 col-md-4 col-sm-12">
-            <h6>Display Format:</h6>
-            <div class="features-div">
-              <ul
-                id="display-format"
-                class="display-features-list text-dark"
-              >
+        <div class="row">
+          <h6 class="col-lg-6 col-md-6 col-sm-12">Display Format:</h6>
+        </div>
+            <div class="row features-div">
+              <ul id="display-format" class="display-features-list text-dark">
+                  
                   
                   
                     {% for f in currently_displaying[0] %}
                             <li>{{f}}</li>
                       {% endfor%}
                 
-                  
-                  
                 </ul>
             </div>
           </div>
-          <div class="col-lg-2 col-md-2 col-sm-12">
-            <div class="icons-list">
-              <i
-                id="display-increase-btn"
-                class="fa fa-chevron-up"
-                aria-hidden="true"
-              ></i>
-              <br />
-              <br />
-              <i
-                id="display-decrease-btn"
-                class="fa fa-chevron-down"
-                aria-hidden="true"
-              ></i>
-              <a style="position: relative; bottom: 30px; left: 10px"
-                >Sort Order</a
-              >
+    <div class="col-lg-2 col-md-2 col-sm-2 align-self-center" style="padding-top:2%;padding-bottom:5%">
+      <div class="icon">
+        <i id="display-increase-btn" class="fa fa-chevron-up" aria-hidden="true"></i><br><br>
+        <i id="display-decrease-btn" class="fa fa-chevron-down" aria-hidden="true"></i>  
+        <a>Sort Order</a>
             </div>
           </div>
         </div>
+    <!-- End Display Format -->
     
-        <div id="second-row" class="row row-3">
-          <h4 id="bottom-row-text">Bottom row</h4>
+    <!-- End Features List ROw -->
 
+    <!-- Features List Second Row -->
+    <div id="second-row" class="row" style="border-bottom:2px solid white; padding:2%">
+      <h4 id="bottom-row-text" style="display:none">Bottom row</h4>
+      <!-- Available Features Column -->
           <div class="col-lg-4 col-md-4 col-sm-12">
-            <h6>Available Features:</h6>
-            <div class="features-div">
+          <div class="row">
+            <h6 class="col-lg-6 col-md-6 col-sm-12">Available Features:</h6>
+          </div>
+            <div class="row features-div">
               <ul
                 id="available-features-2"
-                class="display-features-list text-dark"
-              >
+                class="display-features-list text-dark">
                 <li>Stocks</li>
                 <li>Crypto</li>
                 <li>Forex</li>
@@ -269,71 +275,49 @@
               </ul>
             </div>
           </div>
-          <div class="col-lg-2 col-md-2 col-sm-12">
-            <div class="icons-list">
-              <i
-                id="feature-to-display-2"
-                class="fa fa-chevron-right"
-                aria-hidden="true"
-              ></i>
-              <br />
-              <br />
-              <i
-                id="display-to-feature-2"
-                class="fa fa-chevron-left"
-                aria-hidden="true"
-              ></i>
+
+          <!-- End Features Column -->
+      <div class="col-lg-2 col-md-2 col-sm-2 align-self-center">
+        <div class="icon-list">
+        <i id="feature-to-display-2" class="fa fa-chevron-right" aria-hidden="true"></i><br><br>
+        <i id="display-to-feature-2" class="fa fa-chevron-left" aria-hidden="true"></i>           
         </div>
       </div>
+
+          <!-- DIsplay Format Column -->
           <div class="col-lg-4 col-md-4 col-sm-12">
-            <h6>Display Format:</h6>
-            <div class="features-div">
-              <ul
-                id="display-format-2"
-                class="display-features-list text-dark"
+          <div class="row">
+            <h6 class="col-lg-6 col-md-6 col-sm-12">Display Format:</h6>
+          </div>            
+            <div class="row features-div">
+              <ul id="display-format-2" class="display-features-list text-dark">
                 {%if professional%}
                     {% for f in currently_displaying[1] %}
                             <li> {{f}} </li>
                       {% endfor%}
                   {%endif%}
+              </ul>
+            </div>
+          </div>
+    <div class="col-lg-2 col-md-2 col-sm-2 align-self-center">
+      <div class="icon">
+        <i id="display-increase-btn-2" class="fa fa-chevron-up" aria-hidden="true"></i><br><br>
+        <i id="display-decrease-btn-2" class="fa fa-chevron-down" aria-hidden="true"></i>  
+        <a style="position: relative; bottom: 30px; left: 10px">Sort Order</a>
+      </div>
+    </div>
+    </div> 
+    <!-- End Display Format -->
+    <!-- End Features List ROw -->
 
-              ></ul>
-            </div>
-          </div>
-          <div class="col-lg-2 col-md-2 col-sm-12">
-            <div class="icons-list">
-              <i
-                id="display-increase-btn-2"
-                class="fa fa-chevron-up"
-                aria-hidden="true"
-              ></i>
-              <br />
-              <br />
-              <i
-                id="display-decrease-btn-2"
-                class="fa fa-chevron-down"
-                aria-hidden="true"
-              ></i>
-              <a style="position: relative; bottom: 30px; left: 10px"
-                >Sort Order</a
-              >
-            </div>
-          </div>
-        </div>
-
-        <div class="row-2"></div>
-      </section>
-
-      <!-- what to display in each feature(Stocks) -->
-      <section class="stocks-features text-white row-3">
+    <!-- What to Display in Each Feature -->
+    <div class="row" style="padding:2%">
       <h4 class="pt-3">What to display in each feature:</h4>
-        <div
-          class="row g-3 align-items-center d-flex justify-content-center mt-3"
-        >
+    </div>
+      <div class="row justify-content-center">
           <div class="col-auto">
             <label for="drop" class="col-form-label">Feature:</label>
           </div>
-
           <div class="col-auto">
             <select id="drop" class="form-select">
               <option value="1">Stocks</option>
@@ -351,7 +335,7 @@
               <option value="13">Custom Messages</option>
             </select>
           </div> 
-
+        </div><!-- End Row Dropdown Display Feature -->
           <!-- Stocks -->
           <div class="page" id="Page1">
             <div class="row">
@@ -430,6 +414,9 @@
                   </div>
                 </div>
 
+                <div id="limit-msg">
+                </div>
+
                 <div class="row g-3 align-items-center mt-3 left-div">
                   <div class="col-auto">
                     <label for="inputTransition" class="col-form-label"
@@ -491,7 +478,7 @@
                   </div>
                 </div>
 
-                <div class="row g-3 align-items-center left-div">
+               <!--  <div class="row g-3 align-items-center left-div">
                   <div class="col-auto">
                     <label for="inputTransition" class="col-form-label"
                       >Display Intraday Chart
@@ -510,7 +497,7 @@
                       {%endif%}
                     />
                   </div>
-                </div>
+                </div> -->
 
                 <div class="row g-3 align-items-center left-div">
                   <div class="col-auto">
@@ -662,6 +649,9 @@
                   </div>
                 </div>
 
+                <div id="limit-msg">
+                </div>
+
                 <div class="row g-3 align-items-center mt-3">
                   <div class="col-auto">
                     <label for="inputTransition" class="col-form-label"
@@ -725,7 +715,7 @@
                   </div>
                 </div>
 
-                <div class="row g-3 align-items-center">
+<!--                 <div class="row g-3 align-items-center">
                   <div class="col-auto">
                     <label for="inputTransition" class="col-form-label"
                       >Display Intraday Chart
@@ -744,7 +734,7 @@
                       {%endif%}
                     />
                   </div>
-                </div>
+                </div> -->
 
                 <div class="row g-3 align-items-center">
                   <div class="col-auto">
@@ -895,6 +885,9 @@
                   </div>
                 </div>
 
+                <div id="limit-msg">
+                </div>
+
                 <div class="row g-3 align-items-center mt-3">
                   <div class="col-auto">
                     <label for="inputTransition" class="col-form-label"
@@ -957,7 +950,7 @@
                     />
                   </div>
                 </div>
-
+<!-- 
                 <div class="row g-3 align-items-center">
                   <div class="col-auto">
                     <label for="inputTransition" class="col-form-label"
@@ -977,7 +970,7 @@
                       {%endif%}
                     />
                   </div>
-                </div>
+                </div> -->
 
                 <div class="row g-3 align-items-center">
                   <div class="col-auto">
@@ -1127,6 +1120,9 @@
                   </div>
                 </div>
 
+                <div id="limit-msg">
+                </div>
+
                 <div class="row g-3 align-items-center mt-3">
                   <div class="col-auto">
                     <label for="inputScrollSpeed" class="col-form-label"
@@ -1188,7 +1184,26 @@
                     />
                   </div>
                 </div>
+
+                <div class="row g-3 align-items-center mt-3">
+                  <div class="col-auto">
+                    <label for="inputText" class="col-form-label">API Key: </label>
                   </div>
+                  <div class="col-auto">
+                    <input
+                      type="text"
+                      id="api-key1"
+                      class="form-control api-key"
+                      aria-describedby="TextHelpInline"
+                    />
+                  </div>
+                  <div class="col-auto">
+                    <button id="weather-api-btn" class="btn set-btn">Add</button>
+                  </div>
+                </div>
+              </div>
+
+
               <div class="col-lg-4 col-md-4 col-sm-12">
                 <h6 class="mt-3">List:</h6>
                 <div class="features-div-two">
@@ -1316,6 +1331,9 @@
                   </div>
                 </div>
 
+                <div id="limit-msg">
+                </div>
+
                 <div class="row g-3 align-items-center mt-3">
                   <div class="col-auto">
                     <label for="inputScrollSpeed52" class="col-form-label"
@@ -1393,7 +1411,25 @@
                     />
                   </div>
                 </div>
+                <div class="row g-3 align-items-center mt-3">
+                  <div class="col-auto">
+                    <label for="inputText" class="col-form-label">API Key: </label>
                   </div>
+                  <div class="col-auto">
+                    <input
+                      type="text"
+                      id="api-key"
+                      class="form-control api-key"
+                      aria-describedby="TextHelpInline"
+                    />
+                  </div>
+                  <div class="col-auto">
+                    <button id="weather-api-btn" class="btn set-btn">Add</button>
+                  </div>
+                </div>
+                </div>
+
+
               <div class="col-lg-4 col-md-4 col-sm-12">
                 <h6 class="mt-3">List:</h6>
                 <div class="features-div-two">
@@ -1503,6 +1539,7 @@
                   </div>
                 </div>
 
+
                 <div class="row g-3 align-items-center mt-3">
                   <div class="col-auto">
                     <label for="inputScrollSpeed62" class="col-form-label"
@@ -1514,12 +1551,27 @@
                       id="inputScrollSpeed62"
                       class="form-select country-select"
                     >
-                      <option>US</option>
-                      <option>GB</option>
-            
+                      <option>United States</option>
+                      <option>Australia</option>
+                      <option>Canada</option>
+                      <option>Great Britain</option>
+                      <option>New Zealand</option>
+                      <option>Ireland</option>
+                      <option>Singapore</option>
+                      <option>South Africa</option>
+                      <option>Worldwide</option>
                     </select>
                   </div>
+                  <div class="col-auto">
+                    <input
+                      class="form-check-input title-select news_check_class"
+                      type="checkbox"
+                      value=""
+                      id="flexCheckChecked30"
+                    />
                   </div>
+                </div>
+
 
                 <div class="row g-3 align-items-center mt-3">
                   <div class="col-auto">
@@ -1533,17 +1585,47 @@
                       class="form-select category-select"
                     >
                       <option>General</option>
-                      <option>Special</option>
-                      <option></option>
-                      <option></option>
-                      <option></option>
+                      <option>Business</option>
+                      <option>Entertainment</option>
+                      <option>Health</option>
+                      <option>Science</option>
+                      <option>Sports</option>
+                      <option>Technology</option>
+                    </select>
+                  </div>
+                  <div class="col-auto">
+                    <input
+                      class="form-check-input title-select news_check_class"
+                      type="checkbox"
+                      value=""
+                      id="flexCheckChecked31"
+                    />
+                  </div>
+                </div>
+
+                <div class="row g-3 align-items-center mt-3">
+                  <div class="col-auto">
+                    <label for="inputTransition62" class="col-form-label"
+                      >Headlines to display:
+                    </label>
+                  </div>
+                  <div class="col-auto">
+                    <select
+                      id="inputTransition62"
+                      class="form-select category-select"
+                    >
+                      <option>10</option>
+                      <option>15</option>
+                      <option>20</option>
+                      <option>25</option>
+                      <option>30</option>
                     </select>
                   </div>
                 </div>
 
-                <p class="text-center pt-2">Or</p>
+                <!-- <p class="text-center pt-2">Or</p> -->
 
-                <div class="row g-3 align-items-center mt-3">
+                <!-- <div class="row g-3 align-items-center mt-3">
                   <div class="col-auto">
                     <input
                       class="form-check-input sources-select"
@@ -1576,7 +1658,7 @@
                       Add
                     </button>
                   </div>
-                </div>
+                </div> -->
 
                 <div class="row g-3 align-items-center mt-3">
                   <div class="col-auto">
@@ -1718,7 +1800,7 @@
                     <select id="inputTransition73" class="form-select">
                       <option>NFL</option>
                       <option>NBA</option>
-                      <option>NHA</option>
+                      <option>NHL</option>
                       <option>Premier League</option>
                     </select>
                   </div>
@@ -1869,7 +1951,7 @@
                     <select id="inputTransition83" class="form-select">
                       <option>NFL</option>
                       <option>NBA</option>
-                      <option>NHA</option>
+                      <option>NHL</option>
                       <option>Premier League</option>
                     </select>
                   </div>
@@ -2020,8 +2102,7 @@
                     <select id="inputTransition93" class="form-select">
                       <option>NFL</option>
                       <option>NBA</option>
-                      <option>NHA</option>
-                      <option>Premier League</option>
+                      <option>NHL</option>
                     </select>
                   </div>
                   <div class="col-auto">
@@ -2170,8 +2251,8 @@
                     <select id="inputTransition103" class="form-select">
                       <option>NFL</option>
                       <option>NBA</option>
-                      <option>NHA</option>
-                      <option>PL</option>
+                      <option>NHL</option>
+                      <option>Premier League</option>
                     </select>
                   </div>
                   <div class="col-auto">
@@ -2277,6 +2358,9 @@
                   </div>
                 </div>
 
+                <div id="limit-msg">
+                </div>
+
                 <div class="row g-3 align-items-center mt-3">
                   <div class="col-auto">
                     <label for="inputScrollSpeed11" class="col-form-label"
@@ -2457,6 +2541,9 @@
                   </div>
                 </div>
 
+                <div id="limit-msg">
+                </div>
+
                 <div class="row g-3 align-items-center mt-3">
                   <div class="col-auto">
                     <label for="inputScrollSpeed12" class="col-form-label"
@@ -2635,6 +2722,9 @@
                   </div>
                 </div>
 
+                <div id="limit-msg">
+                </div>
+
                 <div class="row g-3 align-items-center mt-3">
                   <div class="col-auto">
                     <label for="inputScrollSpeed13" class="col-form-label"
@@ -2969,26 +3059,29 @@
                 />
               </div>
             </div>
+            <div>
+              
             </div>
-          <button class="btn set-btn h-50-px" id="join-network-btn">
+          </div>
+          <button class="btn set-btn" id="join-network-btn">
             Join Network
           </button>
-          <p class="font-6 m-0 position-absolute" id="connected-text">
-            Connected
-          </p>
+          <div id="network-status" style="padding-left:2%;padding-right:2%"></div>
+          <div class="status rounded-circle" id="circle-1" style="display:none"></div>
+          <div class="status rounded-circle" id="circle-2" style="display:none"></div>
+          <div class="status rounded-circle" id="circle-3" style="display:none"></div>
         </div> 
-        
         </section>
 
       <!-- Footer -->
       <footer class="footer">
-        <p>&copy; 2021 Fintic All Rights Reserved</p>
+        <p>&copy; 2022 Fintic All Rights Reserved</p>
         <p>Data Provided by IEX Cloud, Openweathermap, CoinGecko,</p>
-        <p>Frankfurter API, NewsAPI</p>
+        <p>Exchangerate-API, TheSportsDB, Commodities-API, NewsAPI</p>
       </footer>
     </div>
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+    <script src="{{ url_for('static', filename='js/jquery-2.1.1.js') }}"></script>
     <script src="{{ url_for('static', filename='app.js') }}"></script>
     <script>
       $("#drop").on("change", function () {
@@ -2998,6 +3091,45 @@
           $("#Page" + value).show();
         }
       });
+
+      // check / uncheck category and country checkboxes
+      $('.news_check_class').on('change', function() {
+      $('.news_check_class').not(this).prop('checked', false);  
+      });
+
+ 
+    setInterval(async () => {
+      // const result = await checkOnlineStatus();
+      const statusDisplay = $("#network-status");
+      var result;
+
+      // try to send a request to some server
+      try {
+        const online = await fetch("https://static-global-s-msn-com.akamaized.net/hp-neu/sc/2b/a5ea21.ico?d="+Date.now());
+        console.log(online.status);
+
+        if (online.status >= 200 && online.status < 300){
+          statusDisplay.text("Connected");
+          $('#circle-1').show();
+          $('#circle-2').hide();
+          $('#circle-3').hide();
+        } // either true or false
+        else {
+          statusDisplay.text("Connected but No Internet");
+          $('#circle-1').hide();
+          $('#circle-2').hide();
+          $('#circle-3').show();
+        }
+
+      } catch (err) {
+        statusDisplay.text("Offline"); // definitely offline
+        $('#circle-1').hide();
+        $('#circle-2').show();
+        $('#circle-3').hide();
+      }
+    }, 3000);
+
+
     </script>
   </body>
 </html>