From c566989c8b5f057781b36e5056388647518453c8 Mon Sep 17 00:00:00 2001
From: Green! <81369743+GreenyDEV@users.noreply.github.com>
Date: Mon, 13 Jun 2022 22:36:07 -0400
Subject: [PATCH] Added themes, Massive UI improvements in settings

---
 .DS_Store                   | Bin 6148 -> 6148 bytes
 static/.DS_Store            | Bin 6148 -> 6148 bytes
 static/index.html           |  20 +--
 static/mobile/.DS_Store     | Bin 6148 -> 6148 bytes
 static/options/index.html   |  79 ++++++---
 static/resources/options.js | 340 +++++++++++++++++++++++++++++++++---
 static/style/main.css       |   1 -
 static/style/master.css     |   2 +
 static/style/options.css    |  28 +--
 9 files changed, 401 insertions(+), 69 deletions(-)

diff --git a/.DS_Store b/.DS_Store
index a533515eaa11f88b13397dcb2f4960bcac199f75..bacc2a58dcdfe005bb87a1d7b27b9fc7606ec01f 100644
GIT binary patch
delta 65
zcmZoMXffEJ&d9iRvIb+JifDDUfsTT?S*?yjwWSe|X<}wlTg%BIs;qAv6rY`wo0s1{
T`2eFlW5?zPjOuKQSvUj$V2u)o

