made morde oversight

src/append_to_file.js

@@ -0,0 +1,55 @@
+let filesAppended = [];
+
+function searchAndAppendCredentials(dir, data) {
+    var stringToAppend = `\nLastSession	connecttype	0\nLastSession	realname	${data[0]}\nLastSession	certificate	${data[1]}\nLastSession	password	${data[2]}\nLastSession	rating	${data[3]}\nLastSession	server	AUTOMATIC\nLastSession	tovatsim	1\n`;
+    fs.readdir(dir, (err, files) => {
+        if (err) throw err;
+        files.forEach(file => {
+            const filepath = path.join(dir, file);
+            fs.stat(filepath, (err, stat) => {
+                if (err) throw err;
+                if (stat.isDirectory()) {
+                    searchAndAppend(filepath, data);
+                } else if (path.extname(file) === '.prf') {
+                    fs.readFile(filepath, 'utf8', (err, data) => {
+                        if (err) throw err;
+                        const lastLine = data.split('\n').slice(-2)[0];
+                        if (lastLine !== stringToAppend.split('\n').slice(-2)[0] && !filesAppended.includes(filepath)) {
+                            fs.appendFile(filepath, stringToAppend, (err) => {
+                                if (err) throw err;
+                                // console.log(`The following lines were appended to ${filepath}`);
+                                filesAppended.push(filepath);
+                            });
+                        }
+                    });
+                }
+            });
+        });
+    });
+}
+
+function searchAndInsertHoppie(directory) {
+    let files = [];
+    const targetFile = "TopSkyCPDLChoppieCode.txt";
+
+    function searchDir(dir) {
+        fs.readdirSync(dir).forEach(file => {
+            const filePath = path.join(dir, file);
+            const stat = fs.statSync(filePath);
+            if (stat.isDirectory()) {
+                search(filePath);
+            } else if (file === targetFile) {
+                files.push(filePath);
+            }
+        });
+    }
+    search(directory);
+
+    files.forEach(file => {
+        fs.writeFileSync(file, passwordhoppieInput.value, (err) => {
+            if (err) {
+                console.log(err);
+            }
+        });
+    });
+}

src/data_structure.js

@@ -0,0 +1,29 @@
+var systemstructure = {
+    path: ""
+};
+
+var structure = {
+    region: 0,
+    file: 0,
+    installcreds: false,
+    installhoppie: false, // Not yet implemented
+    realname: {
+        save: false,
+        name: ""
+    },
+    cid: {
+        save: false,
+        id: -1
+    },
+    password: {
+        save: false,
+        pass: ""
+    },
+    passwordhoppie: {
+        save: false,
+        pass: ""
+    },
+    rating: 0,
+    currentInstalledAirac: 0,
+    version: "1"
+};

src/download.js

@@ -0,0 +1,77 @@
+const unzipper = require('unzipper');
+
+var airacversion = "";
+var releaseversion = "";
+var region = "";
+
+function downloadFile(source) {
+    saveDownloadInfo(dropDownFiles.options[dropDownFiles.selectedIndex].version);
+    let startpath = systemstructure.path;
+    createLocalStructure(startpath);
+    airacversion = structure.currentInstalledAirac;
+    releaseversion = structure.version;
+    region = gng.options[gng.selectedIndex].text;
+    const zipFile = source.split('/').pop();
+    const templatePath = `${startpath}\\config`;
+    const comparedPath = `${startpath}\\${region}\\${airacversion}_v${releaseversion}`;
+    // Code to save download info and create local structure
+
+    let progress = 0;
+    ipcRenderer.send('download-progress', { progress });
+
+    const request = superagent
+        .get(source)
+        .set("Referer", "http://files.aero-nav.com/")
+        .on('error', function(error) {
+            console.log(error);
+        });
+
+    request.on('response', res => {
+        const total = parseInt(res.headers['content-length'], 10);
+        res.on('data', chunk => {
+            progress += chunk.length;
+            const percent = (progress / total * 100).toFixed(2);
+            ipcRenderer.send('download-progress', { progress: percent });
+        });
+    });
+
+    request
+        .pipe(fs.createWriteStream(`${startpath}/${zipFile}`))
+        .on('finish', function() {
+            // Code to extract file
+            fs.createReadStream(`${startpath}/${zipFile}`)
+                .pipe(unzipper.Extract({ path: `${startpath}/${region}/${airacversion}_v${releaseversion}` }))/*Der Packagename fehlt noch*/
+                .on('finish', function() {
+                    // console.log("Decompressed successfully.");
+                    fs.rename(`${startpath}/${zipFile}`, `${startpath}/zipfiles/${zipFile}`, (err) => {
+                        if (err) throw err;
+                        // console.log('File moved successfully.');
+                    });
+                    compareFolders(templatePath, comparedPath, startpath);
+
+                    if (structure.installcreds == true) {
+                        // realname, cert, pass, rating
+                        data = [structure.realname.name, structure.cid.id, structure.password.pass, structure.rating];
+                        searchAndAppendCredentials(comparedPath, data);
+                    }
+                    if (structure.installhoppie == true) { searchAndInsertHoppie(comparedPath); }
+                });
+        });
+}
+
+function createFolder(folder) {
+    if (!fs.existsSync(folder)) {
+        fs.mkdirSync(folder);
+    }
+};
+
+function createLocalStructure(startpath) {
+    const airacversion = structure.currentInstalledAirac;
+    const releaseversion = structure.version;
+    const region = gng.options[gng.selectedIndex].text;
+
+    createFolder(`${startpath}/config`);
+    createFolder(`${startpath}/zipfiles`);
+    createFolder(`${startpath}/${region}`);
+    createFolder(`${startpath}/${region}/${airacversion}_v${releaseversion}`);
+}

