diff --git a/resources/index.html b/resources/index.html
index b49bdbb..825f91a 100644
--- a/resources/index.html
+++ b/resources/index.html
@@ -8,6 +8,18 @@
+
+
Settings
+
+
+ Scripts
+
+
+ Kill Switch
+
+
+
+
GrassClipper
diff --git a/resources/js/index.js b/resources/js/index.js
index cd25f95..a7b9f69 100644
--- a/resources/js/index.js
+++ b/resources/js/index.js
@@ -24,12 +24,35 @@ document.addEventListener('DOMContentLoaded', async () => {
// Exit favorites list when clicking outside of it
- window.addEventListener("click", function() {
+ window.addEventListener("click", function(e) {
const favList = document.querySelector('#ipList')
+ const settingsPanel = document.querySelector('#settingsPanel')
+
+ // This will close the favorites list no matter what is clicked
if (favList.style.display !== 'none') {
favList.style.display = 'none'
favList.style.transform = ''
}
+
+ // This will close the settings panel no matter what is clicked
+ let settingCheckElm = e.target
+
+ while(settingCheckElm.tagName !== 'BODY') {
+ if (settingCheckElm.id === 'settingsPanel'
+ || settingCheckElm.id === 'settingsBtn') {
+ return
+ }
+
+ settingCheckElm = settingCheckElm.parentElement
+ }
+
+ // We travelled through the parents, so if we are at the body, we clicked outside of the settings panel
+ if (settingCheckElm.tagName === 'BODY') {
+ // This will close the settings panel only when something outside of it is clicked
+ if (settingsPanel.style.display !== 'none') {
+ settingsPanel.style.display = 'none'
+ }
+ }
});
})
@@ -276,6 +299,15 @@ async function setFavorite() {
Neutralino.storage.setData('favorites', JSON.stringify(ipArr))
}
+async function openSettings() {
+ const settings = document.querySelector('#settingsPanel')
+ const settingsBtn = document.querySelector('#settingsBtn')
+
+ if (settings.style.display === 'none') {
+ settings.style.removeProperty('display')
+ }
+}
+
/**
* Set the game folder by opening a folder picker
*/
diff --git a/resources/style/index.css b/resources/style/index.css
index 11bc7c4..a60085f 100644
--- a/resources/style/index.css
+++ b/resources/style/index.css
@@ -11,6 +11,55 @@ body {
filter: brightness(0.6);
}
+#settingsPanel {
+ display: block;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ margin-right: -50%;
+ z-index: 99;
+ padding: 20px;
+ background-color: #fff;
+ border-radius: 2px;
+ border: 1px solid #141414;
+ width: 30%;
+ height: 60%;
+ font-family: system-ui;
+}
+
+#fullSettingsTitle {
+ font-size: 1.5em;
+ font-weight: bold;
+ margin-bottom: 10px;
+}
+
+#settingsPanelInner {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 10px 20%;
+}
+
+.settingsRow {
+ width: 100%;
+}
+
+.settingTitle {
+ font-size: 1.2em;
+ font-weight: bold;
+ margin-bottom: 10px;
+}
+
+.settingLabel {
+ display:inline-block;
+ font-size: 1em;
+ font-weight: normal;
+ margin-bottom: 10px;
+ margin-right: 50%;
+}
+
#ipList {
position: absolute;
z-index: 99;