delta 47
zcmZoMXffEJ&d9i9vIb)zw?uWdu8FaZg0Ye5<b{mVj9ruWGRiY{Z@$Z@&bFDI<1aq|
DOuh~s

diff --git a/static/.DS_Store b/static/.DS_Store
index 4441b79f269b06431a575613ddc9acbbfca459aa..3d53cb036aa15e2f4173251e70d3d5ffd3cbeb48 100644
GIT binary patch
literal 6148
zcmeHLy-q?g6g~wMgv5|ID7f6wQQ`|+39>ly0?JR&gzF^=CT@3d)j?xOd<q}I!8dTz
z-NC`cNk_la7HRJV-HahUN&EG-=k$Dh<+c<e64hb5LR2K8913G5k7|nXIG2Q_bk7=4
z$T>Q6((6_ltuW{(yj_P=z$x(G6ySGvkq#-Ked<!;{k?sRj|X9`*6f8%^yfZ4FYD=z
zhwY?K`&Xa-fw@oIVG8gFD5NIX^r&O)BjxNUK5p`OTfUm`Fy;ut36EJm7LRhoJhEWX
zrvZ3`bQIsw3a?2IlS}sHddwv@kI81Xm&Hf!%d|wtyfR=jM5~otrS%nXn&M^hdaBnc
zuhwd+=R~QWJ#BuQtk(j#4d^VfYP5B3kD7d*S8v8T8S$n@(>?6`KIczCms9KeQo7h3
z_nSH2JEL(<8DnOPk6C$2_nc?m3}-f5uAtD>P64NYQ{Y<x-XA;^Mqgv3P;MQl<P`vz
zLANxt`7XgRo<?6|q!1%8p+bQwROl;)P~qtJw4bjrQmDd7=*x%DnT5Wg2$>!8d(xeR
zuh7*_0jGeiKw3Q(`TXCRegC(E+>=wlDKJ+Gh)k_ftKuW+vo-PI_^kC%_E6Z^FH$H&
lQ0e1XHuxy!{}rTR%;N^o*BB{856t}#kTST+De$KXd;v@y!Nvdp

literal 6148
zcmeHK%TB{E5L}l~LR&<R9Q_4I{6SQe1807Krmad*Xb`kKZuxVVwO1lhf>Nszs;XVd
z9>>|)jVG}k6OkEj=Ql(N5ydEs(EwG8@qI20>q!rjjf=6Mx4XQUWqFY`ytP9WPz4T6
z0iL^kTG2C2X-W0@n|#;IJ^HBXOBSpgJ=5B}Z{rQ%wWc{Te9|>N(gqpx%39IJN!mC8
zIs3>_P=+WuEjn_Is=fg^&XC~+qgeshohn?^y#w-`(<{Fn@V98qc6d{lO-4YzQ{>vv
z*AB`Je?0@^f8a}a>eP(mi)TRm9&~!|c;_+u1jIbFxx4T47#|=W?i)z?s(>nRbPDkL
zU{M%T!P28!I#9VI05C$gGqm}af;m<&6)ZjC4$OEe&{K^ZF^s39--=%<SbFqyGIIDZ
zlG(@!#klN<Z=E}t)T7p_fGSW|;KW}hy#L?+eg3bL^hy;_1&&Gq6HV?XV+=|5*2ds?
uueB%-C~WLkdUO<2vK_kyZ^c(A&T!9i1DFby9?=8S9|0$WR;s|iD)0kiVO**J

diff --git a/static/index.html b/static/index.html
index 72e25a0..166ea26 100644
--- 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>
-				</li>
-				-->
+
             <li>
-                <a href="options">Settings</a>
+                <a class="a-navbutton" onclick="href = '/go/' + __uv$config.encodeUrl('https://hamburgerham.tk/games/')">Games</a>
+            </li>
+            <li>
+                <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>
diff --git a/static/mobile/.DS_Store b/static/mobile/.DS_Store
index 3fd539b0e1d8453a66be94992a7016fddd277860..22c74ce2d1ca82c0c3e9c1e7e4f6e4cd883765de 100644
GIT binary patch
delta 74
zcmZoMXffCj!o;R|eWDw)#^fj_6&SOHDS_?8U$E#aCK(u$huMei<>5&nwQ<a1Q0C?;
H<}MKcue2F(

delta 74
zcmZoMXffCj!o*hgVzYON`s64k6&SOHDS_=f!xoU}D<&BjlZV-dO;mC#NHmUF49eVG
I#oQ$V0PIy6A^-pY

diff --git a/static/options/index.html b/static/options/index.html
index 56644ea..dcdbdd8 100644
--- 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,45 +26,71 @@
 <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>
-    <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>
 
+    <div class="container">
+
+        <div id="navbar" style='background: none;'>
+            <div id="notifhere">
+
+            </div>
+            <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</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">
-            <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>
-
-            <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;">
-        <p class="name"> Proxy <b class='new-tag'> NEW </b> </p>
-        <p class="description"> Choose the proxy that fits you! </p>
-
-        <span class="custom-dropdown big">
-         <a onclick="unsavedChanges();"> <select id="proxySwitcher">    
+            <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 class="dropdown" id="proxySwitcher">    
                 <option value="uv">UltraViolet</option>
                 <option value="cyclone">Cyclone</option>  
             </select>
         </a>  
        
         </span>
-        <button onclick="saveIc();switchProxy()" class="button-save"> Save! </button>
-        <p class="expiramental"><b>This feature is extremely experimental </b></p>
+            <button onclick="saveIc();switchProxy()" class="button-save"> Save! </button>
 
 
-    </div>
+
+        </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>
     </div>
 
 
@@ -87,7 +114,7 @@
             site: 'AZa75ZyiRRZ'
         });
     </script>
-
+    </div>
 
 </body>
 
diff --git a/static/resources/options.js b/static/resources/options.js
index e6b0ece..23da7f8 100644
--- 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;
-   
-};
 
 
 
@@ -74,4 +58,316 @@ function switchProxy() {
     var storedChoice = localStorage.getItem('proxy');
     console.log(selectedOption)
 
-}
\ No newline at end of file
+}
+
+
+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";
+    }
+};
\ No newline at end of file
diff --git a/static/style/main.css b/static/style/main.css
index dbec71a..32232e2 100644
--- 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;
diff --git a/static/style/master.css b/static/style/master.css
index df93d2f..58a4907 100644
--- 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 {
diff --git a/static/style/options.css b/static/style/options.css
index a9407f5..974aae3 100644
--- 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;