Move a tonne of reused functions to helpers.js

2026-09-19 04:00:59 -04:00 · 2025-09-22 04:31:16 +10:00
parent 798385ec33
commit 58213318d3
36 changed files with 303 additions and 679 deletions
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Settings</title>
+    <link rel="stylesheet" href="style.css">
+    <script type="text/javascript" src="https://unpkg.com/@streamerbot/client/dist/streamerbot-client.js"></script>
+</head>
+
+<body>
+    <!-- Header -->
+    <div id="header">
+        <img src="../../resources/logo.png" style="height: 40px;" />
+        <button id="membershipsButton" onclick="OpenMembershipPage()">Check out my member exclusive widgets!</button>
+        <div id="widgetUrlInputWrapper">
+            <span id="urlLabel">Click to copy URL</span>
+            <input id="widgetUrlInput" type="text" readonly onclick="CopyURLToClipboard()">
+        </div>
+        <button id="loadDefaultsButton" onclick="OpenLoadDefaultsPopup()">Load Default Settings</button>
+        <button id="loadSettingsButton" onclick="OpenLoadSettingsPopup()">Load Settings</button>
+    </div>
+
+    <!-- Main Content Area -->
+    <div id="contentArea">
+
+        <!-- Settings Panel -->
+        <div id="settingsPanel">
+        </div>
+
+        <!-- Widget Preview Panel -->
+        <div id="widget-preview-wrapper">
+            <label id="unmute-label">Click to unmute...</label>
+            <iframe id="widgetPreview">
+            </iframe>
+        </div>
+    </div>
+
+    <!-- Load Settings Popup -->
+    <div id="loadSettingsWrapper">
+        <div id="loadSettingsContainer">
+            <h2>Load Settings</h2>
+            <label style="font-size: 0.8em;">Paste in your existing widget URL</label>
+            <input id="loadUrlBox" type="text" style="width: 100%;">
+            <div style="display: flex; gap: 20px">
+                <button id="cancelSettingsButton" onclick="CloseSettings()">Cancel</button>
+                <button style="background-color: var(--accent-color);" onclick="LoadSettings()">Load Settings</button>
+            </div>
+        </div>
+    </div>
+
+    <div id="loadDefaultsWrapper">
+        <div id="loadDefaultsContainer">
+            <h2>Load Defaults</h2>
+            <label style="font-size: 0.8em;">Are you sure?</label>
+            <div style="display: flex; gap: 20px">
+                <button id="cancelDefaultsButton" onclick="CloseDefaultsPopup()">No</button>
+                <button style="background-color: var(--accent-color);" onclick="LoadDefaultSettings()">Yes</button>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
+
+<script src="../../../.common/utils/helpers.js"></script>
+<script src="script.js"></script>
@@ -0,0 +1,479 @@
+// Search paramaters
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+const settingsJson = urlParams.get("settingsJson") || "";
+const widgetURL = urlParams.get("widgetURL") || "";
+const showUnmuteIndicator = GetBooleanParam("showUnmuteIndicator", false);
+
+// Page elements
+const widgetUrlInputWrapper = document.getElementById('widgetUrlInputWrapper');
+const widgetUrlInput = document.getElementById('widgetUrlInput');
+const urlLabel = document.getElementById('urlLabel');
+const settingsPanel = document.getElementById('settingsPanel');
+const widgetPreview = document.getElementById('widgetPreview');
+const loadURLBox = document.getElementById('loadUrlBox');
+const loadDefaultsBox = document.getElementById('loadDefaultsWrapper');
+const loadSettingsBox = document.getElementById('loadSettingsWrapper');
+const unmuteLabel = document.getElementById('unmute-label');
+
+// Global variables
+let settingsData = '';
+let settingsMap = new Map();
+
+// Construct local storage key prefix so that each widget has their own unique settings
+const parts = widgetURL.replace(/\/+$/, '').split('/');
+const keyPrefix = parts[parts.length - 1];
+
+// Set visibility of the unmute indicator
+if (showUnmuteIndicator)
+	unmuteLabel.style.display = 'inline';
+
+// Set hint text for "Load URL" text input
+loadUrlBox.placeholder = `${widgetURL}?...`
+
+
+
+/////////////////////////////
+// LOAD FROM SETTINGS.JSON //
+/////////////////////////////
+
+function LoadJSON(settingsJson) {
+	fetch(settingsJson)
+		.then(response => response.json())
+		.then(data => {
+			settingsData = data;
+
+			// Clear the settings panel
+			settingsPanel.innerHTML = '';
+
+			const groupedSettings = {};
+
+			// Group settings by their 'group' property
+			data.settings.forEach(setting => {
+				if (!groupedSettings[setting.group]) {
+					groupedSettings[setting.group] = [];
+				}
+				groupedSettings[setting.group].push(setting);
+			});
+
+			// Render settings for each group
+			for (const groupName in groupedSettings) {
+				const groupDiv = document.createElement('div');
+				groupDiv.classList.add('setting-group');
+
+				const groupHeader = document.createElement('h2');
+				groupHeader.textContent = groupName;
+				groupDiv.appendChild(groupHeader);
+
+				groupedSettings[groupName].forEach(setting => {
+					const settingItem = document.createElement('div');
+					settingItem.classList.add('setting-item');
+					settingItem.id = `item-${setting.id}`;
+
+					const labelDescriptionDiv = document.createElement('div');
+
+					if (setting.label) {
+						const label = document.createElement('label');
+						label.textContent = setting.label;
+						labelDescriptionDiv.appendChild(label);
+					}
+
+					if (setting.description) {
+						const description = document.createElement('p');
+						description.innerHTML = setting.description;
+						labelDescriptionDiv.appendChild(description);
+					}
+
+					const settingItemContent = document.createElement('div');
+					settingItemContent.classList.add('setting-item-content');
+
+					let inputElement;
+					switch (setting.type) {
+						case 'text':
+							inputElement = document.createElement('input');
+							inputElement.type = 'text';
+							inputElement.id = setting.id; //Added setting ID
+							inputElement.value = settingsMap.has(setting.id) ? settingsMap.get(setting.id) : setting.defaultValue;
+							inputElement.autocomplete = 'new-password';
+							break;
+						case 'password':
+							inputElement = document.createElement('input');
+							inputElement.type = 'password';
+							inputElement.id = setting.id; //Added setting ID
+							inputElement.value = settingsMap.has(setting.id) ? settingsMap.get(setting.id) : setting.defaultValue;
+							inputElement.autocomplete = 'new-password';
+							break;
+						case 'checkbox':
+							const labelDiv = document.createElement('label');
+							labelDiv.classList.add('switch');
+							checkBoxElement = document.createElement('input');
+							checkBoxElement.type = 'checkbox';
+							checkBoxElement.id = setting.id;
+							checkBoxElement.checked = settingsMap.has(setting.id) ? settingsMap.get(setting.id) : setting.defaultValue;
+							labelDiv.appendChild(checkBoxElement);
+
+							const slider = document.createElement('span');
+							slider.classList.add('slider');
+							slider.classList.add('round');
+							labelDiv.appendChild(slider);
+
+							// Add event listener to the switchDiv
+							labelDiv.addEventListener('click', () => {
+								checkBoxElement.checked = !checkBoxElement.checked;
+								UpdateSettingItemVisibility();
+							});
+							inputElement = labelDiv;
+							break;
+						case 'select':
+							inputElement = document.createElement('select');
+							inputElement.id = setting.id; //Added setting ID
+							setting.options.forEach(option => {
+								const optionElement = document.createElement('option');
+								optionElement.value = option.value;
+								optionElement.textContent = option.label;
+								if (option === setting.defaultValue) {
+									optionElement.selected = true;
+								}
+								inputElement.appendChild(optionElement);
+							});
+							inputElement.value = settingsMap.has(setting.id) ? settingsMap.get(setting.id) : setting.defaultValue;
+							break;
+						case 'color':
+							inputElement = document.createElement('input');
+							inputElement.type = 'color';
+							inputElement.id = setting.id; //Added setting ID
+							inputElement.value = settingsMap.has(setting.id) ? settingsMap.get(setting.id) : setting.defaultValue;
+							break;
+						case 'number':
+							inputElement = document.createElement('input');
+							inputElement.type = 'number';
+							inputElement.id = setting.id; //Added setting ID
+							inputElement.value = settingsMap.has(setting.id) ? settingsMap.get(setting.id) : setting.defaultValue;
+							inputElement.min = setting.min;
+							inputElement.max = setting.max;
+							inputElement.step = setting.step;
+							break;
+						case 'sb-actions':
+							inputElement = document.createElement('input');
+							inputElement.type = 'text';
+							inputElement.placeholder = 'Type to search...';
+							inputElement.id = setting.id; //Added setting ID
+							inputElement.value = settingsMap.has(setting.id) ? settingsMap.get(setting.id) : setting.defaultValue;
+							inputElement.setAttribute('list', 'streamer-bot-actions');
+							inputElement.autocomplete = 'off';
+							break;
+						case 'button':
+							inputElement = document.createElement('button');
+							inputElement.id = setting.id; //Added setting ID
+							inputElement.textContent = setting.label;
+
+							inputElement.addEventListener('click', () => {
+								widgetPreview.contentWindow[setting.callFunction]();
+
+								const defaultBackgroundColor = "#2e2e2e";
+								const defaultTextColor = "white";
+
+								inputElement.style.transitionDuration = '0s'
+								inputElement.style.backgroundColor = "#2196f3"
+								inputElement.style.color = "#ffffff";
+
+								setTimeout(() => {
+									inputElement.style.transitionDuration = '0.2s'
+									inputElement.style.backgroundColor = defaultBackgroundColor;
+									inputElement.style.color = defaultTextColor;
+								}, 100);
+							});
+							break;
+						default:
+							inputElement = document.createElement('input');
+							inputElement.type = 'text';
+							inputElement.id = setting.id; //Added setting ID
+							inputElement.value = settingsMap.has(setting.id) ? settingsMap.get(setting.id) : setting.defaultValue;
+					}
+
+					// Save settings to settings map
+					if (!settingsMap.has(setting.id))
+						settingsMap.set(setting.id, setting.defaultValue);
+
+					// Refresh the preview when any setting changes
+					inputElement.addEventListener('input', function (event) {
+						const settingElement = document.getElementById(setting.id);
+						if (setting.type == 'checkbox')
+							settingsMap.set(setting.id, settingElement.checked);
+						else
+							settingsMap.set(setting.id, settingElement.value);
+
+						SaveSettingsToStorage();
+						RefreshWidgetPreview();
+					});
+
+					settingItemContent.appendChild(inputElement);
+
+					if (setting.type == 'button') {
+						settingItem.style.display = 'block'
+						settingItem.appendChild(settingItemContent);
+					}
+					else {
+						settingItem.appendChild(labelDescriptionDiv);
+						settingItem.appendChild(settingItemContent);
+					}
+
+					groupDiv.appendChild(settingItem);
+				});
+
+				settingsPanel.appendChild(groupDiv);
+			}
+
+			function UpdateSettingItemVisibility() {
+				data.settings.forEach(setting => {
+					if (setting.showIf) {
+						const parentElement = document.getElementById(setting.showIf);
+						let shouldShow = true;
+
+						// Walk up the chain of showIf dependencies
+						let currentSetting = setting;
+						while (currentSetting.showIf) {
+							const parentInput = document.getElementById(currentSetting.showIf);
+							if (!parentInput || !parentInput.checked) {
+								shouldShow = false;
+								break;
+							}
+
+							// Find the parent setting object (to keep walking up)
+							currentSetting = data.settings.find(s => s.id === currentSetting.showIf) || {};
+						}
+
+						document.getElementById(`item-${setting.id}`).style.display = shouldShow ? 'flex' : 'none';
+					}
+				});
+			}
+
+			UpdateSettingItemVisibility();
+			RefreshWidgetPreview();
+			SaveSettingsToStorage();
+		})
+		.catch(error => console.error('Error loading settings:', error));
+}
+
+function SaveSettingsToStorage() {
+	console.debug(settingsMap);
+	const settingsArray = Array.from(settingsMap.entries());
+	const settingsArrayString = JSON.stringify(settingsArray);
+	localStorage.setItem(`${keyPrefix}-settings`, settingsArrayString);
+}
+
+function LoadSettingsFromStorage() {
+	// Retrieve session rankings from local storage
+	const settingsMapString = localStorage.getItem(`${keyPrefix}-settings`);
+	if (settingsMapString) {
+		const settingsMapArray = JSON.parse(settingsMapString);
+		settingsMap = new Map(settingsMapArray);
+	}
+}
+
+function LoadDefaultSettings() {
+	localStorage.removeItem(`${keyPrefix}-settings`);
+	settingsMap = new Map();
+	LoadJSON(settingsJson);
+
+	loadDefaultsBox.style.visibility = 'hidden';
+	loadDefaultsBox.style.opacity = 0;
+}
+
+function RefreshWidgetPreview() {
+	const settings = {};
+	settingsData.settings.forEach(setting => {
+		if (setting.type === 'button') return; // Skip buttons
+
+		let inputElement = document.getElementById(setting.id);
+		if (!inputElement) return;
+
+		if (setting.type === 'checkbox') {
+			settings[setting.id] = inputElement.checked;
+		} else {
+			settings[setting.id] = inputElement.value;
+		}
+	});
+
+	// Generate parameter string
+	const paramString = Object.entries(settings)
+		.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
+		.join('&');
+
+	console.debug('Parameter String:', paramString);
+
+	widgetUrlInput.value = widgetURL + "?" + paramString;
+	widgetPreview.src = widgetUrlInput.value;
+
+	UpdateStreamerBotConnection();
+}
+
+function UpdateStreamerBotConnection() {
+	let addressElement = document.getElementById('address');
+	let portElement = document.getElementById('port');
+
+	if (addressElement && portElement)
+		client.options.host = addressElement.value;
+
+	if (portElement)
+		client.options.port = portElement.value;
+
+	client.connect();
+}
+
+
+
+//////////////////
+// STREAMER.BOT //
+//////////////////
+
+// Connect to Streamer.bot and get list of actions
+let sbServerAddress = '127.0.0.1';
+let sbServerPort = '8080';
+let client = new StreamerbotClient({
+	host: sbServerAddress,
+	port: sbServerPort,
+
+	onConnect: (data) => {
+		console.log(`Streamer.bot successfully connected to ${sbServerAddress}:${sbServerPort}`)
+		console.debug(data);
+
+		// Get list of actions
+		GetSBActions();
+	},
+
+	onDisconnect: () => {
+		console.error(`Streamer.bot disconnected from ${sbServerAddress}:${sbServerPort}`)
+	}
+});
+
+async function GetSBActions() {
+	const response = await client.getActions();
+
+	console.debug(response);
+
+	const datalistElement = document.createElement('datalist');
+	datalistElement.id = 'streamer-bot-actions';
+
+	for (const action of response.actions) {
+		const option = document.createElement('option');
+		option.value = action.name;
+		datalistElement.appendChild(option);
+	}
+
+	document.body.appendChild(datalistElement);
+}
+
+
+
+/////////////////////////
+// BUTTON CLICK EVENTS //
+/////////////////////////
+
+function CopyURLToClipboard() {
+	// Copy to clipboard
+	navigator.clipboard.writeText(widgetUrlInput.value);
+
+	// Create the "Copied!" message
+	const copiedMessage = document.createElement('span');
+	copiedMessage.textContent = 'Copied to clipboard!';
+	copiedMessage.style.textAlign = 'center';
+	copiedMessage.style.fontWeight = 'absolute';
+	copiedMessage.style.position = 'absolute';
+	copiedMessage.style.top = '50%';
+	copiedMessage.style.left = '50%';
+	copiedMessage.style.transform = 'translate(-50%, -50%)';
+	copiedMessage.style.backgroundColor = '#00dd63'; // Green with some transparency
+	copiedMessage.style.color = 'white';
+	copiedMessage.style.padding = '5px 10px';
+	copiedMessage.style.borderRadius = '5px';
+	copiedMessage.style.fontWeight = '500';
+	copiedMessage.style.zIndex = '2'; // Ensure it's above the input and label
+	copiedMessage.style.opacity = '0'; // Start with opacity 0 for fade-in
+	copiedMessage.style.transition = 'opacity 0.2s ease-in-out';
+
+	widgetUrlInputWrapper.appendChild(copiedMessage);
+
+	// Force a reflow to trigger the transition
+	void copiedMessage.offsetWidth;
+
+	// Fade in the message
+	copiedMessage.style.opacity = '1';
+
+	// Fade out and remove the message after 3 seconds
+	setTimeout(() => {
+		copiedMessage.style.opacity = '0';
+		setTimeout(() => {
+			widgetUrlInputWrapper.removeChild(copiedMessage);
+		}, 500); // Wait for the fade-out
+	}, 5000);
+}
+
+function CloseDefaultsPopup() {
+	loadDefaultsBox.style.visibility = 'hidden';
+	loadDefaultsBox.style.opacity = 0;
+};
+
+function CloseSettings() {
+	loadSettingsBox.style.visibility = 'hidden';
+	loadSettingsBox.style.opacity = 0;
+};
+
+function LoadSettings() {
+	const url = new URL(loadURLBox.value);
+
+	url.searchParams.forEach((value, key) => {
+
+		const inputElement = document.getElementById(key);
+		if (inputElement != null) {
+			if (inputElement.type == 'checkbox')
+				inputElement.checked = value.toLocaleLowerCase() == 'true';
+			else
+				inputElement.value = value;
+			inputElement.dispatchEvent(new Event('input')); // Triggers the page refresh
+		}
+	});
+
+	loadURLBox.value = '';
+
+	loadSettingsBox.style.visibility = 'hidden';
+	loadSettingsBox.style.opacity = 0;
+}
+
+function OpenMembershipPage() {
+	window.open("https://nutty.gg/collections/member-exclusive-widgets", '_blank').focus();
+}
+
+function OpenLoadDefaultsPopup() {
+	loadDefaultsBox.style.visibility = 'visible';
+	loadDefaultsBox.style.opacity = 1;
+}
+
+function OpenLoadSettingsPopup() {
+	loadSettingsBox.style.visibility = 'visible';
+	loadSettingsBox.style.opacity = 1;
+}
+
+
+
+//////////////////////
+// HELPER FUNCTIONS //
+//////////////////////
+
+// Handle first window interaction
+window.addEventListener('message', (event) => {
+	if (event.origin === new URL(widgetPreview.src).origin && event.data === 'iframe-interacted') {
+		iframeHasBeenInteractedWith = true;
+		console.log('Iframe has been interacted with!');
+		unmuteLabel.style.display = 'none';
+	}
+});
+
+
+
+
+// Load settings from local storage
+LoadSettingsFromStorage();
+
+// Load default settings
+LoadJSON(settingsJson);
@@ -0,0 +1,370 @@
+* {
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    color: white;
+    --accent-color: #2196f3;
+}
+
+html,
+body {
+    background-color: #181818;
+    margin: 0px 0px;
+    display: flex;
+    flex-flow: column;
+    height: 100%;
+    overflow: hidden;
+    /* Prevent overall page scroll */
+}
+
+#header {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    align-items: center;
+    padding: 0px 20px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
+    /* Add the shadow */
+    z-index: 1;
+    /* Ensure the shadow isn't hidden by content */
+}
+
+#contentArea {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    overflow: hidden;
+    /* Prevent overall page scroll */
+}
+
+#header>button {
+    width: auto;
+    /* Allow buttons to size based on content */
+    flex-shrink: 0;
+    /* Prevent buttons from shrinking */
+}
+
+#membershipsButton {
+    background: var(--accent-color);
+}
+
+#settingsPanel {
+    width: 600px;
+    overflow-y: auto;
+    height: 100%;
+    padding: 0px 20px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
+}
+
+#settingsPanel::-webkit-scrollbar {
+    width: 8px;
+    /* Width of the entire scrollbar */
+}
+
+#settingsPanel::-webkit-scrollbar-track {
+    background: #2c2c2c;
+    /* Color of the tracking area */
+}
+
+#settingsPanel::-webkit-scrollbar-thumb {
+    background-color: #9f9f9f;
+    /* Color of the scroll thumb */
+    border-radius: 4px;
+    /* Roundness of the scroll thumb */
+    border: none;
+}
+
+#settingsPanel::-webkit-scrollbar-thumb:hover {
+    background-color: #d1d1d1;
+    /* Color of the scroll thumb on hover */
+}
+
+#widget-preview-wrapper {
+    flex-grow: 1;
+    overflow: hidden;
+    position: relative;
+}
+
+#widgetPreview {
+    border: transparent;
+    width: 100%;
+    height: 100%;
+}
+
+#unmute-label {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    font-size: 3em;
+    font-weight: 500;
+    color: rgba(255, 255, 255);
+    background-color: rgba(255, 255, 255, 0.3);
+    padding: 0.25em 0.5em;
+    border-radius: 0.25em;
+    display: none;
+}
+
+#widgetUrlInputWrapper {
+    position: relative;
+    /* Make the wrapper a positioning context */
+    display: inline-block;
+    /* Or block, depending on your layout */
+    width: 100%;
+    /* Match the input width */
+    flex-grow: 1;
+}
+
+#widgetUrlInputWrapper:hover #urlLabel {
+    opacity: 0;
+    /* Fade out the label on hover of the wrapper */
+}
+
+#widgetUrlInput {
+    font-size: 1em;
+    width: 100%;
+    padding: 10px 10px;
+    filter: blur(4px) brightness(0.4);
+    /* Apply a blur effect */
+    transition: filter 0.1s ease-in-out;
+    cursor: pointer;
+}
+
+#urlLabel {
+    border-radius: 0.5em;
+    padding: 5px 20px;
+    z-index: 1;
+    font-weight: 500;
+}
+
+#urlLabel,
+#copiedToClipboard {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    pointer-events: none;
+    opacity: 1;
+    transition: opacity 0.2s ease-in-out;
+}
+
+#widgetUrlInput:hover {
+    filter: none;
+    /* Remove blur when the input is focused */
+    outline: none;
+    /* Remove default focus outline */
+}
+
+.setting-group {
+    margin-bottom: 20px;
+    /* border: 1px solid #ddd; */
+    padding-bottom: 15px;
+    border-radius: 5px;
+}
+
+.setting-group:last-child {
+    padding-bottom: 0px;
+}
+
+h2 {
+    font-size: 0.9em;
+    font-weight: 500;
+    color: #93cdfd;
+}
+
+.setting-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 0;
+    /* border-bottom: 1px solid #eee; */
+}
+
+.setting-item:last-child {
+    padding-bottom: 0px;
+}
+
+.setting-item label {
+    font-weight: 500;
+    margin-bottom: 5px;
+    display: block;
+}
+
+.setting-item p,
+.setting-item a {
+    font-size: 0.9em;
+    font-weight: 300;
+    /* color: #666; */
+    opacity: 0.6;
+    margin: 0;
+}
+
+a {
+    font-weight: 500 !important;
+}
+
+.setting-item-content {
+    display: flex;
+    align-items: center;
+}
+
+input[type="text"],
+input[type="password"],
+select,
+input[type="number"] {
+    width: 250px;
+    padding: 5px;
+
+    margin: 10px 0px;
+    padding: 10px 10px;
+    background-color: #ffffff05;
+    border-width: 0px;
+    color: white;
+    border-radius: 0.5em;
+
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.setting-item-content option {
+    color: black;
+}
+
+textarea:focus,
+input:focus {
+    outline: none;
+}
+
+.setting-item-content input[type="color"] {
+    width: 40px;
+    height: 40px;
+    margin-left: 10px;
+    /* padding: 2px; */
+    /* border: 1px solid #ccc; */
+    /* border-radius: 4px; */
+
+    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    background: none;
+    border: 0;
+    cursor: pointer;
+    padding: 0;
+}
+
+/* Switch styling */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:checked+.slider {
+    background-color: var(--accent-color);
+}
+
+input:focus+.slider {
+    box-shadow: 0 0 1px var(--accent-color);
+}
+
+input:checked+.slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+
+button {
+    font-weight: 500;
+    background-color: #2e2e2e;
+    color: white;
+    opacity: 0.8;
+    margin: 5px 0px;
+    border-width: 0;
+    border-radius: 0.5em;
+    padding: 10px 20px;
+    width: 100%;
+    transition: all 0.2s ease-in-out;
+}
+
+button:hover {
+    opacity: 1;
+    cursor: pointer;
+}
+
+#loadSettingsWrapper,
+#loadDefaultsWrapper {
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #181818af;
+    backdrop-filter: blur(20px) grayscale(50%) brightness(200%);
+    /* Adjust blur radius as needed */
+    z-index: 9999;
+    /* Ensure it's on top */
+    /* Add any other styles for the overlay content */
+    transition: all 0.2s ease-in-out;
+    opacity: 0;
+}
+
+#loadSettingsContainer,
+#loadDefaultsContainer {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    max-width: 1000px;
+    width: calc(100% - 75px);
+    border-radius: 1em;
+    border: 1px rgba(255, 255, 255, 0.24) solid;
+    padding: 1em;
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
+    background: #181818af;
+    /* background: rgba(255, 0, 0, 0.637); */
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    transform: translate(-50%, -50%);
+}