From 9c45227337a3f9b83d499a9c55870a9f7c2abb97 Mon Sep 17 00:00:00 2001
From: Julscha <info@julscha.de>
Date: Wed, 25 Dec 2024 07:10:18 +0100
Subject: [PATCH] feat: tailwindcss

---
 src/{ => components/js}/append_to_file.js |   0
 src/{ => components/js}/data_structure.js |   0
 src/{ => components/js}/download.js       |   0
 src/{ => components/js}/getFiles.js       |   0
 src/{ => components/js}/git_ops.js        |   0
 src/{ => components/js}/html_elements.js  |   4 +-
 src/components/js/loople.js               |   5 +-
 src/{ => components/js}/preload.js        |   4 +-
 src/{ => components/js}/save.js           |   0
 src/{ => components/js}/startup.js        |   0
 src/index.html                            |  27 +--
 src/index1.html                           |   9 +
 src/renderer.js                           |   2 +-
 src/settings.html                         | 278 ----------------------
 src/syncing.html                          | 265 ---------------------
 15 files changed, 26 insertions(+), 568 deletions(-)
 rename src/{ => components/js}/append_to_file.js (100%)
 rename src/{ => components/js}/data_structure.js (100%)
 rename src/{ => components/js}/download.js (100%)
 rename src/{ => components/js}/getFiles.js (100%)
 rename src/{ => components/js}/git_ops.js (100%)
 rename src/{ => components/js}/html_elements.js (88%)
 rename src/{ => components/js}/preload.js (55%)
 rename src/{ => components/js}/save.js (100%)
 rename src/{ => components/js}/startup.js (100%)
 delete mode 100644 src/settings.html
 delete mode 100644 src/syncing.html

diff --git a/src/append_to_file.js b/src/components/js/append_to_file.js
similarity index 100%
rename from src/append_to_file.js
rename to src/components/js/append_to_file.js
diff --git a/src/data_structure.js b/src/components/js/data_structure.js
similarity index 100%
rename from src/data_structure.js
rename to src/components/js/data_structure.js
diff --git a/src/download.js b/src/components/js/download.js
similarity index 100%
rename from src/download.js
rename to src/components/js/download.js
diff --git a/src/getFiles.js b/src/components/js/getFiles.js
similarity index 100%
rename from src/getFiles.js
rename to src/components/js/getFiles.js
diff --git a/src/git_ops.js b/src/components/js/git_ops.js
similarity index 100%
rename from src/git_ops.js
rename to src/components/js/git_ops.js
diff --git a/src/html_elements.js b/src/components/js/html_elements.js
similarity index 88%
rename from src/html_elements.js
rename to src/components/js/html_elements.js
index d036009..d6e9b85 100644
--- a/src/html_elements.js
+++ b/src/components/js/html_elements.js
@@ -1,5 +1,5 @@
 // Global Variabels
-let selectDirBtn = document.getElementById('select-dir');
+let settingsProfileDirselectbutton = document.getElementById('settingsProfileDirselectbutton');
 let dirBox = document.getElementById('dirBox');
 let usernameInput = document.getElementById('username');
 let passwordInput = document.getElementById('password');
@@ -30,6 +30,6 @@ saveCredBtn.addEventListener('click', (e) => {
     save();
 });
 
-selectDirBtn.addEventListener('click', (e) => {
+settingsProfileDirselectbutton.addEventListener('click', (e) => {
     changeUserpath();
 });
\ No newline at end of file
diff --git a/src/components/js/loople.js b/src/components/js/loople.js
index 0de984a..961c7a6 100644
--- a/src/components/js/loople.js
+++ b/src/components/js/loople.js
@@ -6,10 +6,7 @@ document.querySelector('.loopple-alert.loopple-alert-dismissible .close').onclic
     }, 1000);}
 
     document.getElementById('download').addEventListener('click', () => {
-
-    },
-    
-    );
+    });
   
 
 
