Custom CSS Feature + AB Cloak Customization

Not sure if the AB Cloak is working 100%, so if someone could test it out would appreciate. (Probably won't break AB if not?)

public/resources/nebulamain.js

@@ -442,9 +442,21 @@ function switchTheme() {
     changeCSS("--text-color-primary", "#303030", true);
     localStorage.setItem("theme", "light");
   }
-  if (selectedOption == "custom") {
+  if (selectedOption == 'custom') {
-    let response = prompt("Please enter the code for a custom theme:", "");
+    changeCSS('--background-primary', localStorage.getItem("--background-primary") , true)
-    alert("This feature is not ready yet. Please try again later.");
+    changeCSS('--navbar-color', localStorage.getItem("--navbar-color") , true)
+    changeCSS('--navbar-height', localStorage.getItem("--navbar-height") , true)
+    changeCSS('--navbar-text-color', localStorage.getItem("--navbar-text-color") , true)
+    changeCSS('--input-text-color', localStorage.getItem("--input-text-color") , true)
+    changeCSS('--input-placeholder-color', localStorage.getItem("--input-placeholder-color") , true)
+    changeCSS('--input-background-color', localStorage.getItem("--input-background-color") , true)
+    changeCSS('--input-border-color', localStorage.getItem("--input-border-color") , true)
+    changeCSS('--input-border-size', localStorage.getItem("--input-border-size") , true)
+    changeCSS('--navbar-link-color', localStorage.getItem("--navbar-link-color") , true)
+    changeCSS('--navbar-font', localStorage.getItem("--navbar-font") , true)
+    changeCSS('--navbar-logo-filter', localStorage.getItem("--navbar-logo-filter") , true)
+    changeCSS('--text-color-primary', localStorage.getItem("--text-color-primary") , true)
+    localStorage.setItem('theme', 'custom')
   }
 }
 
@@ -660,10 +672,34 @@ function handleTabLeave() {
 // Create and Add the event listener
 document.addEventListener("visibilitychange", handleTabLeave);
 
-const stealthStored = localStorage.getItem("nogg");
+let tryAbFavi = localStorage.getItem('ABfaviconURL');
+let ABFavicon = "";
+if (tryAbFavi === null) {
+  console.warn("ABfaviconURL is null, Defaulting");
+  ABFavicon = "";
+} else if (tryAbFavi == "") {
+  console.warn("ABfaviconURL is empty, Defaulting");
+  ABFavicon = "";
+} else {
+  ABFavicon = tryAbFavi;
+}
+
+let tryAbTitle = localStorage.getItem('ABtitle');
+let ABTitle = "";
+if (tryAbTitle === null) {
+  console.warn("ABtitle is null, Defaulting");
+  ABTitle = "";
+} else if (tryAbTitle == "") {
+  console.warn("ABtitle is empty, Defaulting");
+  ABTitle = "";
+} else {
+  ABTitle = tryAbTitle;
+}
+
+const stealthStored = localStorage.getItem('nogg')
 function link (_link) {
-  if (stealthStored == "on") {
+  if (stealthStored == 'on') {
-    let inFrame;
+    let inFrame
     try {
       inFrame = window !== top;
     } catch (e) {
@@ -675,25 +711,25 @@ function link(_link) {
         if (!popup || popup.closed) {
           alert("Popups are disabled!");
         } else {
-          const doc = popup.document;
+          const doc = popup.document
-          const iframe = doc.createElement("iframe");
+          const iframe = doc.createElement('iframe')
-          const style = iframe.style;
+          const style = iframe.style
-          const img = doc.createElement("link");
+          const img = doc.createElement('link')
-          const link = location.href;
+          const link = location.href
-          img.rel = "icon";
+          img.rel = 'icon'
-          img.href =
+          img.href = ABFavicon
-            "https://ssl.gstatic.com/images/branding/product/1x/drive_2020q4_32dp.png";
+          doc.title = ABTitle
-          doc.title = getRandomName();
+          var currentLink = _link.slice(0, _link.length - 1)
-          var currentLink = _link.slice(0, _link.length - 1);
           iframe.src =
             location.origin +
             "/service/go/" +
-            __uv$config.encodeUrl(currentLink);
+            __uv$config.encodeUrl(currentLink)
-          style.position = "fixed";
+          style.position = 'fixed'
-          style.top = style.bottom = style.left = style.right = 0;
+          style.top = style.bottom = style.left = style.right = 0
-          style.border = style.outline = "none";
+          style.border = style.outline = 'none'
-          style.width = style.height = "100%";
+          style.width = style.height = '100%'
-          doc.body.appendChild(iframe);
+          doc.body.appendChild(iframe)
+          doc.head.appendChild(img)
         }
       }
     }, 0200);

public/style/options.css

@@ -342,6 +342,17 @@ ul li {
 	text-align: center;
 }
 
+.secondary-desc {
+	color: var(--text-color-primary);
+	margin: 0;
+	margin-top: 0.3em;
+	font-size: 18px;
+	font-family: 'Ubuntu', sans-serif;
+	font-weight: 300;
+	/* font-style: Italic; */
+	text-align: center;
+}
+
 @import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@700&display=swap');
 
 .new-tag {
@@ -441,6 +452,21 @@ ul li {
 	cursor: pointer;
 }
 
+.button-save-alt {
+	background-color: #5e18eb;
+	color: #fff;
+	font-size: inherit;
+	padding: 0.3em;
+	padding-right: -0.5em;
+	border: 0;
+	margin: 0.2vh;
+	border-radius: 3px;
+	text-indent: 0.01px;
+	text-overflow: '';
+	-webkit-appearance: button;
+	cursor: pointer;
+}
+
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
 
 .expiramental {

static/resources/options.js

@@ -0,0 +1,223 @@
+// OPTIONS
+
+const storedSetTheme = localStorage.getItem('theme')
+
+function switchProxy () {
+  var selecter = document.getElementById('proxySwitcher')
+  var selectedOption = selecter.value
+
+  localStorage.setItem('proxy', selectedOption)
+  var storedChoice = localStorage.getItem('proxy')
+  console.log(selectedOption)
+}
+function switchTheme () {
+  var selecter = document.getElementById('themeSwitcher')
+  var selectedOption = selecter.value
+  if (selectedOption == 'dark') {
+    changeCSS('--background-primary', '#191724', true)
+    changeCSS('--navbar-color', '#26233a', true)
+    changeCSS('--navbar-height', '60px', true)
+    changeCSS('--navbar-text-color', '#7967dd', true)
+    changeCSS('--input-text-color', '#e0def4', true)
+    changeCSS('--input-placeholder-color', '#6e6a86', true)
+    changeCSS('--input-background-color', '#1f1d2e', true)
+    changeCSS('--input-placeholder-color', 'white', true)
+    changeCSS('--input-border-color', '#eb6f92', true)
+    changeCSS('--input-border-size', '1.3px', true)
+    changeCSS('--navbar-link-color', '#e0def4', true)
+    changeCSS('--navbar-font', '"Roboto"', true)
+    changeCSS('--navbar-logo-filter', 'invert(0%)', true)
+    changeCSS('--text-color-primary', '#e0def4', true)
+    localStorage.setItem('theme', 'dark')
+  }
+  if (selectedOption == 'light') {
+    changeCSS('--background-primary', '#d8d8d8', true)
+    changeCSS('--navbar-color', '#a2a2a2', true)
+    changeCSS('--navbar-height', '4em', true)
+    changeCSS('--navbar-text-color', '#000000', true)
+    changeCSS('--input-text-color', '#e0def4', true)
+    changeCSS('--input-placeholder-color', 'white', true)
+    changeCSS('--input-background-color', 'black', true)
+    changeCSS('--input-border-color', '#eb6f92', true)
+    changeCSS('--input-border-size', '1.3px', true)
+    changeCSS('--navbar-link-color', '#000000', true)
+    changeCSS('--navbar-font', '"Roboto"', true)
+    changeCSS('--navbar-logo-filter', 'invert(30%)', true)
+    changeCSS('--text-color-primary', '#303030', true)
+    localStorage.setItem('theme', 'light')
+  }
+  if (selectedOption == 'custom') {
+    let startCustom = prompt('Would you like to have an interactive setup? Y/N', '')
+    if (startCustom == 'Y' || startCustom == 'y') {
+      alert("Welcome to the interactive setup. Please enter the following values. If you don't know what to enter, just press enter. They will default to Dark Mode.")
+      let background = prompt('Background color || Possible Types: Keywords, RGB, RBBA, HSL, HSLA, Hexadecimal. || Default Value: #191724', '')
+      let navbar = prompt('Navbar color || Possible Types: Keywords, RGB, RBBA, HSL, HSLA, Hexadecimal. || Default Value: #26233a', '')
+      let navbarHeight = prompt('Navbar height || Possible Types: ABSOLUTE: cm, mm, Q, in, pc, pt, px  RELATIVE: em, ex, ch, rem, lh, rlh, vw, vh, vb, vi || Default Value: 60px', '')
+      let navbarText = prompt('Navbar text color || Possible Types: Keywords, RGB, RBBA, HSL, HSLA, Hexadecimal. || Default Value: #7967dd', '')
+      let inputText = prompt('Input text color || Possible Types: Keywords, RGB, RBBA, HSL, HSLA, Hexadecimal. || Default Value: #e0def4', '')
+      let inputPlaceholder = prompt('Input placeholder color || Possible Types: Keywords, RGB, RBBA, HSL, HSLA, Hexadecimal. || Default Value: #6e6a86', '')
+      let inputBackground = prompt('Input background color || Possible Types: Keywords, RGB, RBBA, HSL, HSLA, Hexadecimal. || Default Value: #1f1d2e', '')
+      let inputBorder = prompt('Input border color || Possible Types: Keywords, RGB, RBBA, HSL, HSLA, Hexadecimal. || Default Value: #eb6f92', '')
+      let inputBorderSize = prompt('Input border size || Possible Types: ABSOLUTE: cm, mm, Q, in, pc, pt, px  RELATIVE: em, ex, ch, rem, lh, rlh, vw, vh, vb, vi || Default Value: 1.3px', '')
+      let navbarFont = prompt('Navbar font || Enter a default font name, custom ones will likely not work. || Default Value: "Roboto"', '')
+      let navbarLink = prompt('Navbar link color || Possible Types: Keywords, RGB, RBBA, HSL, HSLA, Hexadecimal. || Default Value: #e0def4', '')
+      let navbarLogoFilter = prompt('Navbar logo filter || Adjust the NavBar-Logo-Filter. || Default Value: invert(0%)', '')
+      let textColorPrimary = prompt('Text color primary || Possible Types: Keywords, RGB, RBBA, HSL, HSLA, Hexadecimal. || Default Value: #e0def4', '')
+      localStorage.setItem('theme', 'custom')
+      changeCSS('--background-primary', background, true)
+      changeCSS('--navbar-color', navbar, true)
+      changeCSS('--navbar-height', navbarHeight, true)
+      changeCSS('--navbar-text-color', navbarText, true)
+      changeCSS('--input-text-color', inputText, true)
+      changeCSS('--input-placeholder-color', inputPlaceholder, true)
+      changeCSS('--input-background-color', inputBackground, true)
+      changeCSS('--input-border-color', inputBorder, true)
+      changeCSS('--input-border-size', inputBorderSize, true)
+      changeCSS('--navbar-link-color', navbarLink, true)
+      changeCSS('--navbar-font', navbarFont, true)
+      changeCSS('--navbar-logo-filter', navbarLogoFilter, true)
+      changeCSS('--text-color-primary', textColorPrimary, true)
+    } else {
+      alert("Non-Interactive Setup Not supported yet.")
+    }
+  }
+}
+
+// onload event
+window.onload = function () {
+  let background = localStorage.getItem('--background-primary')
+  let navbar = localStorage.getItem('--navbar-color')
+  let navbarHeight = localStorage.getItem('--navbar-height')
+  let navbarText = localStorage.getItem('--navbar-text-color')
+  let inputText = localStorage.getItem('--input-text-color')
+  let inputPlaceholder = localStorage.getItem('--input-placeholder-color')
+  let inputBackground = localStorage.getItem('--input-background-color')
+  let inputBorder = localStorage.getItem('--input-border-color')
+  let inputBorderSize = localStorage.getItem('--input-border-size')
+  let navbarFont = localStorage.getItem('--navbar-font')
+  let navbarLink = localStorage.getItem('--navbar-link-color')
+  let navbarLogoFilter = localStorage.getItem('--navbar-logo-filter')
+  let textColorPrimary = localStorage.getItem('--text-color-primary')
+  changeCSS('--background-primary', background)
+  changeCSS('--navbar-color', navbar)
+  changeCSS('--navbar-height', navbarHeight)
+  changeCSS('--navbar-text-color', navbarText)
+  changeCSS('--input-text-color', inputText)
+  changeCSS('--input-placeholder-color', inputPlaceholder)
+  changeCSS('--input-background-color', inputBackground)
+  changeCSS('--input-border-color', inputBorder)
+  changeCSS('--input-border-size', inputBorderSize)
+  changeCSS('--navbar-link-color', navbarLink)
+  changeCSS('--navbar-font', navbarFont)
+  changeCSS('--navbar-logo-filter', navbarLogoFilter)
+  changeCSS('--text-color-primary', textColorPrimary)
+}
+
+function changeCSS (variable, value, saveBool) {
+  document.documentElement.style.setProperty(variable, value)
+
+  if (saveBool === true) {
+    saveCSS(variable, value)
+  }
+}
+
+function saveCSS (variable, value) {
+  localStorage.setItem(variable, value)
+}
+
+function resetViews () {
+  changeCSS('--background-primary', '#191724', true)
+  changeCSS('--navbar-color', '#26233a', true)
+  changeCSS('--navbar-height', '60px', true)
+  changeCSS('--navbar-text-color', 'rgb(121 103 221)', true)
+  changeCSS('--navbar-link-color', '#e0def4', true)
+  changeCSS('--navbar-font', '"Roboto"', true)
+  changeCSS('--input-text-color', '#e0def4', true)
+  changeCSS('--input-placeholder-color', '#6e6a86', true)
+  changeCSS('--input-background-color', '#1f1d2e', true)
+  changeCSS('--input-placeholder-color', 'white', true)
+  changeCSS('--input-border-color', '#eb6f92', true)
+  changeCSS('--input-border-size', '1.3px', true)
+  return 'All views reset'
+}
+function saveIc () {
+  console.log('Checked')
+  var notification = `
+              <div class="notification-container" id="notification-container">
+              <div class="notification notification-success">
+                  <strong>Success!</strong> Your settings have been saved!
+              </div>
+          </div>
+          `
+  document.getElementById('notifhere').innerHTML = notification
+  setTimeout(() => {
+    var NotificationOBJ = document.getElementById('notifhere')
+  }, 2000)
+}
+
+function unsavedChanges () {
+  var notification = `
+      <div class="notification-container" id="notification-container">
+      <div class="notification notification-danger" id="notification-container">
+      <strong>Danger!</strong> You have unsaved changes!
+  </div>
+  </div>
+          `
+  document.getElementById('notifhere').innerHTML = notification
+  setTimeout(() => {
+    var NotificationOBJ = document.getElementById('notifhere')
+  }, 2000)
+}
+
+var option = localStorage.getItem('nogg')
+
+function toggleNoGG () {
+  if (option === 'on') {
+    option = 'off'
+    localStorage.setItem('nogg', 'off')
+  } else {
+    option = 'on'
+    localStorage.setItem('nogg', 'on')
+  }
+}
+var option2 = localStorage.getItem('ADVcloak')
+function toggleClickoff () {
+  if (option2 === 'on') {
+    option2 = 'off'
+    localStorage.setItem('ADVcloak', 'off')
+  } else {
+    option2 = 'on'
+    localStorage.setItem('ADVcloak', 'on')
+  }
+}
+
+window.onload = function () {
+if (localStorage.getItem('ABfaviconURL') === null) {
+} else if (localStorage.getItem('ABfaviconURL') == "") {
+} else {
+  document.querySelector('#faviconInput').value = localStorage.getItem('ABfaviconURL');
+}
+if (localStorage.getItem('ABtitle') === null) {
+} else if (localStorage.getItem('ABtitle') == "") {
+} else { 
+  document.querySelector('#titleInput').value = localStorage.getItem('ABtitle');
+}
+}
+
+function saveAbInfo() {
+  var faviconURL = document.getElementById('faviconInput').value;
+  var title = document.getElementById('titleInput').value;
+  localStorage.setItem('ABfaviconURL', faviconURL);
+  localStorage.setItem('ABtitle', title);
+  var notification = `
+  <div class="notification-container" id="notification-container">
+  <div class="notification notification-success">
+      <strong>Success!</strong> Your settings have been saved!
+  </div>
+</div>
+      `
+  document.getElementById('notifhere').innerHTML = notification
+  setTimeout(() => {
+    var NotificationOBJ = document.getElementById('notifhere')
+  }, 2000)
+}