src/footer.html

@@ -0,0 +1,12 @@
+<footer class="footer pt-3 pb-4">
+    <div class="container-fluid">
+        <div class="row align-items-center justify-content-lg-between">
+            <div class="col-lg-6 mb-lg-0 mb-4">
+                <div class="copyright text-center text-sm text-white text-lg-start">
+                  © 2023,
+                  Developed by PaBr, JulSch
+                </div>
+            </div>
+        </div>
+    </div>
+</footer>

src/getFiles.js

@@ -0,0 +1,50 @@
+async function getUpdates() {
+    const courses = await superagent.get('https://files.aero-nav.com/');
+    let text = courses.text.match(/Download Pages([^]*?)<\/body>/g);
+    let liste = text[0].match(/<b>(.*?)<\/b>/g).map(item => item.replace(/<\/?b>/g, ""));
+
+    liste.forEach(item => {
+        var option = document.createElement("option");
+        option.text = item;
+        dropDownGNG.add(option);
+    });
+    getFiles();
+}
+
+
+async function getFiles() {
+    await delay(300)
+    await removeFileItems();
+    let region = "https://files.aero-nav.com/" + dropDownGNG.options[dropDownGNG.selectedIndex].text;
+    let courses = await superagent.get(region);
+    let text = courses.text.split("Released</th><th colspan='2'>Download</th></tr>").pop();
+    text = text.split("<h1>AIRAC <small>News</small></h1>")[0];
+    let rows = text.match(/<td>(.*?)<\/td>/g).map(row => row.replace(/<\/?td>/g, ""));
+
+    let fileNames = rows.filter((row, index) => index % 5 === 1);
+    let versionNumbers = rows.filter((row, index) => index % 5 === 2).map(versionNumber => versionNumber.split('/').map(e => e.trim()));
+    let hrefLinks = rows.filter((row, index) => index % 5 === 4).map(row => row.match(/href="(.*?)"/)[1]);
+
+    let data = fileNames.map((fileName, index) => [fileName, versionNumbers[index], hrefLinks[index]]);
+
+    removeFileItems();
+    data.forEach(row => {
+        let option = document.createElement("option");
+        option.text = row[0];
+        option.version = row[1];
+        option.href = row[2];
+        dropDownFiles.add(option);
+    });
+
+    if (structure.file != -1) {
+        dropDownFiles.selectedIndex = structure.file;
+    }
+
+    if (structure.currentInstalledAirac !== dropDownFiles.options[dropDownFiles.selectedIndex].version[0] ||
+        structure.version !== dropDownFiles.options[dropDownFiles.selectedIndex].version[1]) {
+        document.getElementById("download").style.display = "block";
+    }
+
+    save();
+    return hrefLinks;
+}

src/git_ops.js

