add more options to settings menu

static/assets/css/dropdown.css

@@ -0,0 +1,43 @@
+.dropbtn {
+    background-color: #3498DB;
+    color: white;
+    padding: 16px;
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+}
+
+.dropbtn:hover,
+.dropbtn:focus {
+    background-color: #2980B9;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f1f1f1;
+    min-width: 160px;
+    overflow: auto;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+}
+
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+}
+
+.dropdown a:hover {
+    background-color: #ddd;
+}
+
+.show {
+    display: block;
+}

static/assets/css/main.css

@@ -3,6 +3,7 @@
 @import url('/assets/css/games.css');
 @import url('/assets/css/nav.css');
 @import url('/assets/css/sidebar.css');
+@import url('/assets/css/dropdown.css');
 
 * {
     font-family: 'Lato';
@@ -21,6 +22,25 @@ html {
     height: 100%;
 }
 
+::-webkit-scrollbar {
+    width: 16px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-color);
+    border: 4px solid transparent;
+    background-clip: content-box;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-corner {
+    background: transparent;
+}
+
 a {
     color: var(--text);
     text-decoration: none;
@@ -28,9 +48,9 @@ a {
 
 input {
     text-align: center;
-    box-shadow: 0.5vh 0.5vh 1vh 0vh rgba(0, 0, 0, 0.75);
+    box-shadow: 0.5vh 0.5vh 1vh 0vh var(--shadow-color);
     border: none;
-    border-radius: 50px;
+    border-radius: 10px;
     cursor: pointer;
     background-color: var(--button-bg);
     width: 250px;
@@ -40,16 +60,28 @@ input {
     margin: auto;
 }
 
-/*input:focus {
-    border: none;
-    opacity: 0.8;
-}*/
-
 button {
     text-align: center;
-    box-shadow: 0.5vh 0.5vh 1vh 0vh rgba(0, 0, 0, 0.75);
+    box-shadow: 0.5vh 0.5vh 1vh 0vh var(--shadow-color);
     border: none;
-    border-radius: 50px;
+    border-radius: 10px;
+    cursor: pointer;
+    background-color: var(--button-bg);
+    min-width: 70px;
+    height: 40px;
+    color: var(--text);
+    transition: 0.4s;
+    margin-left: 10px;
+    margin-right: 10px;
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+select {
+    text-align: center;
+    box-shadow: 0.5vh 0.5vh 1vh 0vh var(--shadow-color);
+    border: none;
+    border-radius: 10px;
     cursor: pointer;
     background-color: var(--button-bg);
     min-width: 70px;
@@ -64,4 +96,67 @@ button {
 
 button:hover {
     opacity: 0.8;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 60px;
+    height: 34px;
+    position: relative;
+    z-index: 500;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 10px;
+    box-shadow: 0.5vh 0.5vh 1vh 0vh var(--shadow-color);
+    background-color: var(--switch-color);
+}
+
+.switch>label {
+    position: relative;
+    right: 60px;
+    font-size: 1.17em;
+    top: 5px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 10px;
+}
+
+input:checked+.slider {
+    background-color: #2196F3;
+}
+
+input:focus+.slider {
+    box-shadow: 0 0 1px var(--switch-color);
+}
+
+input:checked+.slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
 }

static/assets/css/sidebar.css

@@ -5,10 +5,11 @@
   width: 50vh;
   height: 80vh;
   background: var(--sidebar-bg);
-  border-radius: 4vh;
-  box-shadow: 0px 5px 10px 0px black;
+  border-radius: 10px;
+  box-shadow: 0px 5px 10px 0px var(--shadow-color);
   text-align: center;
   z-index: 100;
+  overflow-y: auto;
 }
 
 .sidebar.active {

static/assets/css/themes.css

@@ -1,8 +1,11 @@
 body[data-theme='dark'] {
     --background-color: #000;
     --text: #fff;
-    --sidebar-bg: rgba(0, 0, 0, 0.350);
-    --button-bg: rgba(0, 0, 0, 0.350);
+    --sidebar-bg: #00000059;
+    --button-bg: #42424259;
+    --shadow-color: #4242424b;
+    --switch-color: #42424259;
+    --scrollbar-color: #ffffff59;
 
     background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
     background-repeat: no-repeat;
@@ -11,31 +14,42 @@ body[data-theme='dark'] {
 body[data-theme='light'] {
     --background-color: #fff;
     --text: #000;
-    --sidebar-bg: rgba(255, 255, 255, 0.350);
-    --button-bg: rgba(255, 255, 255, 0.350);
+    --sidebar-bg: #ffffff59;
+    --button-bg: #ffffff59;
+    --shadow-color: #4242424b;
+    --switch-color: #111111b0;
+    --scrollbar-color: #4242424b;
 
     background: radial-gradient(ellipse at bottom, #b1b1b1 0%, #f6f5f0 100%);
     background-repeat: no-repeat;
 }
 
-body[data-theme='system default'] {
-    @media screen and (prefers-color-scheme: dark) {
-        --background-color: #000;
-        --text: #fff;
-        --sidebar-bg: rgba(0, 0, 0, 0.350);
-        --button-bg: rgba(0, 0, 0, 0.350);
-
-        background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
-        background-repeat: no-repeat;
-    }
-
-    @media screen and (prefers-color-scheme: light) {
+@media screen and (prefers-color-scheme: light) {
+    body[data-theme='system default'] {
         --background-color: #fff;
         --text: #000;
-        --sidebar-bg: rgba(255, 255, 255, 0.350);
-        --button-bg: rgba(255, 255, 255, 0.350);
+        --sidebar-bg: #ffffff59;
+        --button-bg: #ffffff59;
+        --shadow-color: #4242424b;
+        --switch-color: #111111b0;
+        --scrollbar-color: #4242424b;
 
         background: radial-gradient(ellipse at bottom, #b1b1b1 0%, #f6f5f0 100%);
         background-repeat: no-repeat;
     }
+}
+
+@media screen and (prefers-color-scheme: dark) {
+    body[data-theme='system default'] {
+        --background-color: #000;
+        --text: #fff;
+        --sidebar-bg: #00000059;
+        --button-bg: #42424259;
+        --shadow-color: #4242424b;
+        --switch-color: #42424259;
+        --scrollbar-color: #ffffff59;
+
+        background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
+        background-repeat: no-repeat;
+    }
 }

static/assets/js/main.js

@@ -15,7 +15,11 @@ fetch('/assets/misc/nav.html')
     });
 
 onbeforeunload = (e) => {
-    sessionStorage.setItem('settings-open', false);
+    if (localStorage.getItem('prevent_close') === 'true') {
+        e.preventDefault();
+        return e;
+    }
+    sessionStorage.clear();
 }
 
 const registerLinks = () => {
@@ -34,14 +38,25 @@ const registerLinks = () => {
                         frame.contentWindow.addEventListener('DOMContentLoaded', () => {
                             document.body.style.display = 'none';
 
-                            window.addEventListener('message', (e) => {
-                                if (e.data) {
+                            window.onmessage = (e) => {
+                                console.log(e);
+
+                                if (e.data == 'loaded') {
                                     window.history.pushState({}, '', a.href);
-                                    document.documentElement.innerHTML = frame.contentDocument.documentElement.innerHTML;
+                                    console.log(frame.contentWindow);
+                                    document.documentElement.innerHTML = frame.contentWindow.document.documentElement.innerHTML;
                                     document.body.style.display = 'none';
 
                                     registerLinks();
 
+                                    if (localStorage.getItem('panic_key')) {
+                                        document.querySelector('#panic_key').value = localStorage.getItem('panic_key');
+                                    }
+
+                                    if (localStorage.getItem('panic_url')) {
+                                        document.querySelector('#panic_url').value = localStorage.getItem('panic_url');
+                                    }
+
                                     if (sessionStorage.getItem('settings-open') === 'true') {
                                         document.querySelector('.sidebar').style.transition = 'all 0s ease';
                                         document.querySelector('.sidebar').classList.add('active');
@@ -71,11 +86,25 @@ const registerLinks = () => {
                                         });
                                     });
 
+                                    document.querySelector('#themes').querySelectorAll('button').forEach(el => {
+                                        el.onclick = () => {
+                                            Theme.set(el.innerText.toLocaleLowerCase());
+                                        }
+                                    });
+
+                                    document.querySelector('#prevent_close').addEventListener('click', () => {
+                                        localStorage.setItem('prevent_close', document.querySelector('#prevent_close').checked);
+                                    });
+
+                                    if (localStorage.getItem('prevent_close') == 'true') {
+                                        document.querySelector('#prevent_close').checked = true;
+                                    }
+
                                     setTimeout(() => {
                                         document.body.style.display = 'block';
                                     }, 500);
                                 }
-                            });
+                            }
                         });
                     }
                 } else {
@@ -89,33 +118,47 @@ const registerLinks = () => {
 
 if (window.self === window.top) {
     setTimeout(() => {
-        if (localStorage.getItem('panick_key')) {
-            document.querySelector('#panic_key').value = localStorage.getItem('panick_key');
+        if (localStorage.getItem('panic_key')) {
+            document.querySelector('#panic_key').value = localStorage.getItem('panic_key');
         }
 
-        if (localStorage.getItem('panick_url')) {
-            document.querySelector('#panic_url').value = localStorage.getItem('panick_url');
+        if (localStorage.getItem('panic_url')) {
+            document.querySelector('#panic_url').value = localStorage.getItem('panic_url');
         }
 
         document.querySelector('#reset_panic').addEventListener('click', (e) => {
-            localStorage.setItem('panick_key', '');
+            localStorage.setItem('panic_key', '');
             document.querySelector('#panic_key').value = '';
         });
 
         document.querySelector('#panic_url').addEventListener('input', (e) => {
-            localStorage.setItem('panick_url', document.querySelector('#panic_url').value);
+            localStorage.setItem('panic_url', document.querySelector('#panic_url').value);
         })
 
         window.onkeydown = (e) => {
-
-            
             if (document.querySelector('#panic_key') == document.activeElement) {
                 document.querySelector('#panic_key').value = e.key;
 
-                localStorage.setItem('panick_key', document.querySelector('#panic_key').value);
+                localStorage.setItem('panic_key', document.querySelector('#panic_key').value);
+            } else {
+                if (e.key == localStorage.getItem('panic_key')) {
+                    if (localStorage.getItem('panic_url')) {
+                        window.location.href = localStorage.getItem('panic_url');
+                    } else {
+                        alert('A panic key was used but no url was found');
+                    }
+                }
             }
         }
 
+        document.querySelector('#prevent_close').addEventListener('click', () => {
+            localStorage.setItem('prevent_close', document.querySelector('#prevent_close').checked);
+        });
+
+        if (localStorage.getItem('prevent_close') == 'true') {
+            document.querySelector('#prevent_close').checked = true;
+        }
+
         document.querySelector('#themes').querySelectorAll('button').forEach(el => {
             el.onclick = () => {
                 Theme.set(el.innerText.toLocaleLowerCase());

static/assets/misc/nav.html

@@ -21,14 +21,39 @@
     <button id="reset_panic">Reset</button>
     <br>
     <h3>Panic URL</h3>
-    <input type="url" id="panic_url" placeholder="eg: https://google.com"/>
+    <input type="url" id="panic_url" placeholder="eg: https://google.com" />
     <br>
     <h3>Theme</h3>
     <div id="themes">
+        <button>System Default</button>
         <button>Dark</button>
         <button>Light</button>
-        <button>System Default</button>
     </div>
+
+    <h3>Select a proxy</h3>
+    <select name="proxy-selection" id="proxy">
+        <option value="uv">Ultraviolet</option>
+        <option value="rh">Rammerhead</option>
+    </select>
+
+    <h3>Prevent close</h3>
+    <div class="switch">
+        <input type="checkbox" id="prevent_close">
+        <span class="slider"></span>
+    </div>
+
+    <h3>Proxy all links</h3>
+    <div class="switch">
+        <input type="checkbox" id="proxy_links">
+        <span class="slider"></span>
+    </div>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
     <br>
     <button data-attr="sidebar_trigger">Close</button>
 </div>

static/index.html

@@ -13,7 +13,7 @@
 
 <body>
     <div class="content">
-        
+        <h1>Polaris</h1>
     </div>
 
     <script src="/assets/js/main.js" type="module"></script>