add notifications

static/assets/css/main.css

@@ -81,6 +81,9 @@ button {
     height: 40px;
     color: var(--text);
     transition: 0.4s;
+}
+
+button.padded {
     margin-left: 10px;
     margin-right: 10px;
     padding-left: 20px;
@@ -162,7 +165,7 @@ button:hover {
 }
 
 input:checked+.slider {
-    background-color: #2196F3;
+    background-color: var(--switch-active);
 }
 
 input:focus+.slider {
@@ -309,4 +312,32 @@ input:checked+.slider:before {
     color: #fff;
     z-index: 10;
     font-size: 15px;
+}
+
+.notifications {
+    top: 1%;
+    width: 20%;
+    position: fixed;
+    z-index: 99999999999999999;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    transition: .5s;
+    height: 2%;
+}
+
+.notifications>.notification {
+    padding: 15px;
+    border-radius: 20px;
+    margin-top: 10px;
+    transition: .5s;
+    cursor: pointer;
+    background: var(--solid);
+};
+
+.notifications>.notification.error {
+    background: rgba(171, 61, 222, 0.801);
+    color: #fff;
+    transition: .5s;
+    inline-size: 100%;
+    overflow-wrap: break-word;
 }

static/assets/css/themes.css

@@ -1,10 +1,11 @@
 body[data-theme='dark'] {
     --background-color: #000;
     --text: #fff;
-    --sidebar-bg: #00000059;
+    --sidebar-bg: #000000ee;
     --button-bg: #42424259;
     --shadow-color: #4242424b;
     --switch-color: #42424259;
+    --switch-active: #2196F3;
     --scrollbar-color: #ffffff59;
     --solid: #1b2735;
 
@@ -15,10 +16,11 @@ body[data-theme='dark'] {
 body[data-theme='light'] {
     --background-color: #fff;
     --text: #000;
-    --sidebar-bg: #ffffff59;
+    --sidebar-bg: #ffffffee;
     --button-bg: #ffffff59;
     --shadow-color: #4242424b;
     --switch-color: #111111b0;
+    --switch-active: #2196F3;
     --scrollbar-color: #4242424b;
     --solid: #f6f5f0;
 
@@ -26,14 +28,74 @@ body[data-theme='light'] {
     background-repeat: no-repeat;
 }
 
+body[data-theme='flamingo'] {
+    --background-color: #FB5E4C;
+    --text: #fff;
+    --sidebar-bg: #000000ee;
+    --button-bg: #00000059;
+    --shadow-color: #F949724b;
+    --switch-color: #959595;
+    --switch-active: #FB5E4C;
+    --scrollbar-color: #ffffff59;
+    --solid: #FB5E4C;
+
+    background: linear-gradient(304deg, #ff8800, #f507e2);
+    background-repeat: no-repeat;
+    animation: flamingo-gradient 12s ease infinite;
+
+    @keyframes flamingo-gradient {
+        0% {
+            background-position: 0% 50%;
+        }
+
+        50% {
+            background-position: 100% 50%;
+        }
+
+        100% {
+            background-position: 0% 50%;
+        }
+    }
+}
+
+body[data-theme='frost'] {
+    --background-color: #000;
+    --text: #fff;
+    --sidebar-bg: #000000ee;
+    --button-bg: #42424259;
+    --shadow-color: #0561814b;
+    --switch-color: #42424259;
+    --switch-active: #056181;
+    --scrollbar-color: #ffffff59;
+    --solid: #056181;
+
+    background: linear-gradient(304deg, #000000, #08c1ff);
+    animation: frost-gradient 12s ease infinite;
+
+    @keyframes frost-gradient {
+        0% {
+            background-position: 0% 50%;
+        }
+    
+        50% {
+            background-position: 100% 50%;
+        }
+    
+        100% {
+            background-position: 0% 50%;
+        }
+    }
+}
+
 @media screen and (prefers-color-scheme: light) {
     body[data-theme='system default'] {
         --background-color: #fff;
         --text: #000;
-        --sidebar-bg: #ffffff59;
+        --sidebar-bg: #ffffffee;
         --button-bg: #ffffff59;
         --shadow-color: #4242424b;
         --switch-color: #111111b0;
+        --switch-active: #2196F3;
         --scrollbar-color: #4242424b;
         --solid: #f6f5f0;
 
@@ -46,10 +108,11 @@ body[data-theme='light'] {
     body[data-theme='system default'] {
         --background-color: #000;
         --text: #fff;
-        --sidebar-bg: #00000059;
+        --sidebar-bg: #000000ee;
         --button-bg: #42424259;
         --shadow-color: #4242424b;
         --switch-color: #42424259;
+        --switch-active: #2196F3;
         --scrollbar-color: #ffffff59;
         --solid: #1b2735;
 

static/assets/js/apps.js

@@ -1,3 +1,5 @@
+import PolarisError from './error.js';
+
 const load = () => {
     fetch('/assets/JSON/apps.json')
         .then(res => res.json())
@@ -13,7 +15,7 @@ const load = () => {
                 })
             });
         }).catch(e => {
-            alert('Failed to load apps');
+            new PolarisError('Failed to load apps');
         });
 }
 

static/assets/js/error.js

@@ -0,0 +1,62 @@
+class PolarisError {
+    constructor(e) {
+        let notificationContainer = document.querySelector('.notifications');
+
+        if (!notificationContainer) {
+            notificationContainer = document.createElement('div');
+            notificationContainer.classList = 'notifications';
+            document.body.appendChild(notificationContainer);
+        }
+
+        const error = document.createElement('div');
+        error.classList = 'notification error';
+        if (e.message) {
+            error.innerHTML = `<span>An error occurred: ${e.message.toString()}</span>`;
+        } else {
+            error.innerHTML = `<span>An error occurred: ${e.toString()}</span>`;
+        }
+        notificationContainer.appendChild(error);
+
+        error.onclick = () => {
+            error.style.height = '0px';
+            error.style.opacity = 0;
+            error.style.padding = '0px';
+            error.firstElementChild.style.fontSize = '0px';
+
+            setTimeout(() => {
+                error.remove();
+            }, 500);
+        }
+
+        setTimeout(() => {
+            error.style.height = '0px';
+            error.style.opacity = 0;
+            error.style.padding = '0px';
+            error.firstElementChild.style.fontSize = '0px';
+
+            setTimeout(() => {
+                error.remove();
+            }, 500);
+        }, 8000);
+
+        if (e.stack) {
+            console.log('An error occurred:\n\n' + e.stack);
+        } else {
+            console.log('An error occurred:\n\n' + e);
+        }
+    }
+}
+
+window.onerror = (a, b, c, d, e) => {
+    new PolarisError(e);
+}
+
+window.console.error = (e) => {
+    new PolarisError(e);
+}
+
+window.onmessageerror = (e) => {
+    new PolarisError(e);
+}
+
+export default PolarisError;

static/assets/js/games.js

@@ -1,3 +1,5 @@
+import PolarisError from './error.js';
+
 const load = () => {
     fetch('/assets/JSON/games.json')
         .then(res => res.json())
@@ -10,10 +12,10 @@ const load = () => {
 
                 el.addEventListener('click', () => {
                     
-                })
+                });
             });
         }).catch(e => {
-            alert('Failed to load games');
+            new PolarisError('Failed to load games');
         });
 }
 

static/assets/js/main.js

@@ -1,10 +1,7 @@
 import Settings from './settings.js';
 import Games from './games.js';
 import Apps from './apps.js';
-
-window.onerror = (e) => {
-    alert(e);
-}
+import PolarisError from './error.js';
 
 fetch('/assets/misc/nav.html')
     .then(res => res.text())
@@ -15,9 +12,7 @@ fetch('/assets/misc/nav.html')
             window.parent.postMessage('loaded', location.origin);
         }
     }).catch(e => {
-        alert('Failed to load navbar');
-
-        if (confirm('Try again?')) location.reload();
+       new PolarisError('Failed to load navbar <a href="javascript:location.reload();" data-link="true"><button>Reload</button></a>');
     });
 
 onbeforeunload = (e) => {

static/assets/js/settings.js

@@ -1,4 +1,5 @@
 import Theme from './themes.js';
+import PolarisError from './error.js';
 
 const load = () => {
     const isScrollable = (element) => {
@@ -32,7 +33,7 @@ const load = () => {
                 if (localStorage.getItem('panic_url')) {
                     window.location.href = localStorage.getItem('panic_url');
                 } else {
-                    alert('A panic key was used but no url was found');
+                    new PolarisError('A panic key was used but no url was found.');
                 }
             }
         }

static/assets/misc/nav.html

@@ -22,16 +22,18 @@
 
     <h3>Panic Key</h3>
     <input type="text" name="Panic Key" id="panic_key" value="No Key Selected" readonly />
-    <button id="reset_panic">Reset</button>
+    <button id="reset_panic" class="padded">Reset</button>
     <br>
     <h3>Panic URL</h3>
     <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 class="padded">System Default</button>
+        <button class="padded">Dark</button>
+        <button class="padded">Light</button>
+        <button class="padded">Flamingo</button>
+        <button class="padded">Frost</button>
     </div>
 
     <h3>Select a proxy</h3>
@@ -51,6 +53,12 @@
         <input type="checkbox" id="proxy_links">
         <span class="slider"></span>
     </div>
+
+    <h3>Developer Mode</h3>
+    <div class="switch">
+        <input type="checkbox" id="dev_mode">
+        <span class="slider"></span>
+    </div>
     <br>
     <button data-attr="sidebar_trigger">Close</button>
 </div>