Added themes, Massive UI improvements in settings

2022-06-13 22:36:07 -04:00 · 2022-06-13 22:36:07 -04:00 · c566989c8b
commit c566989c8b
parent 2b2d199596
9 changed files with 401 additions and 69 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/static/.DS_Store
+++ b/static/.DS_Store
--- a/static/index.html
+++ b/static/index.html
@ -6,6 +6,7 @@
    <link rel="icon" type="image/x-icon" href="/images/logo.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Stylesheets -->
+    <script src="resources/options.js"></script>
    <link rel="stylesheet" href="style/master.css">
    <link rel="stylesheet" href="style/main.css">
    <!-- Embed -->
@ -21,21 +22,20 @@
    <script src="uv/uv.bundle.js"></script>
    <script src="uv/uv.config.js"></script>
    <div id="navbar">
-        <img src='/images/logo.png' id="thumbImg" style='height: 90%; margin-left: 5%; border-radius: 5px; '>
-        <h1 style='margin-left: .5%; font-family: "Roboto"; color: #4de0fa'>nebula</h1>
+        <img src='images/logo.png' id="thumbImg" style='height: 90%; margin-left: 5%; border-radius: 5px; '>
+        <h1 class="nebHeader" style='margin-left: .5%; font-family: "Roboto"; color: #4de0fa'>nebula.</h1>

        <ul>
-            <!--
+
            <li>
-					<a onclick="href = '/go/' + __uv$config.encodeUrl('https://discord.gg/neb')">C <ubr>hat </a>
+                <a class="a-navbutton" onclick="href = '/go/' + __uv$config.encodeUrl('https://hamburgerham.tk/games/')">Games</a>
            </li>
-				-->
            <li>
-                <a href="options">Settings</a>
+                <a class="a-navbutton" href="options">Settings</a>
            </li>

            <li>
-                <a href="https://discord.gg/bZQxg6SkVp">Need Support?</a>
+                <a class="a-navbutton" href="https://discord.gg/bZQxg6SkVp">Need Support?</a>
            </li>
        </ul>
    </div>
@ -44,7 +44,7 @@
    <script src="resources/deviceHandler.js"></script>
    <div id="content">
        <form class="url" action="" method="POST" id="unblocker-form">
-            <input type="text" id="url" name="url" autocomplete="off" placeholder="Explore the web freely">
+            <input class="omnibox" type="text" id="url" name="url" autocomplete="off" placeholder="Explore the web freely">
        </form>

    </div>
--- a/static/mobile/.DS_Store
+++ b/static/mobile/.DS_Store
--- a/static/options/index.html
+++ b/static/options/index.html
@ -10,6 +10,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Stylesheets -->
+
    <link rel="stylesheet" href="../style/master.css">
    <link rel="stylesheet" href="../style/main.css">
    <link rel="stylesheet" href="../style/options.css">
@ -25,34 +26,43 @@
 <body>
    <!-- Scripts -->
    <script src="../uv/uv.bundle.js"></script>
+
    <script src="../uv/uv.config.js"></script>
-    <div>
-    </div>
-    <div id="navbar" style='background: none;'>
+
    <div>

    </div>
+
+    <div class="container">
+
+        <div id="navbar" style='background: none;'>
+            <div id="notifhere">
+
            </div>
-    <div class="setting">
            <div onclick="window.location ='/';" class="bk-btn">
                <div onclick="window.location ='/';" class="bk-btn-triangle"></div>
                <div onclick="window.location ='/';" class="bk-btn-bar"></div>
            </div>
+            <img src='../images/logo.png' id="thumbImg" style='height: 90%; margin-left: 2%; border-radius: 5px; '>
+            <h1 class="nebHeader" style='margin-left: .5%; font-family: "Roboto"; color: #4de0fa'>nebula.</h1>
+        </div>
+        <div class="setting">
+

            <div class="settings-cont">
-            <p class="name"> Stealth Mode <b class='new-tag'> NEW </b> </p>
-            <p class="description"> Prevents teachers, administrators and analytic collection extensions from gathering information, viewing your screen via Browser extension, or browser recording (history) </p>
+                <p class="name"> Stealth Mode</p>
+                <p class="description">Stops extensions from peeping</p>

                <input class="setting-input" id="undefined" type="checkbox" onclick="saveIc();toggleNoGG()">
                <label for="undefined" class="toogle-button"></label>
            </div>
        </div>
