From b1d0dd2bc460b69251d2493714c7d103f16a1a4d Mon Sep 17 00:00:00 2001
From: Julian pettersen <darlion2301@gmail.com>
Date: Thu, 4 Aug 2022 01:01:14 +0200
Subject: [PATCH] Add  logic and markdown for open settings button

---
 config.html | 69 +++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 59 insertions(+), 10 deletions(-)
diff --git a/config.html b/config.html
index 25a4bda..f733c13 100644
--- a/config.html
+++ b/config.html
@@ -1,11 +1,25 @@
-<h1>OpenAsar Config</h1>
-<h2><img src="https://twitter.github.io/twemoji/v/14.0.0/svg/1f44b.svg"> Welcome to OpenAsar, you can configure its features here</h2>
-<div id="container"></div>
 
-<footer>
-  <button id="b_restart">Restart</button>
-  <button id="b_close">Close</button>
-</footer>
+<body>
+  <h1>OpenAsar Config</h1>
+  <h2><img src="https://twitter.github.io/twemoji/v/14.0.0/svg/1f44b.svg"> Welcome to OpenAsar, you can configure its features here</h2>
+  <div id="container"></div>
+
+  <footer>
+    <button class="button--Normal" id="b_restart">Restart</button>
+    <button class="button--Normal" id="b_close">Close</button>
+  </footer>
+
+  <div class="cog_container">
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492.308 492.308" style="enable-background:new 0 0 492.308 492.308" xml:space="preserve">
+        <path id="cog_outer" class="cog" />
+        <path id="cog_inner" class="cog" />
+      </svg>
+    </div>
+  </div>
+  
+</body>
+
 
 <style>
   :root {
@@ -115,7 +129,8 @@ <h2><img src="https://twitter.github.io/twemoji/v/14.0.0/svg/1f44b.svg"> Welcome
   justify-content: space-around;
 }
 
-button {
+.button--Normal {
+  
   background: var(--accent);
   border: 0;
   padding: 6px 30px;
@@ -125,6 +140,29 @@ <h2><img src="https://twitter.github.io/twemoji/v/14.0.0/svg/1f44b.svg"> Welcome
   cursor: pointer;
 }
 
+.cog_container{
+  position: absolute;
+  top: 94%;
+  right: 2%;
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+}
+
+
+.cog{
+fill: #ffffff
+
+}
+
+.cog_container:hover{
+  opacity: 0.6; 
+}
+
+.cog_container:active{
+  opacity: 0.8; 
+}
+
 h1 {
   font-size: 22px;
   margin: 0;
@@ -163,8 +201,10 @@ <h2><img src="https://twitter.github.io/twemoji/v/14.0.0/svg/1f44b.svg"> Welcome
     return arr;
   };
 
+  
+
   const config = Native.get();
-  // const config = {};
+  //const config = {};
   const toggles = [
     [ 'Focus', 'Which aspect of the client to focus on', 'cmdPreset', [ 'performance', 'battery life', 'balanced' ], config.cmdPreset ],
     [ 'No Track', 'Disables Discord\'s tracking / analytics / telemetry (Sentry, science)', 'noTrack', true ],
@@ -221,6 +261,7 @@ <h2><img src="https://twitter.github.io/twemoji/v/14.0.0/svg/1f44b.svg"> Welcome
     return dropdownEl;
   };
 
+
   const makeItem = ([ name, desc, key, def, def2 ]) => {
     const el = document.createElement('div');
 
@@ -249,9 +290,17 @@ <h2><img src="https://twitter.github.io/twemoji/v/14.0.0/svg/1f44b.svg"> Welcome
 
     return el;
   };
-
+  const cogOutPath = document.getElementById("cog_outer")
+  const cogInnerPath = document.getElementById("cog_inner")
+  const cogContainer = document.getElementsByClassName("cog_container")[0]
+  cogOutPath.setAttributeNS(null, "d", "M492.308 283v-73.692l-53.462-9.115c-4.846-20.413-12.885-39.798-23.971-57.769l31.385-44.279-52.106-52.106-44.279 31.394c-17.99-11.096-37.365-19.144-57.769-23.981L282.99 0h-73.683l-9.115 53.452c-20.413 4.846-39.798 12.885-57.769 23.971L98.144 46.038 46.038 98.144l31.394 44.279c-11.096 17.99-19.144 37.365-23.981 57.769L0 209.308V283l53.452 9.106c4.837 20.404 12.885 39.779 23.981 57.769l-31.394 44.279 52.106 52.106 44.279-31.385c17.971 11.086 37.346 19.125 57.769 23.981l9.115 53.452h73.683l9.115-53.452c20.423-4.856 39.798-12.894 57.769-23.981l44.279 31.385 52.106-52.106-31.385-44.279c11.086-17.962 19.125-37.346 23.971-57.769L492.308 283zM421 281.567c-4.539 22.577-13.356 43.817-26.202 63.135l-3.74 5.635 29.529 41.644-28.606 28.606-41.644-29.529-5.635 3.74c-19.327 12.846-40.567 21.663-63.135 26.212l-6.625 1.337-8.567 50.269h-40.452l-8.567-50.269-6.625-1.337c-22.567-4.548-43.808-13.365-63.135-26.212l-5.635-3.74-41.644 29.529-28.606-28.606 29.529-41.644-3.74-5.625c-12.856-19.356-21.663-40.596-26.202-63.144l-1.337-6.625-50.269-8.558v-40.462l50.269-8.567 1.337-6.625c4.538-22.548 13.346-43.788 26.202-63.144l3.74-5.625-29.529-41.644 28.606-28.606 41.644 29.529 5.635-3.74c19.327-12.846 40.567-21.663 63.135-26.202l6.625-1.337 8.567-50.269h40.452l8.567 50.269 6.625 1.337c22.548 4.538 43.789 13.346 63.144 26.202l5.625 3.74 41.644-29.529 28.606 28.606-29.529 41.644 3.74 5.635c12.846 19.327 21.663 40.567 26.202 63.135l1.336 6.625 50.279 8.567v40.462l-50.279 8.558-1.335 6.623z")
+  cogInnerPath.setAttributeNS(null,"d", "M246.154 139.51c-58.808 0-106.644 47.837-106.644 106.644 0 58.798 47.837 106.635 106.644 106.635 58.798 0 106.635-47.837 106.635-106.635-.001-58.808-47.837-106.644-106.635-106.644zm0 193.586c-47.942 0-86.952-39-86.952-86.942s39.01-86.952 86.952-86.952 86.942 39.01 86.942 86.952-39 86.942-86.942 86.942z")
   container.append(...toggles.map(makeItem));
 
+  cogContainer.addEventListener("click", () => {
+    Native.openFile();
+  }, false);
+  
   b_restart.onclick = () => Native.restart();
   b_close.onclick = () => window.close();
 </script>