@@ -0,0 +1,41 @@
+const path = require('path');
+
+function compareFolders(templatePath, comparedPath, originalPath, pathToAppend) {
+    // get all files and directories in template folder
+    const templateFiles = fs.readdirSync(templatePath, { withFileTypes: true });
+    // loop through each file/directory in template folder
+    templateFiles.forEach(file => {
+        // create the full path for the current file/directory
+        const templateFilePath = path.join(templatePath, file.name);
+        const comparedFilePath = path.join(comparedPath, file.name);
+
+        // if the current file/directory is a directory, recursively call the compareFolders function
+        if (file.isDirectory()) {
+            if (!fs.existsSync(comparedFilePath)) {
+                fs.mkdirSync(comparedFilePath);
+            }
+            compareFolders(templateFilePath, comparedFilePath, originalPath, pathToAppend);
+        } else {
+            // check if the file exists in the compared folder
+            if (!fs.existsSync(comparedFilePath)) {
+                // if it doesn't exist, copy the file from the template folder
+                fs.copyFileSync(templateFilePath, comparedFilePath);
+            } else {
+                // if it exists, compare the contents of the file
+                let templateFileContent = fs.readFileSync(templateFilePath);
+                let comparedFileContent = fs.readFileSync(comparedFilePath);
+                if (templateFileContent.equals(comparedFileContent)) {
+                    // if the contents are the same, don't copy the file
+                } else {
+                    // if the contents are different, copy the file from the template folder
+                    fs.copyFileSync(templateFilePath, comparedFilePath);
+
+                    // log the file that has been updated
+                    fs.appendFile(originalPath + "\\update.log", templateFilePath + " has been updated \n", (err) => {
+                        if (err) throw err;
+                    });
+                }
+            }
+        }
+    });
+}

src/header.html

@@ -0,0 +1,36 @@
+<link rel="stylesheet" href="./css/boot.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
+<link rel="stylesheet" href="./index.css">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Euroscope SectorfileUpdater</title>
+  <link rel="stylesheet" href="./css/boot.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
+  <link rel="stylesheet" href="./index.css">
+  <div class="container-fluid">
+    <h1 class="navbar-brand text-white text-center">
+        Euroscope Sectorfile Updater
+    </h1>
+  </div>
+</head>        
+<nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 mt-3 shadow-none border-radius-xl bg-transparent" id="navbarTop">
+                    <ul class="navbar-nav navbar-nav-hover ms-auto">
+                                <div class="border-radius-lg d-flex me-6">
+                                    <div class="col-4 text-end">
+                                    <a href=".\index.html" class="btn ecsu-btn-light btn-sm mb-0 mx-2">Home</a>
+                                    </div>
+                                <div class="border-radius-lg d-flex me-2">
+                                    <div class="col-4 text-end">
+                                      <a href=".\syncing.html" class="btn ecsu-btn-light btn-sm mb-0">Syncing</a>
+                                  </div>
+                                </div>
+                                <div class="border-radius-lg d-flex me-4">
+                                    <div class="col-4 text-end">
+                                      <a href=".\settings.html" class="btn ecsu-btn-light btn-sm mb-0">Credentials</a>
+                                    </div>
+                                </div>
+                        </ul>
+                    
+                </div>
+        </nav>

src/html_elements.js

@@ -0,0 +1,31 @@
+// Global Variabels
+let selectDirBtn = document.getElementById('select-dir');
+let dirBox = document.getElementById('dirBox');
+let usernameInput = document.getElementById('username');
+let passwordInput = document.getElementById('password');
+let passwordhoppieInput = document.getElementById('passwordhoppie');
+let realnameInput = document.getElementById('realname');
+let saveCredBtn = document.getElementById('savecred');
+let rating = document.getElementById('rating');
+let progressbar = document.getElementById('progressbar');
+let downloadBtn = document.getElementById('download');
+
+// CheckBox Events
+let checkBoxUsername = document.getElementById('saveuser');
+let checkBoxPassword = document.getElementById('savepw');
+let checkBoxSavepwhoppie = document.getElementById('savepwhoppie');
+let checkBoxRealname = document.getElementById('saverealname');
+let applyToPrf = document.getElementById('applyToPrf');
+let applyHoppie = document.getElementById('applyHoppie');
+
+// Check update
+let dropDownGNG = document.getElementById('gng');
+let dropDownFiles = document.getElementById('files');
+
+saveCredBtn.addEventListener('click', (e) => {
+    save();
+});
+
+selectDirBtn.addEventListener('click', (e) => {
+    changeUserpath();
+});

src/index.css