diff --git a/src/preload.js b/src/components/js/preload.js
similarity index 55%
rename from src/preload.js
rename to src/components/js/preload.js
index bebb932..a06343a 100644
--- a/src/preload.js
+++ b/src/components/js/preload.js
@@ -2,8 +2,8 @@ const { contextBridge, ipcRenderer } = require('electron')
 
 process.once('loaded', () => {
     window.addEventListener('message', evt => {
-        if (evt.data.type === 'select-dirs') {
-            ipcRenderer.send('select-dirs')
+        if (evt.data.type === 'settingsProfileDirselectbutton') {
+            ipcRenderer.send('settingsProfileDirselectbutton')
         }
     })
 })
\ No newline at end of file
diff --git a/src/save.js b/src/components/js/save.js
similarity index 100%
rename from src/save.js
rename to src/components/js/save.js
diff --git a/src/startup.js b/src/components/js/startup.js
similarity index 100%
rename from src/startup.js
rename to src/components/js/startup.js
diff --git a/src/index.html b/src/index.html
index 338d377..3a68fa3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,12 +14,6 @@
         </h1>
     </div>
 </head>
-<script>
-    $(function () {
-    $("#header").load("./header.html");
-    $("#footer").load("./footer.html");
-    });
-</script>
 
 
 <body class="ecsu-bg-dark-out text-white">
@@ -27,7 +21,7 @@
 
     <div>
         <h3 class="text-white">Settings</h3>
-        <button id="select-dir">Select Directory</button>
+        <button id="settingsProfileDirselectbutton">Select Directory</button>
         <input type="text" id="dirBox" name="name" size="50" readonly />
         <progress id="progressbar" max="100" value="0"></progress>
         <p id="progressbarText"></p>
@@ -175,15 +169,16 @@
         </div>
 
 
-        <script src="./data_structure.js"></script>
-        <script src="./html_elements.js"></script>
-        <script src="./renderer.js"></script>
-        <script src="./startup.js"></script>
-        <script src="./save.js"></script>
-        <script src="./getFiles.js"></script>
-        <script src="./download.js"></script>
-        <script src="./git_ops.js"></script>
-        <script src="./append_to_file.js"></script>
+        <script src="components/js/data_structure.js"></script>
+        <script src="components/js/html_elements.js"></script>
+        <script src="renderer.js"></script>
+        <script src="components/js/startup.js"></script>
+        <script src="components/js/save.js"></script>
+        <script src="components/js/getFiles.js"></script>
+        <script src="components/js/download.js"></script>
+        <script src="components/js/git_ops.js"></script>
+        <script src="components/js/append_to_file.js"></script>
+    </div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/index1.html b/src/index1.html
index 573cde3..83ee87b 100644
--- a/src/index1.html
+++ b/src/index1.html
@@ -31,5 +31,14 @@
     <!--Footer-->
     <div id="footer"></div>
     <script src="./components/js/frontend_handler.js"></script>
+    <script src="components/js/data_structure.js"></script>
+    <script src="components/js/html_elements.js"></script>
+    <script src="renderer.js"></script>
+    <script src="components/js/startup.js"></script>
+    <script src="components/js/save.js"></script>
+    <script src="components/js/getFiles.js"></script>
+    <script src="components/js/download.js"></script>
+    <script src="components/js/git_ops.js"></script>
+    <script src="components/js/append_to_file.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/src/renderer.js b/src/renderer.js
index 3abc99b..1286fdc 100644
--- a/src/renderer.js
+++ b/src/renderer.js
@@ -26,7 +26,7 @@ function removeFileItems() {
     }
 }
 
