Smartcraft-Media-Tech/nutty-tools
1
0
Fork 0
mirror of https://github.com/nuttylmao/nutty.gg.git synced 2026-09-19 04:00:59 -04:00
Code Issues Packages Projects Releases Wiki Activity

Updated to new Settings page

Browse Source
This commit is contained in:
nuttylmao
2025-04-23 04:45:52 +10:00
parent 076ade1f54
commit c4d1b67312
10 changed files with 666 additions and 737 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.utilities/settings-page-builder/index.html
+27 -25
View File
@@ -4,47 +4,49 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../../.resources/logo.png" type="image/png">
<title>Settings</title> <title>Settings</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://unpkg.com/@streamerbot/client/dist/streamerbot-client.js"></script> <script type="text/javascript" src="https://unpkg.com/@streamerbot/client/dist/streamerbot-client.js"></script>
</head> </head>
<body> <body>
<!-- Header -->
<div id="pinned-header"> <div id="header">
<div style="display: flex; align-items: center; padding-bottom: 20px;">
<img src="../../.resources/logo.png" style="height: 40px;" /> <img src="../../.resources/logo.png" style="height: 40px;" />
<button style="display: flex; width: auto; margin-left: auto; background: var(--accent-color);" onclick="OpenMembershipPage()">Check out my premium widgets</button> <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> </div>
<h2>Widget URL</h2> <button id="loadSettingsButton" onclick="OpenLoadSettingsPopup()">Load Settings</button>
<input id="widget-url" type="text" readonly onfocus="this.select();">
<div style="display: flex; gap: 10px;">
<button id="save-settings">Click to copy URL</button>
<button onclick="OpenLoadSettingsPopup()">Load Settings</button>
</div>
<!-- <button onclick="OpenMembershipPage()">💎 Member Exclusive Widgets</button> -->
</div> </div>
<div id="settings-container"> <!-- Main Content Area -->
<div id="settings-content"></div> <div id="contentArea">
</div>
<script src="script.js"></script>
<div id="mommy-milkers"> <!-- Settings Panel -->
<div id="load-settings-container"> <div id="settingsPanel">
</div>
<!-- Widget Preview Panel -->
<iframe id="widgetPreview">
</iframe>
</div>
<!-- Load Settings Popup -->
<div id="loadSettingsWrapper">
<div id="loadSettingsContainer">
<h2>Load Settings</h2> <h2>Load Settings</h2>
<label style="font-size: 0.8em;">Paste in your existing widget URL</label> <label style="font-size: 0.8em;">Paste in your existing widget URL</label>
<input id="load-url" type="text"> <input id="loadUrlBox" type="text" style="width: 100%;">
<div style="display: flex;"> <div style="display: flex; gap: 20px">
<button id="cancel-settings" onclick="CloseSettings()">Cancel</button> <button id="cancelSettingsButton" onclick="CloseSettings()">Cancel</button>
<span style="width: 20px;"></span> <button style="background-color: var(--accent-color);" onclick="LoadSettings()">Load Settings</button>
<button id="load-settings" onclick="LoadSettings()">Load Settings</button>
</div> </div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>
<script src="script.js"></script>
.utilities/settings-page-builder/script.js
+106 -95
View File
@@ -2,49 +2,23 @@
const queryString = window.location.search; const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString); const urlParams = new URLSearchParams(queryString);
const settingsJson = urlParams.get("settingsJson") || ""; const settingsJson = urlParams.get("settingsJson") || "";
const widgetURL = urlParams.get("widgetURL") || "";
// Connect to Streamer.bot and get list of actions // Page elements
const sbServerAddress = '127.0.0.1'; const widgetUrlInputWrapper = document.getElementById('widgetUrlInputWrapper');
const sbServerPort = '8080'; const widgetUrlInput = document.getElementById('widgetUrlInput');
const client = new StreamerbotClient({ const urlLabel = document.getElementById('urlLabel');
host: sbServerAddress, const settingsPanel = document.getElementById('settingsPanel');
port: sbServerPort, const widgetPreview = document.getElementById('widgetPreview');
const loadURLBox = document.getElementById('loadUrlBox');
const cancelSettingsButton = document.getElementById('cancelSettingsButton');
const loadSettingsBox = document.getElementById('loadSettingsWrapper');
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}`) // LOAD FROM SETTINGS.JSON //
} /////////////////////////////
});
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);
}
document.addEventListener('DOMContentLoaded', () => {
const settingsContent = document.getElementById('settings-content');
const saveButton = document.getElementById('save-settings');
fetch(settingsJson) fetch(settingsJson)
.then(response => response.json()) .then(response => response.json())
@@ -163,7 +137,7 @@ document.addEventListener('DOMContentLoaded', () => {
inputElement.textContent = setting.label; inputElement.textContent = setting.label;
inputElement.addEventListener('click', () => { inputElement.addEventListener('click', () => {
window.parent.callFunction(setting.callFunction); widgetPreview.contentWindow.callFunction(setting.callFunction);
const defaultBackgroundColor = "#2e2e2e"; const defaultBackgroundColor = "#2e2e2e";
const defaultTextColor = "white"; const defaultTextColor = "white";
@@ -187,18 +161,16 @@ document.addEventListener('DOMContentLoaded', () => {
} }
inputElement.addEventListener('input', function (event) { inputElement.addEventListener('input', function (event) {
SendDataToParent(data); RefreshWidgetPreview(data);
}); });
settingItemContent.appendChild(inputElement); settingItemContent.appendChild(inputElement);
if (setting.type == 'button') if (setting.type == 'button') {
{
settingItem.style.display = 'block' settingItem.style.display = 'block'
settingItem.appendChild(settingItemContent); settingItem.appendChild(settingItemContent);
} }
else else {
{
settingItem.appendChild(labelDescriptionDiv); settingItem.appendChild(labelDescriptionDiv);
settingItem.appendChild(settingItemContent); settingItem.appendChild(settingItemContent);
} }
@@ -206,13 +178,12 @@ document.addEventListener('DOMContentLoaded', () => {
groupDiv.appendChild(settingItem); groupDiv.appendChild(settingItem);
}); });
settingsContent.appendChild(groupDiv); settingsPanel.appendChild(groupDiv);
} }
function UpdateSettingItemVisibility() { function UpdateSettingItemVisibility() {
data.settings.forEach(setting => { data.settings.forEach(setting => {
if (setting.showIf) if (setting.showIf) {
{
if (!document.getElementById(setting.showIf).checked) if (!document.getElementById(setting.showIf).checked)
document.getElementById(`item-${setting.id}`).style.display = 'none' document.getElementById(`item-${setting.id}`).style.display = 'none'
else else
@@ -222,18 +193,13 @@ document.addEventListener('DOMContentLoaded', () => {
} }
UpdateSettingItemVisibility(); UpdateSettingItemVisibility();
RefreshWidgetPreview(data);
// saveButton.addEventListener('click', () => {
// SendDataToParent(data);
// });
SendDataToParent(data);
}) })
.catch(error => console.error('Error loading settings:', error)); .catch(error => console.error('Error loading settings:', error));
});
// In the iframe's JavaScript:
function SendDataToParent(data) { function RefreshWidgetPreview(data) {
const settings = {}; const settings = {};
data.settings.forEach(setting => { data.settings.forEach(setting => {
let inputElement = document.getElementById(setting.id); let inputElement = document.getElementById(setting.id);
@@ -250,43 +216,105 @@ function SendDataToParent(data) {
.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`) .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
.join('&'); .join('&');
console.log('Parameter String:', paramString); console.debug('Parameter String:', paramString);
let widgetURLBox = document.getElementById('widget-url'); widgetUrlInput.value = widgetURL + "?" + paramString;
widgetURLBox.value = GetWidgetURL() + "?" + paramString; widgetPreview.src = widgetUrlInput.value;
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); // STREAMER.BOT //
//////////////////
const defaultBackgroundColor = "#2e2e2e"; // Connect to Streamer.bot and get list of actions
const defaultTextColor = "white"; const sbServerAddress = '127.0.0.1';
const sbServerPort = '8080';
const client = new StreamerbotClient({
host: sbServerAddress,
port: sbServerPort,
saveButton.innerText = "Copied to clipboard"; onConnect: (data) => {
saveButton.style.backgroundColor = "#00dd63" console.log(`Streamer.bot successfully connected to ${sbServerAddress}:${sbServerPort}`)
saveButton.style.color = "#ffffff"; console.debug(data);
setTimeout(() => { // Get list of actions
saveButton.innerText = "Click to copy URL"; GetSBActions();
saveButton.style.backgroundColor = defaultBackgroundColor; },
saveButton.style.color = defaultTextColor;
}, 3000); 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.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 CloseSettings() { function CloseSettings() {
let loadSettingsBox = document.getElementById('mommy-milkers');
loadSettingsBox.style.visibility = 'hidden'; loadSettingsBox.style.visibility = 'hidden';
loadSettingsBox.style.opacity = 0; loadSettingsBox.style.opacity = 0;
}; };
function LoadSettings() { function LoadSettings() {
let loadURLBox = document.getElementById('load-url');
const url = new URL(loadURLBox.value); const url = new URL(loadURLBox.value);
url.searchParams.forEach((value, key) => { url.searchParams.forEach((value, key) => {
@@ -302,32 +330,15 @@ function LoadSettings() {
loadURLBox.value = ''; loadURLBox.value = '';
let loadSettingsBox = document.getElementById('mommy-milkers');
loadSettingsBox.style.visibility = 'hidden'; loadSettingsBox.style.visibility = 'hidden';
loadSettingsBox.style.opacity = 0; 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;
//return 'D:/Projects/GitHub Projects/nutty.gg/multistream-alerts/index.html'
}
function OpenMembershipPage() { function OpenMembershipPage() {
window.open("https://nutty.gg/supporters/sign_in", '_blank').focus(); window.open("https://nutty.gg/collections/member-exclusive-widgets", '_blank').focus();
} }
function OpenLoadSettingsPopup() { function OpenLoadSettingsPopup() {
let loadSettingsBox = document.getElementById('mommy-milkers');
loadSettingsBox.style.visibility = 'visible'; loadSettingsBox.style.visibility = 'visible';
loadSettingsBox.style.opacity = 1; loadSettingsBox.style.opacity = 1;
} }
.utilities/settings-page-builder/style.css
+112 -39
View File
@@ -1,26 +1,72 @@
* { * {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
font-size: 16px; font-size: 16px;
font-weight: 500;
color: white; color: white;
--accent-color: #2196f3; --accent-color: #2196f3;
} }
html,
body { body {
background-color: #181818; background-color: #181818;
margin: 0px 20px; margin: 0px 0px;
display: flex;
flex-flow: column;
height: 100%;
overflow: hidden;
/* Prevent overall page scroll */
} }
body::-webkit-scrollbar { #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: 8px;
/* Width of the entire scrollbar */ /* Width of the entire scrollbar */
} }
body::-webkit-scrollbar-track { #settingsPanel::-webkit-scrollbar-track {
background: #2c2c2c; background: #2c2c2c;
/* Color of the tracking area */ /* Color of the tracking area */
} }
body::-webkit-scrollbar-thumb { #settingsPanel::-webkit-scrollbar-thumb {
background-color: #9f9f9f; background-color: #9f9f9f;
/* Color of the scroll thumb */ /* Color of the scroll thumb */
border-radius: 4px; border-radius: 4px;
@@ -28,38 +74,65 @@ body::-webkit-scrollbar-thumb {
border: none; border: none;
} }
body::-webkit-scrollbar-thumb:hover { #settingsPanel::-webkit-scrollbar-thumb:hover {
background-color: #d1d1d1; background-color: #d1d1d1;
/* Color of the scroll thumb on hover */ /* Color of the scroll thumb on hover */
} }
#pinned-header { #widgetPreview {
position: sticky; flex-grow: 1;
top: 0; overflow: hidden;
margin: 40px auto; border: transparent;
padding: 10px 0;
z-index: 100;
background: #181818af;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
} }
#widget-url { #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; font-size: 1em;
width: 100%; width: 100%;
margin: 10px 0px;
padding: 10px 10px; padding: 10px 10px;
filter: blur(4px) brightness(0.4);
/* Apply a blur effect */
transition: filter 0.1s ease-in-out;
cursor: pointer;
} }
#settings-container { #urlLabel {
margin: 0px auto; border-radius: 0.5em;
/* border: 1px solid #ddd; */ padding: 5px 20px;
border-radius: 5px; z-index: 1;
} }
#settings-container h1 { #urlLabel,
text-align: center; #copiedToClipboard {
margin-bottom: 20px; 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 { .setting-group {
@@ -69,6 +142,10 @@ body::-webkit-scrollbar-thumb:hover {
border-radius: 5px; border-radius: 5px;
} }
.setting-group:last-child {
padding-bottom: 0px;
}
h2 { h2 {
font-size: 0.9em; font-size: 0.9em;
font-weight: 500; font-weight: 500;
@@ -84,7 +161,7 @@ h2 {
} }
.setting-item:last-child { .setting-item:last-child {
border-bottom: none; padding-bottom: 0px;
} }
.setting-item label { .setting-item label {
@@ -234,31 +311,31 @@ button:hover {
cursor: pointer; cursor: pointer;
} }
#mommy-milkers { #loadSettingsWrapper {
visibility: hidden; visibility: hidden;
position: fixed; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #181818af; background: #181818af;
backdrop-filter: blur(10px); /* Adjust blur radius as needed */ backdrop-filter: blur(20px) grayscale(50%) brightness(200%);
z-index: 9999; /* Ensure it's on top */ /* Adjust blur radius as needed */
z-index: 9999;
/* Ensure it's on top */
/* Add any other styles for the overlay content */ /* Add any other styles for the overlay content */
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
opacity: 0; opacity: 0;
} }
#load-url { #loadSettingsContainer {
width: 100%; position: absolute;
}
#load-settings-container {
position: fixed;
left: 50%; left: 50%;
top: 50%; top: 50%;
max-width: 1000px;
width: calc(100% - 75px); width: calc(100% - 75px);
border-radius: 0.5em; border-radius: 1em;
border: 1px rgba(255, 255, 255, 0.24) solid ;
padding: 1em; padding: 1em;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
background: #181818af; background: #181818af;
@@ -267,7 +344,3 @@ button:hover {
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
#load-settings {
background-color: var(--accent-color);
}
horizontal-chat/settings/index.html
+6 -41
View File
@@ -4,61 +4,26 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Settings</title> <link rel="icon" href="../../.resources/logo.png" type="image/png">
<title>nutty</title>
<style> <style>
body { body {
margin: 0; margin: 0;
/* Remove default body margin */
display: flex; display: flex;
/* Use flexbox for layout */
background: #181818; background: #181818;
} }
#settings-container { #widgetContainer {
width: 600px; width: 100vw;
/* 50% of viewport width */
min-width: 600px;
/* 50% of viewport width */
height: 100vh; height: 100vh;
/* 100% of viewport height */ border-width: 0px;
border: none;
/* Remove default iframe border */
}
#widget-container {
flex-grow: 1;
/* Allow the content-container to take up remaining space */
height: 100vh;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
.content-container {
width: 50vw;
height: 100vh;
background-color: #f0f0f0;
/* Example background for right side */
padding: 20px;
box-sizing: border-box;
/* Include padding in width/height */
} }
</style> </style>
</head> </head>
<body> <body>
<iframe id="widgetContainer"></iframe>
<iframe id="settings-container"></iframe>
<div id="widget-container">
<iframe id="widget"></iframe>
</div>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>
horizontal-chat/settings/script.js
+26 -26
View File
@@ -1,29 +1,29 @@
let settingsContainer = document.getElementById('settings-container'); const widgetContainer = document.getElementById('widgetContainer');
settingsContainer.src = `../../.utilities/settings-page-builder?settingsJson=${window.location.href}/settings.json`
console.log(settingsContainer.src);
function reloadWidget(data) { const settingsPageURL = '../../.utilities/settings-page-builder';
const currentURL = window.location.href;
let settingsJSON;
let baseURL = currentURL;
if (baseURL.endsWith("index.html"))
baseURL = baseURL.replace("index.html", "");
settingsJSON = "?settingsJson=" + baseURL + "settings.json";
const lastSlashIndex = baseURL.lastIndexOf("/");
let widgetURL = "&widgetURL=" + baseURL.replace("/settings", "");
console.debug("Window Ref: " + window.location.href);
console.debug("Base URL: " + baseURL);
console.debug("Settings JSON: " + settingsJSON);
console.debug("Widget URL: " + widgetURL);
widgetContainer.src = settingsPageURL + settingsJSON + widgetURL;
function callFunction(functionName) {
console.debug(`Calling ${functionName}`);
let widget = document.getElementById("widget"); let widget = document.getElementById("widget");
widget.src = `${getParentUrl()}?${data}`; widget.contentWindow[functionName]();
}
function getParentUrl() {
const currentUrl = window.location.href;
const urlParts = currentUrl.split('/');
// Remove the last part of the URL (the current page/file)
urlParts.pop();
// Remove the last part again to go one directory up
urlParts.pop();
// Reconstruct the URL
const parentUrl = urlParts.join('/');
// Ensure there's a trailing slash if necessary (if it was a directory)
if (urlParts.length > 2 && !parentUrl.endsWith('/')) {
return parentUrl + '/';
}
return parentUrl;
} }
index.html
-51
View File
@@ -1,51 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Simple Page</title>
<style>
/* Optional: Basic CSS Styling */
body {
font-family: sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
main {
flex-grow: 1;
padding: 20px;
}
footer {
background-color: #e0e0e0;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Page</h1>
</header>
<main>
<p>This is the main content area.</p>
</main>
<footer>
<p>&copy; 2024 My Website</p>
</footer>
</body>
</html>
multichat-overlay/settings/index.html
+6 -41
View File
@@ -4,61 +4,26 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Settings</title> <link rel="icon" href="../../.resources/logo.png" type="image/png">
<title>nutty</title>
<style> <style>
body { body {
margin: 0; margin: 0;
/* Remove default body margin */
display: flex; display: flex;
/* Use flexbox for layout */
background: #181818; background: #181818;
} }
#settings-container { #widgetContainer {
width: 600px; width: 100vw;
/* 50% of viewport width */
min-width: 600px;
/* 50% of viewport width */
height: 100vh; height: 100vh;
/* 100% of viewport height */ border-width: 0px;
border: none;
/* Remove default iframe border */
}
#widget-container {
flex-grow: 1;
/* Allow the content-container to take up remaining space */
height: 100vh;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
.content-container {
width: 50vw;
height: 100vh;
background-color: #f0f0f0;
/* Example background for right side */
padding: 20px;
box-sizing: border-box;
/* Include padding in width/height */
} }
</style> </style>
</head> </head>
<body> <body>
<iframe id="widgetContainer"></iframe>
<iframe id="settings-container"></iframe>
<div id="widget-container">
<iframe id="widget"></iframe>
</div>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>
multichat-overlay/settings/script.js
+26 -26
View File
@@ -1,29 +1,29 @@
let settingsContainer = document.getElementById('settings-container'); const widgetContainer = document.getElementById('widgetContainer');
settingsContainer.src = `../../.utilities/settings-page-builder?settingsJson=${window.location.href}/settings.json`
console.log(settingsContainer.src);
function reloadWidget(data) { const settingsPageURL = '../../.utilities/settings-page-builder';
const currentURL = window.location.href;
let settingsJSON;
let baseURL = currentURL;
if (baseURL.endsWith("index.html"))
baseURL = baseURL.replace("index.html", "");
settingsJSON = "?settingsJson=" + baseURL + "settings.json";
const lastSlashIndex = baseURL.lastIndexOf("/");
let widgetURL = "&widgetURL=" + baseURL.replace("/settings", "");
console.debug("Window Ref: " + window.location.href);
console.debug("Base URL: " + baseURL);
console.debug("Settings JSON: " + settingsJSON);
console.debug("Widget URL: " + widgetURL);
widgetContainer.src = settingsPageURL + settingsJSON + widgetURL;
function callFunction(functionName) {
console.debug(`Calling ${functionName}`);
let widget = document.getElementById("widget"); let widget = document.getElementById("widget");
widget.src = `${getParentUrl()}?${data}`; widget.contentWindow[functionName]();
}
function getParentUrl() {
const currentUrl = window.location.href;
const urlParts = currentUrl.split('/');
// Remove the last part of the URL (the current page/file)
urlParts.pop();
// Remove the last part again to go one directory up
urlParts.pop();
// Reconstruct the URL
const parentUrl = urlParts.join('/');
// Ensure there's a trailing slash if necessary (if it was a directory)
if (urlParts.length > 2 && !parentUrl.endsWith('/')) {
return parentUrl + '/';
}
return parentUrl;
} }
multistream-alerts/settings/index.html
+9 -38
View File
@@ -1,58 +1,29 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Settings</title> <link rel="icon" href="../../.resources/logo.png" type="image/png">
<title>nutty</title>
<style> <style>
body { body {
margin: 0; margin: 0;
/* Remove default body margin */
display: flex; display: flex;
/* Use flexbox for layout */
background: #181818; background: #181818;
} }
#settings-container { #widgetContainer {
width: 600px; width: 100vw;
/* 50% of viewport width */
min-width: 600px;
/* 50% of viewport width */
height: 100vh; height: 100vh;
/* 100% of viewport height */ border-width: 0px;
border: none;
/* Remove default iframe border */
}
#widget-container {
flex-grow: 1;
/* Allow the content-container to take up remaining space */
height: 100vh;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
.content-container {
width: 50vw;
height: 100vh;
background-color: #f0f0f0;
/* Example background for right side */
padding: 20px;
box-sizing: border-box;
/* Include padding in width/height */
} }
</style> </style>
</head> </head>
<body> <body>
<iframe id="settings-container"></iframe> <iframe id="widgetContainer"></iframe>
<div id="widget-container"> <script src="script.js"></script>
<iframe id="widget"></iframe>
</div>
</body> </body>
<script src="./script.js"></script> </html>
multistream-alerts/settings/script.js
+16 -23
View File
@@ -1,33 +1,26 @@
let settingsContainer = document.getElementById('settings-container'); const widgetContainer = document.getElementById('widgetContainer');
settingsContainer.src = `../../.utilities/settings-page-builder?settingsJson=${window.location.href}/settings.json`
//settingsContainer.src = `../../.utilities/settings-page-builder?settingsJson=../../multistream-alerts/settings/settings.json`
console.log(settingsContainer.src);
function reloadWidget(data) { const settingsPageURL = '../../.utilities/settings-page-builder';
let widget = document.getElementById("widget");
widget.src = `${getParentUrl()}?${data}`;
}
function getParentUrl() { const currentURL = window.location.href;
const currentUrl = window.location.href;
const urlParts = currentUrl.split('/');
// Remove the last part of the URL (the current page/file) let settingsJSON;
urlParts.pop(); let baseURL = currentURL;
// Remove the last part again to go one directory up if (baseURL.endsWith("index.html"))
urlParts.pop(); baseURL = baseURL.replace("index.html", "");
// Reconstruct the URL settingsJSON = "?settingsJson=" + baseURL + "settings.json";
const parentUrl = urlParts.join('/');
// Ensure there's a trailing slash if necessary (if it was a directory) const lastSlashIndex = baseURL.lastIndexOf("/");
if (urlParts.length > 2 && !parentUrl.endsWith('/')) { let widgetURL = "&widgetURL=" + baseURL.replace("/settings", "");
return parentUrl + '/';
}
return parentUrl; console.debug("Window Ref: " + window.location.href);
} console.debug("Base URL: " + baseURL);
console.debug("Settings JSON: " + settingsJSON);
console.debug("Widget URL: " + widgetURL);
widgetContainer.src = settingsPageURL + settingsJSON + widgetURL;
function callFunction(functionName) { function callFunction(functionName) {
console.debug(`Calling ${functionName}`); console.debug(`Calling ${functionName}`);