-    <div class="settings-cont" style="display: inline-block;">
+        <div class="settings-cont">
            <p class="name"> Proxy <b class='new-tag'> NEW </b> </p>
            <p class="description"> Choose the proxy that fits you! </p>
-
+            <p class="expiramental"><b>This feature is extremely experimental </b></p>
            <span class="custom-dropdown big">
-         <a onclick="unsavedChanges();"> <select id="proxySwitcher">    
+         <a onclick="unsavedChanges();"> <select class="dropdown" id="proxySwitcher">    
                <option value="uv">UltraViolet</option>
                <option value="cyclone">Cyclone</option>  
            </select>
@ -60,7 +70,24 @@
       
        </span>
            <button onclick="saveIc();switchProxy()" class="button-save"> Save! </button>
-        <p class="expiramental"><b>This feature is extremely experimental </b></p>
+
+
+
+        </div>
+        <div class="settings-cont">
+            <p class="name"> Theme <b class='new-tag'> NEW </b> </p>
+            <p class="description"> Choose from our themes so your eyes don't hate us. </p>
+
+            <span class="custom-dropdown big">
+         <a onclick="unsavedChanges();"> <select  class="dropdown" id="themeSwitcher">    
+                <option value="dark">Shades</option>
+                <option value="light">Blizzard</option>  
+                <option value="hacker">Hacker</option>  
+            </select>
+        </a>  
+       
+        </span>
+            <button onclick="saveIc();switchTheme();" class="button-save"> Save! </button>


        </div>
@ -87,7 +114,7 @@
            site: 'AZa75ZyiRRZ'
        });
    </script>
-
+    </div>

 </body>

--- a/static/resources/options.js
+++ b/static/resources/options.js
@ -21,13 +21,13 @@ function saveIc() {
    var notification = `
            <div class="notification-container" id="notification-container">
            <div class="notification notification-success">
-                <strong>Success!</strong> Your settings have been saved! 
+                <strong>Success!</strong> Your settings have been saved - Reloading.
            </div>
        </div>
        `;
-    document.getElementById('navbar').innerHTML = notification
+    document.getElementById('notifhere').innerHTML = notification
    setTimeout(() => {
-        var NotificationOBJ = document.getElementById('notif')
+        var NotificationOBJ = document.getElementById('notifhere')

    }, 2000);
 };
