Lots of new stuff for rework

scripts/main.js

@@ -0,0 +1,96 @@
+const r = document.querySelector(':root');
+
+const fgInput = document.getElementById('foreground-setting');
+const bgInput = document.getElementById('background-setting');
+const spacingInput = document.getElementById('frame-spacing-setting');
+const radiusInput = document.getElementById('frame-border-radius-setting');
+const saveBtn = document.getElementById('save-settings-button');
+const resetBtn = document.getElementById('reset-settings-button');
+
+let lightMode = false;
+
+const defaultSettings = {
+    foreground: "#ba1818",
+    background: "#0f0f0f",
+    spacing: "15px",
+    radius: "10px"
+};
+
+saveBtn.addEventListener('click', () => {
+    const currentSettings = {
+        foreground: fgInput.value,
+        background: bgInput.value,
+        spacing: spacingInput.value + 'px',
+        radius: radiusInput.value + 'px'
+    };
+
+    setForegroundColor(currentSettings.foreground);
+    setBackgroundColor(currentSettings.background);
+    setFrameSpacing(currentSettings.spacing);
+    setFrameBorderRadius(currentSettings.radius);
+
+    localStorage.setItem('user-settings', JSON.stringify(currentSettings));
+});
+
+resetBtn.addEventListener('click', () => {
+    localStorage.setItem('user-settings', JSON.stringify(defaultSettings));
+    loadStoredSettings();
+    syncSettings();
+});
+
+function setForegroundColor(color) {
+    r.style.setProperty('--color-foreground', color);
+}
+
+function setBackgroundColor(color) {
+    r.style.setProperty('--color-background', color);
+}
+
+function setFrameSpacing(amount) {
+    r.style.setProperty('--frame-spacing', amount);
+}
+
+function setFrameBorderRadius(amount) {
+    r.style.setProperty('--frame-border-radius', amount);
+}
+
+function syncSettings() {
+    const rootStyles = getComputedStyle(document.documentElement);
+
+    const varMap = {
+        'foreground-setting': '--color-foreground',
+        'background-setting': '--color-background',
+        'frame-spacing-setting': '--frame-spacing',
+        'frame-border-radius-setting': '--frame-border-radius'
+    };
+
+    for (const [id, variable] of Object.entries(varMap)) {
+        const element = document.getElementById(id);
+        
+        if (element) {
+            let cssValue = rootStyles.getPropertyValue(variable).trim();
+
+            if (element.type === 'number') {
+                element.value = parseFloat(cssValue) || 0;
+            } else {
+                element.value = cssValue;
+            }
+        }
+    }
+}
+
+function loadStoredSettings() {
+    const saved = localStorage.getItem('user-settings');
+    
+    if (saved) {
+        const settings = JSON.parse(saved);
+        
+        setForegroundColor(settings.foreground);
+        setBackgroundColor(settings.background);
+        setFrameSpacing(settings.spacing);
+        setFrameBorderRadius(settings.radius);
+    }
+}
+
+loadStoredSettings();
+syncSettings();