diff --git a/widget-customizer/index.html b/.utilities/settings-page-builder/index.html similarity index 96% rename from widget-customizer/index.html rename to .utilities/settings-page-builder/index.html index 4775531..98ffbff 100644 --- a/widget-customizer/index.html +++ b/.utilities/settings-page-builder/index.html @@ -1,40 +1,40 @@ - - - - - - - Settings - - - - - -
-

Widget URL

- - - -
- -
-
-
- - -
-
-

Load Settings From Widget URL

- -
- - - -
-
- -
- - - + + + + + + + Settings + + + + + +
+

Widget URL

+ + + +
+ +
+
+
+ + +
+
+

Load Settings From Widget URL

+ +
+ + + +
+
+ +
+ + + \ No newline at end of file diff --git a/widget-customizer/script.js b/.utilities/settings-page-builder/script.js similarity index 97% rename from widget-customizer/script.js rename to .utilities/settings-page-builder/script.js index cc4fe4f..c0a1ce8 100644 --- a/widget-customizer/script.js +++ b/.utilities/settings-page-builder/script.js @@ -1,237 +1,237 @@ -const queryString = window.location.search; -const urlParams = new URLSearchParams(queryString); - -const settingsJson = urlParams.get("settingsJson") || ""; - -document.addEventListener('DOMContentLoaded', () => { - const settingsContent = document.getElementById('settings-content'); - const saveButton = document.getElementById('save-settings'); - - fetch(settingsJson) - //fetch('../multichat-overlay/settings/settings.json') - .then(response => response.json()) - .then(data => { - 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'); - - const labelDescriptionDiv = document.createElement('div'); - - 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 = setting.defaultValue; - 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 = 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; - }); - 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.value = setting.defaultValue; - inputElement.appendChild(optionElement); - }); - break; - case 'color': - inputElement = document.createElement('input'); - inputElement.type = 'color'; - inputElement.id = setting.id; //Added setting ID - inputElement.value = setting.defaultValue; - break; - case 'number': - inputElement = document.createElement('input'); - inputElement.type = 'number'; - inputElement.id = setting.id; //Added setting ID - inputElement.value = setting.defaultValue; - inputElement.min = setting.min; - inputElement.max = setting.max; - inputElement.step = setting.step; - break; - default: - inputElement = document.createElement('input'); - inputElement.type = 'text'; - inputElement.id = setting.id; //Added setting ID - inputElement.value = setting.defaultValue; - } - - inputElement.addEventListener('input', function (event) { - SendDateToParent(data); - }); - - settingItemContent.appendChild(inputElement); - - settingItem.appendChild(labelDescriptionDiv); - settingItem.appendChild(settingItemContent); - groupDiv.appendChild(settingItem); - }); - - settingsContent.appendChild(groupDiv); - } - - // saveButton.addEventListener('click', () => { - // SendDateToParent(data); - // }); - SendDateToParent(data); - }) - .catch(error => console.error('Error loading settings:', error)); -}); - - -// In the iframe's JavaScript: -function SendDateToParent(data) { - const settings = {}; - data.settings.forEach(setting => { - let inputElement = document.getElementById(setting.id); - - 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.log('Parameter String:', paramString); - - let widgetURLBox = document.getElementById('widget-url'); - widgetURLBox.value = GetWidgetURL() + "?" + paramString; - window.parent.reloadWidget(paramString); -} - - -let saveButton = document.getElementById('save-settings'); -let widgetURLBox = document.getElementById('widget-url'); -let cancelSettingsButton = document.getElementById('cancel-settings'); - -saveButton.addEventListener('click', () => { - navigator.clipboard.writeText(widgetURLBox.value); - - const defaultBackgroundColor = "#2e2e2e"; - const defaultTextColor = "white"; - - saveButton.innerText = "Copied to clipboard"; - saveButton.style.backgroundColor = "#00dd63" - saveButton.style.color = "#ffffff"; - - setTimeout(() => { - saveButton.innerText = "Click to copy URL"; - saveButton.style.backgroundColor = defaultBackgroundColor; - saveButton.style.color = defaultTextColor; - }, 3000); -}); - -widgetURLBox.addEventListener('click', () => { - let loadSettingsBox = document.getElementById('mommy-milkers'); - loadSettingsBox.style.visibility = 'visible'; - loadSettingsBox.style.opacity = 1; -}); - -function CloseSettings() { - let loadSettingsBox = document.getElementById('mommy-milkers'); - loadSettingsBox.style.visibility = 'hidden'; - loadSettingsBox.style.opacity = 0; -}; - -function LoadSettings() { - let loadURLBox = document.getElementById('load-url'); - 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; - } - }); - - loadURLBox.value = ''; - - let loadSettingsBox = document.getElementById('mommy-milkers'); - loadSettingsBox.style.visibility = 'hidden'; - loadSettingsBox.style.opacity = 0; -} - -function GetWidgetURL() { - const parsedUrl = new URL(settingsJson); - - let result = parsedUrl.origin; // Base domain (protocol + hostname + port) - - const pathSegments = parsedUrl.pathname.split('/').filter(segment => segment); // Split and remove empty segments - - if (pathSegments.length > 0) { - result += '/' + pathSegments[0]; // Add the first path segment - } - - return result; -} - -function OpenMembershipPage() { - window.open("https://nutty.gg/supporters/sign_in", '_blank').focus(); +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); + +const settingsJson = urlParams.get("settingsJson") || ""; + +document.addEventListener('DOMContentLoaded', () => { + const settingsContent = document.getElementById('settings-content'); + const saveButton = document.getElementById('save-settings'); + + fetch(settingsJson) + //fetch('../multichat-overlay/settings/settings.json') + .then(response => response.json()) + .then(data => { + 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'); + + const labelDescriptionDiv = document.createElement('div'); + + 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 = setting.defaultValue; + 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 = 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; + }); + 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.value = setting.defaultValue; + inputElement.appendChild(optionElement); + }); + break; + case 'color': + inputElement = document.createElement('input'); + inputElement.type = 'color'; + inputElement.id = setting.id; //Added setting ID + inputElement.value = setting.defaultValue; + break; + case 'number': + inputElement = document.createElement('input'); + inputElement.type = 'number'; + inputElement.id = setting.id; //Added setting ID + inputElement.value = setting.defaultValue; + inputElement.min = setting.min; + inputElement.max = setting.max; + inputElement.step = setting.step; + break; + default: + inputElement = document.createElement('input'); + inputElement.type = 'text'; + inputElement.id = setting.id; //Added setting ID + inputElement.value = setting.defaultValue; + } + + inputElement.addEventListener('input', function (event) { + SendDateToParent(data); + }); + + settingItemContent.appendChild(inputElement); + + settingItem.appendChild(labelDescriptionDiv); + settingItem.appendChild(settingItemContent); + groupDiv.appendChild(settingItem); + }); + + settingsContent.appendChild(groupDiv); + } + + // saveButton.addEventListener('click', () => { + // SendDateToParent(data); + // }); + SendDateToParent(data); + }) + .catch(error => console.error('Error loading settings:', error)); +}); + + +// In the iframe's JavaScript: +function SendDateToParent(data) { + const settings = {}; + data.settings.forEach(setting => { + let inputElement = document.getElementById(setting.id); + + 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.log('Parameter String:', paramString); + + let widgetURLBox = document.getElementById('widget-url'); + widgetURLBox.value = GetWidgetURL() + "?" + paramString; + window.parent.reloadWidget(paramString); +} + + +let saveButton = document.getElementById('save-settings'); +let widgetURLBox = document.getElementById('widget-url'); +let cancelSettingsButton = document.getElementById('cancel-settings'); + +saveButton.addEventListener('click', () => { + navigator.clipboard.writeText(widgetURLBox.value); + + const defaultBackgroundColor = "#2e2e2e"; + const defaultTextColor = "white"; + + saveButton.innerText = "Copied to clipboard"; + saveButton.style.backgroundColor = "#00dd63" + saveButton.style.color = "#ffffff"; + + setTimeout(() => { + saveButton.innerText = "Click to copy URL"; + saveButton.style.backgroundColor = defaultBackgroundColor; + saveButton.style.color = defaultTextColor; + }, 3000); +}); + +widgetURLBox.addEventListener('click', () => { + let loadSettingsBox = document.getElementById('mommy-milkers'); + loadSettingsBox.style.visibility = 'visible'; + loadSettingsBox.style.opacity = 1; +}); + +function CloseSettings() { + let loadSettingsBox = document.getElementById('mommy-milkers'); + loadSettingsBox.style.visibility = 'hidden'; + loadSettingsBox.style.opacity = 0; +}; + +function LoadSettings() { + let loadURLBox = document.getElementById('load-url'); + 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; + } + }); + + loadURLBox.value = ''; + + let loadSettingsBox = document.getElementById('mommy-milkers'); + loadSettingsBox.style.visibility = 'hidden'; + loadSettingsBox.style.opacity = 0; +} + +function GetWidgetURL() { + const parsedUrl = new URL(settingsJson); + + let result = parsedUrl.origin; // Base domain (protocol + hostname + port) + + const pathSegments = parsedUrl.pathname.split('/').filter(segment => segment); // Split and remove empty segments + + if (pathSegments.length > 0) { + result += '/' + pathSegments[0]; // Add the first path segment + } + + return result; +} + +function OpenMembershipPage() { + window.open("https://nutty.gg/supporters/sign_in", '_blank').focus(); } \ No newline at end of file diff --git a/widget-customizer/style.css b/.utilities/settings-page-builder/style.css similarity index 94% rename from widget-customizer/style.css rename to .utilities/settings-page-builder/style.css index ec62a7e..692dc42 100644 --- a/widget-customizer/style.css +++ b/.utilities/settings-page-builder/style.css @@ -1,274 +1,274 @@ -* { - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; - font-size: 16px; - color: white; -} - -body { - background-color: #181818; -} - -body::-webkit-scrollbar { - width: 8px; - /* Width of the entire scrollbar */ -} - -body::-webkit-scrollbar-track { - background: #2c2c2c; - /* Color of the tracking area */ -} - -body::-webkit-scrollbar-thumb { - background-color: #9f9f9f; - /* Color of the scroll thumb */ - border-radius: 4px; - /* Roundness of the scroll thumb */ - border: none; -} - -body::-webkit-scrollbar-thumb:hover { - background-color: #d1d1d1; - /* Color of the scroll thumb on hover */ -} - -#pinned-header { - position: sticky; - top: 0; - margin: 40px auto; - padding: 10px 0; - z-index: 100; - background: #181818af; - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); -} - -#widget-url { - font-size: 1em; - width: 100%; - margin: 10px 0px; - padding: 10px 10px; -} - -#settings-container { - margin: 0px auto; - /* border: 1px solid #ddd; */ - border-radius: 5px; -} - -#settings-container h1 { - text-align: center; - margin-bottom: 20px; -} - -.setting-group { - margin-bottom: 20px; - /* border: 1px solid #ddd; */ - padding: 15px; - border-radius: 5px; -} - -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 { - border-bottom: none; -} - -.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-bottom: 0; -} - -a { - font-weight: 500 !important; -} - -.setting-item-content { - display: flex; - align-items: center; -} - -input[type="text"], -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; -} -#widget-url:hover { - cursor: pointer; -} - -.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: #2196F3; -} - -input:focus+.slider { - box-shadow: 0 0 1px #2196F3; -} - -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; -} - -button:hover { - opacity: 1; - cursor: pointer; -} - -#mommy-milkers { - visibility: hidden; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: #181818af; - backdrop-filter: blur(10px); /* 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; -} - -#load-url { - width: 100%; -} - -#load-settings-container { - position: fixed; - left: 50%; - top: 50%; - width: calc(100% - 75px); - border-radius: 0.5em; - 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%); -} - -#load-settings { - background-color: #2196F3; +* { + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + font-size: 16px; + color: white; +} + +body { + background-color: #181818; +} + +body::-webkit-scrollbar { + width: 8px; + /* Width of the entire scrollbar */ +} + +body::-webkit-scrollbar-track { + background: #2c2c2c; + /* Color of the tracking area */ +} + +body::-webkit-scrollbar-thumb { + background-color: #9f9f9f; + /* Color of the scroll thumb */ + border-radius: 4px; + /* Roundness of the scroll thumb */ + border: none; +} + +body::-webkit-scrollbar-thumb:hover { + background-color: #d1d1d1; + /* Color of the scroll thumb on hover */ +} + +#pinned-header { + position: sticky; + top: 0; + margin: 40px auto; + padding: 10px 0; + z-index: 100; + background: #181818af; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} + +#widget-url { + font-size: 1em; + width: 100%; + margin: 10px 0px; + padding: 10px 10px; +} + +#settings-container { + margin: 0px auto; + /* border: 1px solid #ddd; */ + border-radius: 5px; +} + +#settings-container h1 { + text-align: center; + margin-bottom: 20px; +} + +.setting-group { + margin-bottom: 20px; + /* border: 1px solid #ddd; */ + padding: 15px; + border-radius: 5px; +} + +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 { + border-bottom: none; +} + +.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-bottom: 0; +} + +a { + font-weight: 500 !important; +} + +.setting-item-content { + display: flex; + align-items: center; +} + +input[type="text"], +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; +} +#widget-url:hover { + cursor: pointer; +} + +.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: #2196F3; +} + +input:focus+.slider { + box-shadow: 0 0 1px #2196F3; +} + +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; +} + +button:hover { + opacity: 1; + cursor: pointer; +} + +#mommy-milkers { + visibility: hidden; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #181818af; + backdrop-filter: blur(10px); /* 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; +} + +#load-url { + width: 100%; +} + +#load-settings-container { + position: fixed; + left: 50%; + top: 50%; + width: calc(100% - 75px); + border-radius: 0.5em; + 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%); +} + +#load-settings { + background-color: #2196F3; } \ No newline at end of file diff --git a/horizontal-chat/settings/script.js b/horizontal-chat/settings/script.js index 91c2789..e216b5d 100644 --- a/horizontal-chat/settings/script.js +++ b/horizontal-chat/settings/script.js @@ -1,5 +1,5 @@ let settingsContainer = document.getElementById('settings-container'); -settingsContainer.src = `../../widget-customizer?settingsJson=${window.location.href}/settings.json` +settingsContainer.src = `../../.utilities/settings-page-builder?settingsJson=${window.location.href}/settings.json` console.log(settingsContainer.src); function reloadWidget(data) { diff --git a/multichat-overlay/settings/script.js b/multichat-overlay/settings/script.js index 91c2789..e216b5d 100644 --- a/multichat-overlay/settings/script.js +++ b/multichat-overlay/settings/script.js @@ -1,5 +1,5 @@ let settingsContainer = document.getElementById('settings-container'); -settingsContainer.src = `../../widget-customizer?settingsJson=${window.location.href}/settings.json` +settingsContainer.src = `../../.utilities/settings-page-builder?settingsJson=${window.location.href}/settings.json` console.log(settingsContainer.src); function reloadWidget(data) {