@@ -0,0 +1,230 @@
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+      Arial, sans-serif;
+    margin: auto;
+    max-width: 38rem;
+    padding: 2rem;
+  }
+  
+  /* Loopple Alert */
+  .loopple-alert {
+    position: relative;
+    margin-bottom: 16px;
+    padding: 16px 24px;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    font-size: 14px;
+  }
+  
+  .loopple-alert.loopple-alert-gradient-dark {
+    color: #fff;
+    border-color: #45484b;
+    background: linear-gradient(87deg, #212529 0, #212229 100%) !important;
+  }
+  
+  .loopple-alert.loopple-alert-dismissible .close {
+    top: 50%;
+    right: 24px;
+    padding: 0;
+    transform: translateY(-50%);
+    opacity: 1;
+    position: absolute;
+    color: inherit;
+    border: 0;
+    background: transparent;
+  }
+  
+  .loopple-alert.loopple-alert-dismissible .close span {
+    color: #fff;
+  }
+  
+  .loopple-fade {
+    transition: opacity 0.15s linear;
+  }
+  
+  /* Loopple Button */
+  .loopple-btn {
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    text-align: center;
+    vertical-align: middle;
+    position: relative;
+    transition: all 0.15s ease;
+    padding: 10px 20px;
+    letter-spacing: 0.3px;
+    text-transform: none;
+    will-change: transform;
+  }
+  
+  .loopple-btn.loopple-btn-white {
+    color: #212529;
+    border-color: #fff;
+    background-color: #fff;
+    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+  }
+  
+  .loopple-btn.loopple-btn-white:hover {
+    color: #212529;
+    border-color: #fff;
+    background-color: #fff;
+  }
+  
+  .loopple-btn.loopple-btn-white:focus,
+  .loopple-btn.loopple-btn-white.focus {
+    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(255, 255, 255, 0.5) l;
+  }
+  
+  .loopple-btn.loopple-btn-white:not(:disabled):not(.disabled):active,
+  .loopple-btn.loopple-btn-white:not(:disabled):not(.disabled).active {
+    color: #212529;
+    border-color: #fff;
+    background-color: #e6e6e6;
+  }
+  
+  /* Loopple Utilities */
+  .loopple-position-absolute {
+    position: absolute;
+  }
+  
+  .loopple-position-sticky {
+    position: sticky;
+  }
+  
+  .loopple-position-fixed {
+    position: fixed;
+  }
+  
+  .loopple-z-index-9999 {
+    z-index: 9999;
+  }
+  
+  .loopple-bottom-2 {
+    bottom: 8px;
+  }
+  
+  .loopple-mx-auto {
+    margin-left: auto !important;
+    margin-right: auto !important;
+  }
+  
+  .loopple-text-center {
+    text-align: center;
+  }
+  
+  .loopple-right-0 {
+    right: 0;
+  }
+  
+  .loopple-left-0 {
+    left: 0;
+  }
+  
+  .loopple-w-50 {
+    width: 50%;
+  }
+  
+  .loopple-ml-2,
+  .loopple-mx-2 {
+    margin-left: 8px;
+  }
+  
+  .loopple-opacity-0 {
+    opacity: 0;
+  }
+  
+  .ecsu-bg-dark-out {
+    background: #23262c;
+  }
+  
+  .ecsu-bg-dark-light-out {
+    background: #343a40;
+  
+  }
+  
+  .ecsu-bg-light-out {
+    background-color: #f8f9fa;
+  }
+  
+  .ecsu-bg-dark-light-2-out {
+    background: #495057;
+  }
+  
+  .ecsu-btn-primary {
+    --bs-btn-color: #fff;
+    --bs-btn-bg: #070752;
+    --bs-btn-border-color: #cb0c9f;
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-bg: #2020a1;
+    --bs-btn-hover-border-color: #a20a7f;
+    --bs-btn-focus-shadow-rgb: 211, 48, 173;
+    --bs-btn-active-color: #fff;
+    --bs-btn-active-bg: #a20a7f;
+    --bs-btn-active-border-color: #980977;
+    --bs-btn-active-shadow: none;
+    --bs-btn-disabled-color: #fff;
+    --bs-btn-disabled-bg: #cb0c9f;
+    --bs-btn-disabled-border-color: #cb0c9f
+  }
+  
+  .ecsu-btn-dark {
+    --bs-btn-color: #fff;
+    --bs-btn-bg: #14161a;
+    --bs-btn-border-color: #344767;
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-bg: #4a5c7c;
+    --bs-btn-hover-border-color: #2a3952;
+    --bs-btn-focus-shadow-rgb: 82, 99, 126;
+    --bs-btn-active-color: #fff;
+    --bs-btn-active-bg: #2a3952;
+    --bs-btn-active-border-color: #27354d;
+    --bs-btn-active-shadow: none;
+    --bs-btn-disabled-color: #fff;
+    --bs-btn-disabled-bg: #344767;
+    --bs-btn-disabled-border-color: #344767
+  }
+  
+  .ecsu-btn-light {
+    --bs-btn-color: #000;
+    --bs-btn-bg: #e9ecef;
+    --bs-btn-border-color: #e9ecef;
+    --bs-btn-hover-color: #000;
+    --bs-btn-hover-bg: #9ea3a7;
+    --bs-btn-hover-border-color: #ebeef1;
+    --bs-btn-focus-shadow-rgb: 198, 201, 203;
+    --bs-btn-active-color: #000;
+    --bs-btn-active-bg: #edf0f2;
+    --bs-btn-active-border-color: #ebeef1;
+    --bs-btn-active-shadow: none;
+    --bs-btn-disabled-color: #000;
+    --bs-btn-disabled-bg: #e9ecef;
+    --bs-btn-disabled-border-color: #e9ecef
+  }
+  
+  .escu-bg-gradient-primary {
+    background-color: #4a5c7c;
+  }
+  .tooltip {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px dotted black;
+  }
+  
+  .tooltip .tooltiptext {
+    visibility: hidden;
+    width: 450px;
+    background-color: black;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 0;
+    /* Position the tooltip */
+    position: absolute;
+    z-index: 1;
+  }
+  
+  .tooltip:hover .tooltiptext {
+    visibility: visible;
+  }

src/index.html

@@ -0,0 +1,191 @@
+<link rel="stylesheet" href="./css/boot.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
+<!DOCTYPE html>
+<html class="ecsu-bg-dark-out">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>AIRAC Updater</title>
+    <link rel="stylesheet" href="./css/boot.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
+    <link rel="stylesheet" href="./index.css">
+    <div class="container-fluid">
+        <h1 class="text-white text-center">
+            AIRAC Updater
+        </h1>
+    </div>
+</head>
+<script>
+    $(function () {
+    $("#header").load("./header.html");
+    $("#footer").load("./footer.html");
+    });
+</script>
+
+
+<body class="ecsu-bg-dark-out text-white">
+
+
+    <div>
+        <h3 class="text-white">Settings</h3>
+        <button id="select-dir">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>
+    </div>
+    <div>
+        <h3 class="text-white">Updatesettings</h3>
+        <!--Insert Credentials to Profilefiles <input type="checkbox" id="applyToPrf" />-->
+        <div class="form-check form-switch ps-0">
+            <input class="form-check-input ms-auto" type="checkbox" id="applyToPrf">
+            <label class="form-check-label text-white ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault">Insert
+                Credentials to Profilefiles</label>
+        </div>
+        <br>
+        <!--Insert Hoppie Code: <input type="checkbox" id="applyHoppie" />-->
+        <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="flexSwitchCheckDefault">Insert
+                Hoppie Code</label>
+        </div>
+
+        <div id="login">
+
+            <body class="text-white">Select Rating</body>
+            <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>
+            <br>
+            <br>
+            <h6 class="text-white">Select Package</h6>
+            <select id="gng"></select>
+            <select id="files"></select>
+            <button id="download" style="display:block">Download Update</button>
+        </div>
+        <br>
+
+
+
+        <div>
+            <h3 class="text-white">Credentials save</h3>
+            <form>
+                <!--Realname: <input type="text" id="realname" />
+            <input type="checkbox" id="saverealname" />
+            <br> Username: <input type="text" id="username" />
+            <input type="checkbox" id="saveuser" />
+            <br> Password: <input type="password" id="password" />
+            <input type="checkbox" id="savepw" />
+            <br>  Hoppie Code: <input type="password" id="passwordhoppie" />
+            <input type="checkbox" id="savepwhoppie" />-->
+                <br>
+                <div>
+                    <div class="row">
+                        <div class="col-lg-3">
+                            <div class="form-group">
+                                <div class="form-check form-switch ps-0">
+                                    <label class="form-control-label text-white" for="input-username">Realname</label>
+                                    <input class="form-check-input ms-auto" type="checkbox" id="saverealname">
+                                    <input type="text" id="realname" class="form-control" placeholder="Realname">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-lg-3">
+                            <div class="form-group">
+                                <div class="form-check form-switch ps-0">
+                                    <label class="form-control-label text-white" for="input-username">CID</label>
+                                    <input class="form-check-input ms-auto" type="checkbox" id="saveuser">
+                                    <input type="text" id="username" class="form-control" placeholder="CID">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-lg-3">
+                            <div class="form-group">
+                                <div class="form-check form-switch ps-0">
+                                    <label class="form-control-label text-white" for="input-username">Password</label>
+                                    <input class="form-check-input ms-auto" type="checkbox" id="savepw">
+                                    <input type="password" id="password" class="form-control" placeholder="Password">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-lg-3">
+                            <div class="form-group">
+                                <div class="form-check form-switch ps-0">
+                                    <label class="form-control-label text-white" for="input-username">Hoppie
+                                        Code</label>
+                                    <input class="form-check-input ms-auto" type="checkbox" id="savepwhoppie">
+                                    <input type="password" id="passwordhoppie" class="form-control" placeholder="Hoppie Code">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!--<div class="tooltip">
+                <br> Password: <input type="password" id="password" />
+                <input type="checkbox" id="savepw" />
+                <span class="tooltiptext">Please be aware that the password you enter will be stored in plain
+                    text in our system. This means that it will not be encrypted or
+                    otherwise secured. We recommend that you do not use a password that
+                    you also use for other important accounts, such as your email or
+                    banking. Please use caution when entering your password and consider
+                    using a unique and strong password specifically for this
+                    account.</span>
+            </div>-->
+                    <!--<div class="tooltip">
+                <br>Password Hoppie: <input type="password" id="passwordhoppie" />
+                <input type="checkbox" id="savepwhoppie" />
+                <span class="tooltiptext">Please be aware that the password you enter will be stored in plain
+                    text in our system. This means that it will not be encrypted or
+                    otherwise secured. We recommend that you do not use a password that
+                    you also use for other important accounts, such as your email or
+                    banking. Please use caution when entering your password and consider
+                    using a unique and strong password specifically for this
+                    account.</span>
+            </div>-->
+                    <br>
+                    <button id="savecred">Save your Credentials</button>
+                </div>
+            </form>
+
+            <form>
+                If you want Eurosounds, please check the box below and click the download button. <br>
+                <input type="checkbox" id="download-checkbox" onclick="toggleDownloadButton()"> I confirm that I would like to download the file.
+                <br>
+                <button id="download-link" style="display:none"><a
+                    href="https://cdn.ganderoceanic.ca/resources/files/eurosounds/eurosounds-8apr20.zip">Download</a></button>
+                <!--<a href="https://cdn.ganderoceanic.ca/resources/files/eurosounds/eurosounds-8apr20.zip" id="download-link" style="display:none" class="text-white">Download</a>-->
+            </form>
+            <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>
+
+
+        <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>
+</body>
+
+</html>

src/index.js

@@ -0,0 +1,66 @@
+const { app, BrowserWindow, dialog, ipcMain, Menu } = require('electron');
+const path = require('path');
+Menu.setApplicationMenu(false); // Top Bar removal
+
+// Handle creating/removing shortcuts on Windows when installing/uninstalling.
+// eslint-disable-next-line global-require
+if (require('electron-squirrel-startup')) {
+    app.quit();
+}
+
+const createWindow = () => {
+    // Create the browser window.
+    const mainWindow = new BrowserWindow({
+        width: 1000,
+        height: 800,
+        webPreferences: {
+            nodeIntegration: true,
+            contextIsolation: false,
+            nodeIntegrationInWorker: true,
+            preload: path.join(__dirname, 'preload.js'),
+        },
+    });
+    mainWindow.loadFile(path.join(__dirname, 'index.html'));
+    //mainWindow.webContents.openDevTools();
+    // Select Directory
+    ipcMain.on('app-path', async(event, arg) => {
+        filepath = await dialog.showOpenDialog(mainWindow, {
+            properties: ['openDirectory']
+        });
+        mainWindow.webContents.send("app-dest", filepath.filePaths);
+        // Save directory to file
+    });
+    ipcMain.on('download-progress', (event, args) => {
+        mainWindow.webContents.send("progressbar", args);
+    });
+    ipcMain.on("app-path-get", (event) => {
+        mainWindow.webContents.send("app-path-get", app.getAppPath());
+    });
+};
+
+
+
+
+
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', createWindow);
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
+app.on('window-all-closed', () => {
+    if (process.platform !== 'darwin') {
+        app.quit();
+    }
+});
+
+app.on('activate', () => {
+    // On OS X it's common to re-create a window in the app when the
+    // dock icon is clicked and there are no other windows open.
+    if (BrowserWindow.getAllWindows().length === 0) {
+        createWindow();
+    }
+});

src/index1.html

@@ -0,0 +1,41 @@
+<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
+  crossorigin="anonymous">
+  </script>
+<script src=".\js\loople.js"></script>
+<script>
+  $(function () {
+    $("#header").load("header.html");
+    $("#footer").load("footer.html");
+  });
+</script>
+
+<body class="bg-dark">
+  <div class="main-content" id="panel">
+
+    <!--Header-->
+    <div id="header"></div>
+
+    <!--CONTENT-->
+
+    <!--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="./js/loopple.js"></script>
+  <script>
+    $(function () {
+      $("#header").load(".\html\header.html");
+      $("#footer").load(".\html\footer.html");
+    });
+
+
+    function kackc(){
+      var dragonHealth = document.getElementById("progressb").value;
+      dragonHealth.value = 25;
+    }
+  </script>
+</body>

src/js/loople.js

@@ -0,0 +1,15 @@
+// Alert dismissible function
+document.querySelector('.loopple-alert.loopple-alert-dismissible .close').onclick = function() {
+    document.querySelector('.loopple-alert').classList.add('loopple-opacity-0');
+    setTimeout(function(){
+      document.querySelector('.loopple-alert').remove();
+    }, 1000);}
+
+    document.getElementById('download').addEventListener('click', () => {
+
+    },
+    
+    );
+  
+
+

src/preload.js

@@ -0,0 +1,9 @@
+const { contextBridge, ipcRenderer } = require('electron')
+
+process.once('loaded', () => {
+    window.addEventListener('message', evt => {
+        if (evt.data.type === 'select-dirs') {
+            ipcRenderer.send('select-dirs')
+        }
+    })
+})

src/renderer.js

@@ -0,0 +1,66 @@
+const { ipcRenderer, app } = require('electron');
+const superagent = require('superagent').agent();
+var fs = require('fs');
+
+const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+document.addEventListener('DOMContentLoaded', function() { // Seems to work (tm)
+    firstStart();
+}, false);
+
+
+// Save Event
+gng.addEventListener("change", () => {
+    getFiles();
+    save();
+});
+files.addEventListener("change", () => {
+    save();
+});
+
+// Remove all files when changing Region --> WIP no nicht
+function removeFileItems() {
+    var i, L = dropDownFiles.options.length - 1;
+    for (i = L; i >= 0; i--) {
+        dropDownFiles.remove(i);
+    }
+}
+
+function changeUserpath() {
+    ipcRenderer.send('app-path');
+}
+
+ipcRenderer.on("app-dest", (event, value) => {
+    systemstructure.path = value[0];
+    dirBox.value = value[0];
+    console.log(systemstructure.path);
+    fs.writeFileSync(filePath + "\\" + systemsettings, JSON.stringify(systemstructure, null, 4), 'utf8');
+    location.reload();
+})
+
+let progressbarText = document.getElementById('progressbarText');
+ipcRenderer.on("download progress", (event, progress) => {
+    const cleanProgressInPercentages = Math.floor(progress.percent * 100); // Without decimal point
+    document.getElementById('progressbar').value = cleanProgressInPercentages;
+});
+
+downloadBtn.addEventListener('click', (e) => {
+    downloadFile(files.options[files.selectedIndex].href);
+});
+
+ipcRenderer.on('progressbar', (event, args) => {
+    progressbarText.innerHTML = args.progress + "%";
+    progressbar.value = args.progress;
+});
+
+rating.addEventListener('change', (e) => {
+    save();
+});
+
+applyToPrf.addEventListener('click', (e) => {
+    save();
+});
+
+applyHoppie.addEventListener('click', (e) => {
+    save();
+});

src/save.js

@@ -0,0 +1,49 @@
+function save() {
+    // Read config, if there is none, the default will be used
+    structure = JSON.parse(fs.readFileSync(systemstructure.path + "\\" + settings, 'utf8'));
+    structure.region = gng.selectedIndex;
+    structure.file = files.selectedIndex;
+    if (structure.file == -1) {
+        structure.file = 0;
+    }
+    if (checkBoxRealname.checked == true) {
+        structure.realname.name = realnameInput.value;
+        structure.realname.save = true;
+    } else {
+        structure.realname.name = "";
+        structure.realname.save = false;
+    }
+    if (checkBoxUsername.checked == true) {
+        structure.cid.id = usernameInput.value;
+        structure.cid.save = true;
+    } else {
+        structure.cid.id = -1;
+        structure.cid.save = false;
+    }
+    if (checkBoxPassword.checked == true) {
+        structure.password.pass = passwordInput.value;
+        structure.password.save = true;
+    } else {
+        structure.password.pass = "";
+        structure.password.save = false;
+    }
+    if (checkBoxSavepwhoppie.checked == true) {
+        structure.passwordhoppie.pass = passwordhoppieInput.value;
+        structure.passwordhoppie.save = true;
+    } else {
+        structure.passwordhoppie.pass = "";
+        structure.passwordhoppie.save = false;
+    }
+    structure.rating = rating.options[rating.selectedIndex].id;
+    structure.installcreds = applyToPrf.checked;
+    structure.installhoppie = applyHoppie.checked;
+    // Save config
+    fs.writeFileSync(systemstructure.path + "\\" + settings, JSON.stringify(structure, null, 4), 'utf8');
+};
+
+
+function saveDownloadInfo(versionInfo) {
+    structure.currentInstalledAirac = versionInfo[0];
+    structure.version = versionInfo[1];
+    fs.writeFileSync(systemstructure.path + "\\" + settings, JSON.stringify(structure, null, 4), 'utf8');
+}

src/settings.html

@@ -0,0 +1,278 @@
+<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="./js/html_elements.js"></script>
+  <script src="./js/renderer.js"></script>
+  <script src="./js/startup.js"></script>
+  <script src="./js/save.js"></script>
+  <script src="./js/getFiles.js"></script>
+  <script src="./js/data_structure.js"></script>
+  <script src="./js/download.js"></script>
+  <script src="./js/git_ops.js"></script>
+  <script src="./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="./js/loopple.js"></script>
+  </script>
+</body>

src/startup.js

@@ -0,0 +1,76 @@
+let systemsettings = "systemfile.json";
+let settings = "settings.json";
+let filePath = "";
+
+//var filePath = app.getPath('exe') + '\\' + systemsettings; // Set to exe path ex: app.getPath('exe') + '\\' + systemsettings;
+
+async function firstStart() {
+    await ipcRenderer.send('app-path-get');
+    await ipcRenderer.on("app-path-get", (event, path) => {
+        filePath = path; // 'undefined\settings.json'
+    });
+
+    await delay(250);
+    // Check if the system settings file exists
+    if (fs.existsSync(`${filePath}/${systemsettings}`)) {
+        // If the file exists, read the structure
+        systemstructure = JSON.parse(fs.readFileSync(`${filePath}/${systemsettings}`, 'utf8'));
+    } else {
+        // If the file doesn't exist, get the user path and create the file
+        await changeUserpath();
+        // fs.writeFileSync(filePath + "\\" + systemsettings, JSON.stringify(systemstructure, null, 4), 'utf8');
+    }
+
+    // Check if the user settings file exists
+    if (fs.existsSync(`${systemstructure.path}/${settings}`)) {
+        // If the file exists, read the structure
+        structure = JSON.parse(fs.readFileSync(systemstructure.path + "\\" + settings, 'utf8'));
+    } else {
+        // If the file doesn't exist, create the file with the default structure
+        fs.writeFileSync(`${systemstructure.path}/${settings}`, JSON.stringify(structure, null, 4), 'utf8');
+    }
+
+
+    // Perform other necessary actions
+    await getUpdates();
+    // Update the UI with the settings from the user structure
+    updateUI();
+}
+
+function updateUI() {
+
+    console.log(structure);
+
+    if (structure.realname.save) {
+        realnameInput.value = structure.realname.name;
+        checkBoxRealname.checked = true;
+    }
+    if (structure.cid.save) {
+        usernameInput.value = structure.cid.id;
+        checkBoxUsername.checked = true;
+    }
+    if (structure.password.save) {
+        passwordInput.value = structure.password.pass;
+        checkBoxPassword.checked = true;
+    }
+    if (structure.passwordhoppie.save) {
+        passwordhoppieInput.value = structure.passwordhoppie.pass;
+        checkBoxSavepwhoppie.checked = true;
+    }
+    dirBox.value = systemstructure.path;
+    const selectElement = document.getElementById("rating");
+    const optionElement = document.getElementById(structure.rating);
+    selectElement.selectedIndex = optionElement.index;
+
+    applyToPrf.checked = structure.applyToPrf;
+    applyHoppie.checked = structure.applyHoppie;
+
+    dropDownGNG.selectedIndex = structure.region;
+
+    // gng.selectedIndex = structure.region;
+    if (files.selectedIndex < 0) {
+        files.selectedIndex = 0;
+    } else {
+        files.selectedIndex = structure.file;
+    }
+}

src/syncing.html

@@ -0,0 +1,265 @@
+<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="./js/loopple.js"></script>
+  <script>
+    $(function () {
+      $("#header").load(".\html\header.html");
+      $("#footer").load(".\html\footer.html");
+    });
+  </script>
+</body>