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'])
@@ -447,7 +440,27 @@ def hostname():
     json.dump(general_settings, open('csv/general_settings.json', 'w+'))
     
     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():
@@ -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,32 +484,35 @@ 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();
         }
-        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();
+          }
         }
-        changeVarValue();
-        addEventOnFeaturesList();
       } else {
-        var tag = document.createElement("li");
-        tag.innerHTML = allFeaturesText[index].value;
-        allFeatures[index].appendChild(tag);
-        changeVarValue();
-        addEventOnFeaturesList();
-      }
+        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;