diff --git a/static/assets/css/settings.css b/static/assets/css/settings.css
index 439df4f8..02f9fa5b 100644
--- a/static/assets/css/settings.css
+++ b/static/assets/css/settings.css
@@ -1,6 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
-
.row {
margin-right: auto;
grid-gap: 2rem;
@@ -40,7 +39,7 @@
}
.title {
- font-family: "Inter", Arial, sans-serif;
+ font-family: Arial, sans-serif;
margin-top: 20px;
text-align: center;
font-weight: bold;
@@ -48,9 +47,9 @@
}
p {
- font-family: "Inter", Arial, sans-serif;
+ font-family: Arial, sans-serif;
margin-top: 6px;
- font-weight: 5px;
+ font-weight: normal;
}
.tab-cloak {
@@ -58,7 +57,7 @@ p {
background-color: #fc8585;
border: none;
color: rgb(248, 244, 244);
- padding: 15px 20px;
+ padding: 10px 20px;
margin: 3px 6px 3px 6px;
text-align: center;
text-decoration: none;
@@ -71,11 +70,7 @@ p {
}
.tab-cloak:hover {
- scale: 1.1;
-}
-
-img {
- border-radius: 5px 5px 0 0;
+ transform: scale(1.1);
}
button {
@@ -104,8 +99,9 @@ button {
border-radius: 12px;
}
-select, input {
- font-family: "Inter", Arial, sans-serif;
+select,
+input {
+ font-family: Arial, sans-serif;
border: none;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
@@ -116,7 +112,8 @@ select, input {
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.15);
}
-select:hover, input:hover {
+select:hover,
+input:hover {
opacity: 0.8;
}
@@ -148,7 +145,7 @@ select {
padding: 0.5rem;
border-radius: 0.375rem;
color: rgb(255, 255, 255);
- padding: 10px;
+ padding: 5px;
text-align: center;
}
diff --git a/static/assets/js/settings.js b/static/assets/js/settings.js
index 471a1fde..69e423da 100644
--- a/static/assets/js/settings.js
+++ b/static/assets/js/settings.js
@@ -1,31 +1,32 @@
-var cloakElement = document.getElementById("premadecloaks");
+var cloakElement;
+
+document.addEventListener("DOMContentLoaded", function () {
+ cloakElement = document.getElementById("premadecloaks");
+ var cloak = cloakElement.value;
+});
-// thanks 3kh0
var tab = localStorage.getItem("tab");
if (tab) {
- // If there is saved data, try to parse it
try {
var tabData = JSON.parse(tab);
} catch {
- // If there is an error in parsing, create an empty object
var tabData = {};
}
} else {
- // If there is no saved data, create an empty object
var tabData = {};
}
-// Set the title and icon fields to the values saved in tabData, if they exist
-if (tabData.title) document.getElementById("title").value = tabData.title;
-if (tabData.icon) document.getElementById("icon").value = tabData.icon;
+var titleElement = document.getElementById("title");
+var iconElement = document.getElementById("icon");
+
+if (tabData.title && titleElement) titleElement.value = tabData.title;
+if (tabData.icon && iconElement) iconElement.value = tabData.icon;
-// Default tab settings
var settingsDefaultTab = {
title: "Dashboard",
icon: "/img/canvas.ico",
};
-// Function to set the document title
function setTitle(title = "") {
if (title) {
document.title = title;
@@ -33,35 +34,27 @@ function setTitle(title = "") {
document.title = settingsDefaultTab.title;
}
- // Update the saved tab data with the new title
var tab = localStorage.getItem("tab");
if (tab) {
- // If there is saved data, try to parse it
try {
var tabData = JSON.parse(tab);
} catch {
- // If there is an error in parsing, create an empty object
var tabData = {};
}
} else {
- // If there is no saved data, create an empty object
var tabData = {};
}
if (title) {
- // If there is a new title, update tabData
tabData.title = title;
} else {
- // If the title is empty, delete the title field from tabData
delete tabData.title;
}
- // Save the updated tab data to localStorage
localStorage.setItem("tab", JSON.stringify(tabData));
}
-// Function to set the favicon
function setFavicon(icon) {
if (icon) {
document.querySelector("link[rel='icon']").href = icon;
@@ -69,86 +62,76 @@ function setFavicon(icon) {
document.querySelector("link[rel='icon']").href = settingsDefaultTab.icon;
}
- // Update the saved tab data with the new icon
var tab = localStorage.getItem("tab");
if (tab) {
- // If there is saved data, try to parse it
try {
var tabData = JSON.parse(tab);
} catch {
- // If there is an error in parsing, create an empty object
var tabData = {};
}
} else {
- // If there is no saved data, create an empty object
var tabData = {};
}
if (icon) {
- // If there is a new icon, update tabData
tabData.icon = icon;
} else {
- // If the icon is empty, delete the icon field from tabData
delete tabData.icon;
}
- // Save the updated tab data to localStorage
localStorage.setItem("tab", JSON.stringify(tabData));
}
function setCloak() {
- // applies only to premade cloaks
- var cloak = cloakElement.value; // cloak seems kind of weird when you spell it out
+ var cloak = cloakElement.value;
switch (cloak) {
- case "search": // Google Search
+ case "search":
setTitle("Google");
setFavicon("/assets/cloaks/Google Search.ico");
break;
- case "wikipedia": // wikipedia
+ case "wikipedia":
setTitle("Wikipedia, the free encyclopedia");
setFavicon("/assets/cloaks/Wikipedia.ico");
break;
- case "bsite": // billibilli
+ case "bsite":
setTitle("Billibilli");
setFavicon("/assets/cloaks/Billibilli.ico");
break;
- case "drive": // Google Drive
+ case "drive":
setTitle("My Drive - Google Drive");
setFavicon("/assets/cloaks/Google Drive.ico");
break;
- case "gmail": // Gmail
+ case "gmail":
setTitle("Gmail");
setFavicon("/assets/cloaks/Gmail.ico");
break;
- case "calendar": // Google Calendar
+ case "calendar":
setTitle("Google Calendar");
setFavicon("/assets/cloaks/Calendar.ico");
break;
- case "meets": // Google Meet
+ case "meets":
setTitle("Google Meet");
setFavicon("/assets/cloaks/Meet.ico");
break;
- case "classroom": // Google Classroom
+ case "classroom":
setTitle("Classes");
setFavicon("/assets/cloaks/Classroom.png");
break;
- case "canvas": // Canvas
+ case "canvas":
setTitle("Dashboard");
setFavicon("/assets/cloaks/Canvas.ico");
break;
- case "zoom": // Zoom
+ case "zoom":
setTitle("Zoom");
setFavicon("/assets/cloaks/Zoom.ico");
break;
- case "khan": // Khan Academy
+ case "khan":
setTitle("Dashboard | Khan Academy");
setFavicon("/assets/cloaks/Khan Academy.ico");
break;
}
}
-
-// Function to reset the tab settings to default
function resetTab() {
document.title = "Dashboard";
document.querySelector("link[rel='icon']").href = "/img/canvas.ico";
diff --git a/static/settings.html b/static/settings.html
index f571f85b..60ea8456 100644
--- a/static/settings.html
+++ b/static/settings.html
@@ -95,8 +95,6 @@
Settings
-
-