-function changeUserpath() {
+export function changeUserpath() {
     ipcRenderer.send('app-path');
 }
 
diff --git a/src/settings.html b/src/settings.html
deleted file mode 100644
index e342fd7..0000000
--- a/src/settings.html
+++ /dev/null
@@ -1,278 +0,0 @@
-<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
-  crossorigin="anonymous">
-  </script>
-<script>
-  $(function () {
-    $("#header").load("header.html");
-    $("#footer").load("footer.html");
-  });
-</script>
-
-<body class="g-sidenav-show bg-dark">
-  <div class="main-content" id="panel">
-
-    <!--Header-->
-    <div id="header"></div>
-
-    <!--CONTENT-->
-    <div class="card mb-4 ecsu-bg-dark-light-out" id="login">
-      <div class="card-body">
-        <form>
-          <div class="row">
-            <div class="col-8 ">
-              <h6 class="mb-0 text-white">Credentials</h6>
-            </div>
-            <div class="col-4"><button class="btn btn-sm ecsu-btn-dark " id="savecred">Save your Credentials</button></div>
-          </div>
-          <div>
-            <div class="row">
-              <div class="col-lg-6">
-                <div class="form-group form-switch ps-0">
-                  <label class="form-control-label text-white" for="input-username">Name</label><input class="form-check-input ms-auto" type="checkbox" id="saverealname">
-                  <input type="text" id="input-username" class="form-control" placeholder="Name" id="realname">
-                  
-                </div>
-              </div>
-              <div class="col-lg-6">
-                <div class="form-group form-switch ps-0">
-                  <label class="form-control-label text-white" for="input-email">CID</label><input class="form-check-input ms-auto" type="checkbox" id="saveuser" >
-                  <input type="email" id="input-email" class="form-control" placeholder="1234567" id="username">
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-lg-6">
-                <div class="form-group form-switch ps-0">
-                  <label class="form-control-label text-white" for="input-first-name">Password</label><input class="form-check-input ms-auto" type="checkbox" id="savepw" >
-                  <input type="password" id="input-first-name" class="form-control" placeholder="password" id="password">
-              </div>
-              <div class="col-lg-6">
-                <div class="form-group form-switch ps-0">
-                  <label class="form-control-label text-white" for="input-last-name">CPDLC HoppieCode</label><input class="form-check-input ms-auto" type="checkbox" id="savepwhoppie" >
-                  <input type="password" id="input-last-name" class="form-control" placeholder="CPDLC Code" id="passwordhoppie">
-                </div>
-              </div>
-              <label class="form-control-label text-white" for="input-last-name">Select Your Rating</label>
-              <select id="rating">
-                <option id="0">obs</option>
-                <option id="1">s1</option>
-                <option id="2">s2</option>
-                <option id="3">s3</option>
-                <option id="4">c1</option>
-                <option id="6">c3</option>
-                <option id="7">i1</option>
-                <option id="9">i3</option>
-                <option id="10">sup</option>
-                <option id="11">adm</option>
-            </select>
-              <div class="form-group form-switch ps-0">
-                <label class="form-control-label text-white" for="input-last-name">If you want Eurosounds, please check the box below and click the download button. </label>
-                <input class="form-check-input ms-auto" type="checkbox" id="download-checkbox" onclick="toggleDownloadButton()">
-                <br>
-                <a href="https://cdn.ganderoceanic.ca/resources/files/eurosounds/eurosounds-8apr20.zip" id="download-link" style="display:none">Download Sounds</a>
-              </div>
-              <script>
-                function toggleDownloadButton() {
-                    const downloadLink = document.getElementById("download-link");
-                    if (document.getElementById("download-checkbox").checked) {
-                        downloadLink.style.display = "block";
-                    } else {
-                        downloadLink.style.display = "none";
-                    }
-                }
-            </script>
-            </div>
-          </div>
-      </div>
-      </form>
-    </div>
-  </div>
-
-
-  <!--Footer-->
-  <div id="footer"></div>
-  </div>
-  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/core/popper.min.js"></script>
-  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/core/bootstrap.min.js"></script>
-  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/plugins/chartjs.min.js"></script>
-  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/plugins/Chart.extension.js"></script>
-  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/soft-ui-dashboard.min.js?v=1.0.2"></script>
-  <script src="components/js/html_elements.js"></script>
-  <script src="components/js/renderer.js"></script>
-  <script src="components/js/startup.js"></script>
-  <script src="components/js/save.js"></script>
-  <script src="components/js/getFiles.js"></script>
-  <script src="components/js/data_structure.js"></script>
-  <script src="components/js/download.js"></script>
-  <script src="components/js/git_ops.js"></script>
-  <script src="components/js/append_to_file.js"></script>
-  <script>
-    if (document.querySelector("#chart-bars")) {
-      var ctx = document.getElementById("chart-bars").getContext("2d");
-      new Chart(ctx, {
-        type: "bar",
-        data: {
-          labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-          datasets: [{
-            label: "Sales",
-            tension: 0.4,
-            borderWidth: 0,
-            borderRadius: 4,
-            borderSkipped: false,
-            backgroundColor: "#fff",
-            data: [450, 200, 100, 220, 500, 100, 400, 230, 500],
-            maxBarThickness: 6
-          },],
-        },
-        options: {
-          responsive: true,
-          maintainAspectRatio: false,
-          plugins: {
-            legend: {
-              display: false,
-            }
-          },
-          interaction: {
-            intersect: false,
-            mode: 'index',
-          },
-          scales: {
-            y: {
-              grid: {
-                drawBorder: false,
-                display: false,
-                drawOnChartArea: false,
-                drawTicks: false,
-              },
-              ticks: {
-                suggestedMin: 0,
-                suggestedMax: 500,
-                beginAtZero: true,
-                padding: 15,
-                font: {
-                  size: 14,
-                  family: "Open Sans",
-                  style: 'normal',
-                  lineHeight: 2
-                },
-                color: "#fff"
-              },
-            },
-            x: {
-              grid: {
-                drawBorder: false,
-                display: false,
-                drawOnChartArea: false,
-                drawTicks: false
-              },
-              ticks: {
-                display: false
-              },
-            },
-          },
-        },
-      });
-
-    };
-    if (document.querySelector("#chart-line")) {
-      var ctx2 = document.getElementById("chart-line").getContext("2d");
-      var gradientStroke1 = ctx2.createLinearGradient(0, 230, 0, 50);
-      gradientStroke1.addColorStop(1, "rgba(203,12,159,0.2)");
-      gradientStroke1.addColorStop(0.2, "rgba(72,72,176,0.0)");
-      gradientStroke1.addColorStop(0, "rgba(203,12,159,0)");
-      var gradientStroke2 = ctx2.createLinearGradient(0, 230, 0, 50);
-      gradientStroke2.addColorStop(1, "rgba(20,23,39,0.2)");
-      gradientStroke2.addColorStop(0.2, "rgba(72,72,176,0.0)");
-      gradientStroke2.addColorStop(0, "rgba(20,23,39,0)");
-      new Chart(ctx2, {
-        type: "line",
-        data: {
-          labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-          datasets: [{
-            label: "Mobile apps",
-            tension: 0.4,
-            borderWidth: 0,
-            pointRadius: 0,
-            borderColor: "#cb0c9f",
-            borderWidth: 3,
-            backgroundColor: gradientStroke1,
-            fill: true,
-            data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
-            maxBarThickness: 6
-
-          },
-          {
-            label: "Websites",
-            tension: 0.4,
-            borderWidth: 0,
-            pointRadius: 0,
-            borderColor: "#3A416F",
-            borderWidth: 3,
-            backgroundColor: gradientStroke2,
-            fill: true,
-            data: [30, 90, 40, 140, 290, 290, 340, 230, 400],
-            maxBarThickness: 6
-          },
-          ],
-        },
-        options: {
-          responsive: true,
-          maintainAspectRatio: false,
-          plugins: {
-            legend: {
-              display: false,
-            }
-          },
-          interaction: {
-            intersect: false,
-            mode: 'index',
-          },
-          scales: {
-            y: {
-              grid: {
-                drawBorder: false,
-                display: true,
-                drawOnChartArea: true,
-                drawTicks: false,
-                borderDash: [5, 5]
-              },
-              ticks: {
-                display: true,
-                padding: 10,
-                color: '#b2b9bf',
-                font: {
-                  size: 11,
-                  family: "Open Sans",
-                  style: 'normal',
-                  lineHeight: 2
-                },
-              }
-            },
-            x: {
-              grid: {
-                drawBorder: false,
-                display: false,
-                drawOnChartArea: false,
-                drawTicks: false,
-                borderDash: [5, 5]
-              },
-              ticks: {
-                display: true,
-                color: '#b2b9bf',
-                padding: 20,
-                font: {
-                  size: 11,
-                  family: "Open Sans",
-                  style: 'normal',
-                  lineHeight: 2
-                },
-              }
-            },
-          },
-        },
-      });
-    };
-  </script>
-  <script src="components/js/loopple.js"></script>
-  </script>
-</body>
\ No newline at end of file
diff --git a/src/syncing.html b/src/syncing.html
deleted file mode 100644
index 52dc49c..0000000
--- a/src/syncing.html
+++ /dev/null
@@ -1,265 +0,0 @@
-<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
-  crossorigin="anonymous">
-  </script>
-<script>
-  $(function () {
-    $("#header").load("header.html");
-    $("#footer").load("footer.html");
-  });
-</script>
-
-<body class="g-sidenav-show bg-dark">
-  <div class="main-content" id="panel">
-
-    <!--Header-->
-    <div id="header"></div>
-
-    <!--CONTENT-->
-    <div class="card mb-4 ecsu-bg-dark-light-out">
-      <div class="card-body">
-        <form>
-          <div class="row">
-            <div class="col-8 ">
-              <h6 class="mb-0 text-white">Syncing</h6>
-            </div>
-            <div class="col-4"><button class="btn btn-sm ecsu-btn-dark ">Save (WIP)</button></div>
-          </div>
-          <div>
-            <h6 class="text-uppercase text-xs font-weight-bolder text-white">Apply to Update</h6>
-            <ul class="list-group ">
-              <li class="list-group-item border-0 px-0 ecsu-bg-dark-light-out">
-                <div class="form-check form-switch ps-0">
-                  <input class="form-check-input ms-auto" type="checkbox" id="applyToPrf" checked="">
-                  <label class="form-check-label text-white ms-3 text-truncate w-80 mb-0"
-                    for="flexSwitchCheckDefault">Credentials into Profiles</label>
-                </div>
-              </li>
-              <li class="list-group-item border-0 px-0 ecsu-bg-dark-light-out">
-                <div class="form-check form-switch ps-0">
-                  <input class="form-check-input ms-auto" type="checkbox" id="applyHoppie">
-                  <label class="form-check-label text-white ms-3 text-truncate w-80 mb-0"
-                    for="flexSwitchCheckDefault1">Hoppie Code into Txt File</label>
-                </div>
-              </li>
-              <!-- <li class="list-group-item border-0 px-0 ecsu-bg-dark-light-out">
-                <div class="form-check form-switch ps-0">
-                  <input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault2" checked="">
-                  <label class="form-check-label text-white ms-3 text-truncate w-80 mb-0"
-                    for="flexSwitchCheckDefault2">OBS</label>
-                </div>
-              </li> -->
-            </ul>
-            <!-- <h6 class="text-uppercase text-white text-xs font-weight-bolder mt-4">Application</h6>
-            <ul class="list-group">
-              <li class="list-group-item border-0 px-0 ecsu-bg-dark-light-out">
-                <div class="form-check form-switch ps-0">
-                  <input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault3">
-                  <label class="form-check-label text-white ms-3 text-truncate w-80 mb-0"
-                    for="flexSwitchCheckDefault3">New launches and projects</label>
-                </div>
-              </li>
-              <li class="list-group-item border-0 px-0 ecsu-bg-dark-light-out">
-                <div class="form-check form-switch ps-0">
-                  <input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault4" checked="">
-                  <label class="form-check-label text-white ms-3 text-truncate w-80 mb-0"
-                    for="flexSwitchCheckDefault4">Monthly product updates</label>
-                </div>
-              </li>
-              <li class="list-group-item border-0 px-0 pb-0 ecsu-bg-dark-light-out">
-                <div class="form-check form-switch ps-0">
-                  <input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault5">
-                  <label class="form-check-label text-white ms-3 text-truncate w-80 mb-0"
-                    for="flexSwitchCheckDefault5">Subscribe to newsletter</label>
-                </div>
-              </li>
-            </ul> -->
-          </div>
-      </div>
-      </form>
-    </div>
-  </div>
-
-
-  <!--Footer-->
-  <div id="footer"></div>
-  </div>
-  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/core/popper.min.js"></script>
-  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/core/bootstrap.min.js"></script>
-  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/plugins/chartjs.min.js"></script>
-  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/plugins/Chart.extension.js"></script>
-  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/soft-ui-dashboard.min.js?v=1.0.2"></script>
-  <script>
-    if (document.querySelector("#chart-bars")) {
-      var ctx = document.getElementById("chart-bars").getContext("2d");
-      new Chart(ctx, {
-        type: "bar",
-        data: {
-          labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-          datasets: [{
-            label: "Sales",
-            tension: 0.4,
-            borderWidth: 0,
-            borderRadius: 4,
-            borderSkipped: false,
-            backgroundColor: "#fff",
-            data: [450, 200, 100, 220, 500, 100, 400, 230, 500],
-            maxBarThickness: 6
-          },],
-        },
-        options: {
-          responsive: true,
-          maintainAspectRatio: false,
-          plugins: {
-            legend: {
-              display: false,
-            }
-          },
-          interaction: {
-            intersect: false,
-            mode: 'index',
-          },
-          scales: {
-            y: {
-              grid: {
-                drawBorder: false,
-                display: false,
-                drawOnChartArea: false,
-                drawTicks: false,
-              },
-              ticks: {
-                suggestedMin: 0,
-                suggestedMax: 500,
-                beginAtZero: true,
-                padding: 15,
-                font: {
-                  size: 14,
-                  family: "Open Sans",
-                  style: 'normal',
-                  lineHeight: 2
-                },
-                color: "#fff"
-              },
-            },
-            x: {
-              grid: {
-                drawBorder: false,
-                display: false,
-                drawOnChartArea: false,
-                drawTicks: false
-              },
-              ticks: {
-                display: false
-              },
-            },
-          },
-        },
-      });
-
-    };
-    if (document.querySelector("#chart-line")) {
-      var ctx2 = document.getElementById("chart-line").getContext("2d");
-      var gradientStroke1 = ctx2.createLinearGradient(0, 230, 0, 50);
-      gradientStroke1.addColorStop(1, "rgba(203,12,159,0.2)");
-      gradientStroke1.addColorStop(0.2, "rgba(72,72,176,0.0)");
-      gradientStroke1.addColorStop(0, "rgba(203,12,159,0)");
-      var gradientStroke2 = ctx2.createLinearGradient(0, 230, 0, 50);
-      gradientStroke2.addColorStop(1, "rgba(20,23,39,0.2)");
-      gradientStroke2.addColorStop(0.2, "rgba(72,72,176,0.0)");
-      gradientStroke2.addColorStop(0, "rgba(20,23,39,0)");
-      new Chart(ctx2, {
-        type: "line",
-        data: {
-          labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-          datasets: [{
-            label: "Mobile apps",
-            tension: 0.4,
-            borderWidth: 0,
-            pointRadius: 0,
-            borderColor: "#cb0c9f",
-            borderWidth: 3,
-            backgroundColor: gradientStroke1,
-            fill: true,
-            data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
-            maxBarThickness: 6
-
-          },
-          {
-            label: "Websites",
-            tension: 0.4,
-            borderWidth: 0,
-            pointRadius: 0,
-            borderColor: "#3A416F",
-            borderWidth: 3,
-            backgroundColor: gradientStroke2,
-            fill: true,
-            data: [30, 90, 40, 140, 290, 290, 340, 230, 400],
-            maxBarThickness: 6
-          },
-          ],
-        },
-        options: {
-          responsive: true,
-          maintainAspectRatio: false,
-          plugins: {
-            legend: {
-              display: false,
-            }
-          },
-          interaction: {
-            intersect: false,
-            mode: 'index',
-          },
-          scales: {
-            y: {
-              grid: {
-                drawBorder: false,
-                display: true,
-                drawOnChartArea: true,
-                drawTicks: false,
-                borderDash: [5, 5]
-              },
-              ticks: {
-                display: true,
-                padding: 10,
-                color: '#b2b9bf',
-                font: {
-                  size: 11,
-                  family: "Open Sans",
-                  style: 'normal',
-                  lineHeight: 2
-                },
-              }
-            },
-            x: {
-              grid: {
-                drawBorder: false,
-                display: false,
-                drawOnChartArea: false,
-                drawTicks: false,
-                borderDash: [5, 5]
-              },
-              ticks: {
-                display: true,
-                color: '#b2b9bf',
-                padding: 20,
-                font: {
-                  size: 11,
-                  family: "Open Sans",
-                  style: 'normal',
-                  lineHeight: 2
-                },
-              }
-            },
-          },
-        },
-      });
-    };
-  </script>
-  <script src="components/js/loopple.js"></script>
-  <script>
-    $(function () {
-      $("#header").load(".\html\header.html");
-      $("#footer").load(".\html\footer.html");
-    });
-  </script>
-</body>
\ No newline at end of file