@ -40,29 +40,13 @@ function unsavedChanges() {
 </div>
 </div>
        `;
-    document.getElementById('navbar').innerHTML = notification
+    document.getElementById('notifhere').innerHTML = notification
    setTimeout(() => {
-        var NotificationOBJ = document.getElementById('notif')
+        var NotificationOBJ = document.getElementById('notifhere')

    }, 2000);
 };

-// Update the CheckBox to match the settings 
-window.onload = function() {
-    console.log("Current Settings: ")
-    console.log("NoGG = ", localStorage.getItem('nogg'))
-
-    if (localStorage.getItem('nogg') == 'on') {
-        setTimeout(() => {
-            var item = document.getElementById("undefined");
-            document.getElementById("undefined").checked = true;
-        }, 600);
-    }
-    var selecter = document.getElementById("proxySwitcher");
-    var storedChoice = localStorage.getItem('proxy');
-    selecter.value = storedChoice;
-   
-};



@ -75,3 +59,315 @@ function switchProxy() {
    console.log(selectedOption)

 }
+
+
+function switchTheme() {
+    var selecter = document.getElementById("themeSwitcher");
+    var selectedOption = selecter.value
+
+    localStorage.setItem("theme", selectedOption);
+    var storedChoice = localStorage.getItem('theme');
+    console.log(selectedOption)
+    if (storedChoice == 'light') {
+        //LIGHT
+        console.log("loaded theme:", storedChoice);
+        document.body.style.backgroundColor = " #d8d8d8";
+        const descriptions = document.getElementsByClassName('description');
+        for (const element of descriptions) {
+            element.style.color = "#000000";
+        }
+        const names = document.getElementsByClassName('name');
+        for (const element of names) {
+            element.style.color = "#000000";
+        }
+        const dropdowns = document.getElementsByClassName('dropdown');
+        for (const element of dropdowns) {
+            element.style.backgroundColor = "#606b69";
+        }
+        const buttons = document.getElementsByClassName('button-save');
+        for (const element of buttons) {
+            element.style.backgroundColor = "#606b69";
+        }
+        const switches = document.getElementsByClassName('toogle-button');
+        for (const element of switches) {
+            element.style.backgroundColor = "#606b69";
+        }
+        //DARK
+    } else if (storedChoice == 'dark') {
+        console.log("loaded theme:", storedChoice);
+        document.body.style.backgroundColor = "#191724";
+        const descriptions = document.getElementsByClassName('description');
+        for (const element of descriptions) {
+            element.style.color = "#6e6a86";
+        }
+        const names = document.getElementsByClassName('name');
+        for (const element of names) {
+            element.style.color = "#e0def4";
+        }
+        const dropdowns = document.getElementsByClassName('dropdown');
+        for (const element of dropdowns) {
+            element.style.backgroundColor = "#1abc9c";
+        }
+        const buttons = document.getElementsByClassName('button-save');
+        for (const element of buttons) {
+            element.style.backgroundColor = "#1abc9c";
+        }
+        const switches = document.getElementsByClassName('toogle-button');
+        for (const element of switches) {
+            element.style.backgroundColor = "#1abc9c";
+
+        }
+        document.getElementById('navbar').style.backgroundColor = "#26233a";
+        var storedChoice = localStorage.getItem('theme');
+    } else if (storedChoice == 'hacker') {
+        console.log("loaded theme:", storedChoice);
+        document.body.style.backgroundColor = "#000";
+        const descriptions = document.getElementsByClassName('description');
+        for (const element of descriptions) {
+            element.style.color = "#00ff0b";
+        }
+        const names = document.getElementsByClassName('name');
+        for (const element of names) {
+            element.style.color = "#00ff0b";
+        }
+        const dropdowns = document.getElementsByClassName('dropdown');
+        for (const element of dropdowns) {
+            element.style.backgroundColor = "#00ff0b";
+        }
+        const buttons = document.getElementsByClassName('button-save');
+        for (const element of buttons) {
+            element.style.backgroundColor = "#00ff0b";
+        }
+        const switches = document.getElementsByClassName('toogle-button');
+        for (const element of switches) {
+            element.style.backgroundColor = "#00ff0b";
+
+        }
+        const boxes = document.getElementsByClassName('settings-cont');
+        for (const element of boxes) {
+            element.style.border = "2px solid rgb(0, 255, 11)";
+
+        }
+        const newTags = document.getElementsByClassName('new-tag');
+        for (const element of newTags) {
+            element.style.color = "#00ff0b";
+
+        }
+        document.getElementById('navbar').style.backgroundColor = "#000";
+        const navbuttons = document.getElementsByClassName('a-navbutton');
+        for (const element of navbuttons) {
+            element.style.color = "#00ff0b";
+        }
+        const nebheader = document.getElementsByClassName('nebHeader');
+        for (const element of nebheader) {
+            element.style.color = "#00ff0b";
+        }
+        const Obox = document.getElementsByClassName('omnibox');
+        for (const element of Obox) {
+            element.style.backgroundColor = "black";
+        }
+    };
+    location.reload()
+
+
+};
+
+function getOption(option) {
+    console.log(localStorage.getItem(option));
+}
+
+window.onload = function() {
+    // Update the CheckBox to match the settings 
+    console.log("Current Settings: ")
+    console.log("NoGG = ", localStorage.getItem('nogg'))
+    if (window.location.pathname == '/static/options/' || window.location.pathname == 'options/' || window.location.pathname == '/options/') {
+        if (localStorage.getItem('nogg') == 'on') {
+            setTimeout(() => {
+                var item = document.getElementById("undefined");
+                document.getElementById("undefined").checked = true;
+            }, 600);
+        }
+
+        // Update the front end to match option localstorage
+        var selecter = document.getElementById("proxySwitcher");
+        var storedChoice = localStorage.getItem('proxy');
+        selecter.value = storedChoice;
+
+        // ThemeSet
+        var themeSelector = document.getElementById("themeSwitcher");
+        var storedTheme = localStorage.getItem('theme');
+        themeSelector.value = storedTheme;
+    }
+    if (window.location.pathname == '/static/options/' || window.location.pathname == 'options/' || window.location.pathname == '/options/') {
+        if (storedTheme == 'light') {
+            console.log("loaded theme:", storedTheme);
+            document.body.style.backgroundColor = " #d8d8d8";
+            const descriptions = document.getElementsByClassName('description');
+            for (const element of descriptions) {
+                element.style.color = "#000000";
+            }
+            const names = document.getElementsByClassName('name');
+            for (const element of names) {
+                element.style.color = "#000000";
+            }
+            const dropdowns = document.getElementsByClassName('dropdown');
+            for (const element of dropdowns) {
+                element.style.backgroundColor = "#606b69";
+            }
+            const buttons = document.getElementsByClassName('button-save');
+            for (const element of buttons) {
+                element.style.backgroundColor = "#606b69";
+            }
+            const switches = document.getElementsByClassName('toogle-button');
+            for (const element of switches) {
+                element.style.backgroundColor = "#606b69";
+            }
+        } else if (storedTheme == 'dark') {
+            console.log("loaded theme:", storedTheme);
+            document.body.style.backgroundColor = "#191724";
+            const descriptions = document.getElementsByClassName('description');
+            for (const element of descriptions) {
+                element.style.color = "#6e6a86";
+            }
+            const names = document.getElementsByClassName('name');
+            for (const element of names) {
+                element.style.color = "#e0def4";
+            }
+            const dropdowns = document.getElementsByClassName('dropdown');
+            for (const element of dropdowns) {
+                element.style.backgroundColor = "#1abc9c";
+            }
+            const buttons = document.getElementsByClassName('button-save');
+            for (const element of buttons) {
+                element.style.backgroundColor = "#1abc9c";
+            }
+            const switches = document.getElementsByClassName('toogle-button');
+            for (const element of switches) {
+                element.style.backgroundColor = "#1abc9c";
+
+            }
+            document.getElementById('navbar').style.backgroundColor = "#26233a";
+        } else if (storedTheme == 'hacker') {
+            console.log("loaded theme:", storedChoice);
+            document.body.style.backgroundColor = "#000";
+            const descriptions = document.getElementsByClassName('description');
+            for (const element of descriptions) {
+                element.style.color = "#00ff0b";
+            }
+            const names = document.getElementsByClassName('name');
+            for (const element of names) {
+                element.style.color = "#00ff0b";
+            }
+            const dropdowns = document.getElementsByClassName('dropdown');
+            for (const element of dropdowns) {
+                element.style.backgroundColor = "#00ff0b";
+            }
+            const buttons = document.getElementsByClassName('button-save');
+            for (const element of buttons) {
+                element.style.backgroundColor = "#00ff0b";
+            }
+            const switches = document.getElementsByClassName('toogle-button');
+            for (const element of switches) {
+                element.style.backgroundColor = "#00ff0b";
+
+            }
+            const boxes = document.getElementsByClassName('settings-cont');
+            for (const element of boxes) {
+                element.style.border = "2px solid rgb(0, 255, 11)";
+
+            }
+            const newTags = document.getElementsByClassName('new-tag');
+            for (const element of newTags) {
+                element.style.color = "#00ff0b";
+
+            }
+            document.getElementById('navbar').style.backgroundColor = "#000";
+            const navbuttons = document.getElementsByClassName('a-navbutton');
+            for (const element of navbuttons) {
+                element.style.color = "#00ff0b";
+            }
+            const nebheader = document.getElementsByClassName('nebHeader');
+            for (const element of nebheader) {
+                element.style.color = "#00ff0b";
+            }
+            const Obox = document.getElementsByClassName('omnibox');
+            for (const element of Obox) {
+                element.style.backgroundColor = "black";
+            }
+        };
+    };
+    var storedTheme = localStorage.getItem('theme');
+    if (storedTheme == "light") {
+
+        document.getElementById('navbar').style.backgroundColor = "#a2a2a2";
+        document.body.style.backgroundColor = " #d8d8d8";
+        const navbuttons = document.getElementsByClassName('a-navbutton');
+        for (const element of navbuttons) {
+            element.style.color = "#000000";
+        }
+        const nebheader = document.getElementsByClassName('nebHeader');
+        for (const element of nebheader) {
+            element.style.color = "#000000";
+        }
+        const Obox = document.getElementsByClassName('omnibox');
+        for (const element of Obox) {
+            element.style.backgroundColor = "#000000";
+        }
+        const stamp = document.getElementsByClassName('stamp');
+        for (const element of stamp) {
+            element.style.color = "#000";
+        }
+    } else if (storedTheme == 'dark') {
+        document.getElementById('navbar').style.backgroundColor = "#26233a";
+        document.body.style.backgroundColor = "#191724";
+
+
+    } else if (storedTheme == 'hacker') {
+        console.log("loaded theme:", storedChoice);
+        document.body.style.backgroundColor = "#000";
+        const descriptions = document.getElementsByClassName('description');
+        for (const element of descriptions) {
+            element.style.color = "#00ff0b";
+        }
+        const names = document.getElementsByClassName('name');
+        for (const element of names) {
+            element.style.color = "#00ff0b";
+        }
+        const dropdowns = document.getElementsByClassName('dropdown');
+        for (const element of dropdowns) {
+            element.style.backgroundColor = "#00ff0b";
+        }
+        const buttons = document.getElementsByClassName('button-save');
+        for (const element of buttons) {
+            element.style.backgroundColor = "#00ff0b";
+        }
+        const switches = document.getElementsByClassName('toogle-button');
+        for (const element of switches) {
+            element.style.backgroundColor = "#00ff0b";
+
+        }
+        const boxes = document.getElementsByClassName('settings-cont');
+        for (const element of boxes) {
+            element.style.border = "2px solid rgb(0, 255, 11)";
+
+        }
+        const newTags = document.getElementsByClassName('new-tag');
+        for (const element of newTags) {
+            element.style.color = "#00ff0b";
+        }
+        document.getElementById('navbar').style.backgroundColor = "#000";
+        const navbuttons = document.getElementsByClassName('a-navbutton');
+        for (const element of navbuttons) {
+            element.style.color = "#00ff0b";
+        }
+        const nebheader = document.getElementsByClassName('nebHeader');
+        for (const element of nebheader) {
+            element.style.color = "#00ff0b";
+        }
+        const Obox = document.getElementsByClassName('omnibox');
+        for (const element of Obox) {
+            element.style.backgroundColor = "black";
+        }
+        document.getElementById('navbar').style.backgroundColor = "#000";
+    }
+};
--- a/static/style/main.css
+++ b/static/style/main.css
@ -62,7 +62,6 @@ a:hover {

 #navbar ul:not(.down) {
    font-family: 'Helvetica';
-    background-color: var(--navbar-color);
    /* box-shadow: 2px 2px rgb(0 0 0 / 20%); */
    color: white;
    margin-left: auto;
--- a/static/style/master.css
+++ b/static/style/master.css
@ -70,6 +70,8 @@ input:focus::placeholder {
    opacity: 38%;
    user-select: none;
    font-size: 13px;
+    padding-left: 5px;
+    padding-bottom: 1px;
 }

 .github {
--- a/static/style/options.css
+++ b/static/style/options.css
@ -27,6 +27,16 @@ body {
  background-color: var(--background-primary);
 }*/

+.container {
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    flex-wrap: nowrap;
+    justify-content: space-evenly;
+    align-items: flex-end;
+    margin-top: 75px;
+}
+
 #sidebar {
    animation: fadeIn 700ms ease-in 30ms forwards;
    -webkit-animation: fadeIn 700ms ease-in 300ms forwards;
@ -80,9 +90,6 @@ li {
 }

 .section {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
    background-color: transparent;
    color: var(--sidebar-text-color);
    font-size: var(--section-font-size);
@ -171,9 +178,7 @@ ul li {
    width: 30px;
    height: 30px;
    transform: translateY(-30px);
-    justify-self: end;
    font-family: var(--setting-desc-font);
-    align-self: flex-end;
    color: white;
 }

@ -198,8 +203,8 @@ ul li {
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap');
 .notification-container {
    position: fixed;
-    top: 15px;
-    right: 15px;
+    top: 4px;
+    right: 5px;
    width: 500px;
    max-width: calc(100% - 30px);
    font-family: 'Roboto', sans-serif;
@ -263,7 +268,6 @@ ul li {
 }

 .stamp {
-    text-align: left;
    position: fixed;
    bottom: 0;
 }
@ -304,6 +308,11 @@ ul li {
    border: 2px solid rgb(121 103 221);
    border-radius: 9px;
    margin-top: 20px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: space-evenly;
 }

 .name {
@ -335,7 +344,6 @@ ul li {
    width: .7em;
    height: .7em;
    margin: .5em;
-    display: inline-block;
 }


@ -425,7 +433,7 @@ ul li {
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
 .expiramental {
    font-family: 'Roboto', sans-serif;
-    font-size: 14px;
+    font-size: 10px;
    color: rgb(184, 0, 0);
    font-weight: 400;
    text-decoration: underline;