Add the instance setting modal

cd7e6536 · Kubat · ec60f347 · cd7e6536 · cd7e6536 · cd7e6536
--- a/instance/index.html
+++ b/instance/index.html
@@ -17,14 +17,37 @@
            href="../style/fontawesome-free-5.15.1-web/css/all.min.css"
        />
        <script src="./main.js"></script>
-        <style>
-            ::-webkit-scrollbar {
-                display: none;
-            }
-        </style>
        <script></script>
    </head>
    <body>
+        <div
+            id="modal-settings"
+            class="modal bd-example-modal-lg"
+            tabindex="-1"
+            role="dialog"
+        >
+            <div
+                class="modal-dialog modal-lg modal-dialog-centered"
+                role="document"
+            >
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h2 class="modal-title">Amadeus settings</h2>
+                        <button
+                            type="button"
+                            class="btn btn-outline-primary btn-lg modal-close"
+                            aria-label="Close"
+                        >
+                            <i class="fas fa-window-close"></i>
+                        </button>
+                    </div>
+                    <div class="modal-body">
+                        <p>Some text in the Modal Body</p>
+                        <p>Some other text...</p>
+                    </div>
+                </div>
+            </div>
+        </div>
        <div id="mainFrame" class="container-fluid">
            <div
                id="buttonPanelListLeft"

--- a/instance/main.js
+++ b/instance/main.js
@@ -134,7 +134,33 @@ function createButtonList(list) {
        <div class="p-1 bd-highlight mb-1 mr-auto ml-auto" style="width: 60%;-webkit-app-region: no-drag;">
            <input id="filterInput" type="text" class="form-control filterInput" placeholder="Filter...">
        </div>
-        <div class="btn-group" role="group">${renderHtmlRight}</div>`;
+        <div class="btn-group" role="group">
+        <button id="btn-settings" type="button" class="btn btn-secondary p-2 bd-highlight"
+                style="-webkit-app-region: no-drag" data-toggle="tooltip"
+                data-placement="bottom" title="Open settings">
+            <i class="fas fa-cogs"></i>
+        </button>
+        ${renderHtmlRight}
+        </div>`;
+
+    /* Set things up for the settings modal*/
+    var modal = document.getElementById('modal-settings');
+    var btn = document.getElementById('btn-settings');
+    var span = document.getElementsByClassName('modal-close')[0];
+
+    btn.onclick = function () {
+        modal.style.display = 'block';
+    };
+
+    span.onclick = function () {
+        modal.style.display = 'none';
+    };
+
+    window.onclick = function (event) {
+        if (event.target == modal) {
+            modal.style.display = 'none';
+        }
+    };
 }

 /* Create the left panel */

--- a/style/css/instance.css
+++ b/style/css/instance.css
@@ -5,6 +5,10 @@
         url("../fonts/LinotypeIPACustom3.svg")  format('svg');
 }

+::-webkit-scrollbar {
+    display: none;
+}
+
 body {
    overflow: hidden;
    height: 100vh;