From 97deb136b4d7954e54b96c5d80e95427e1c253bc Mon Sep 17 00:00:00 2001 From: Russell2259 Date: Wed, 3 May 2023 21:05:51 -0600 Subject: [PATCH] add more options to settings menu --- static/assets/css/dropdown.css | 43 +++++++++++++ static/assets/css/main.css | 113 ++++++++++++++++++++++++++++++--- static/assets/css/sidebar.css | 5 +- static/assets/css/themes.css | 50 +++++++++------ static/assets/js/main.js | 71 +++++++++++++++++---- static/assets/misc/nav.html | 29 ++++++++- static/index.html | 2 +- 7 files changed, 267 insertions(+), 46 deletions(-) create mode 100644 static/assets/css/dropdown.css diff --git a/static/assets/css/dropdown.css b/static/assets/css/dropdown.css new file mode 100644 index 0000000..cea0ed4 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/static/assets/css/main.css b/static/assets/css/main.css index bf9f6b1..3ac12ab 100644 --- a/static/assets/css/main.css +++ b/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); } \ No newline at end of file diff --git a/static/assets/css/sidebar.css b/static/assets/css/sidebar.css index a5a50a2..f7774a6 100644 --- a/static/assets/css/sidebar.css +++ b/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 { diff --git a/static/assets/css/themes.css b/static/assets/css/themes.css index de95ffe..c48b5b0 100644 --- a/static/assets/css/themes.css +++ b/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; + } } \ No newline at end of file diff --git a/static/assets/js/main.js b/static/assets/js/main.js index 2c34731..9ecac4a 100644 --- a/static/assets/js/main.js +++ b/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()); diff --git a/static/assets/misc/nav.html b/static/assets/misc/nav.html index e7457ae..b698920 100644 --- a/static/assets/misc/nav.html +++ b/static/assets/misc/nav.html @@ -21,14 +21,39 @@

Panic URL

- +

Theme

+ -
+ +

Select a proxy

+ + +

Prevent close

+
+ + +
+ +

Proxy all links

+
+ + +
+
+
+
+
+
+
+

\ No newline at end of file diff --git a/static/index.html b/static/index.html index 036297d..737c87f 100644 --- a/static/index.html +++ b/static/index.html @@ -13,7 +13,7 @@
- +

Polaris