created space for more settings

static/js/settings.js

@@ -0,0 +1,138 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const primaryColorInput = document.getElementById('primaryColor');
+    const secondaryColorInput = document.getElementById('secondaryColor');
+
+    // Color manipulation functions
+    function hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        } : null;
+    }
+
+    function rgbToHex(r, g, b) {
+        return '#' + [r, g, b].map(x => {
+            const hex = x.toString(16);
+            return hex.length === 1 ? '0' + hex : hex;
+        }).join('');
+    }
+
+    function lightenColor(color, amount) {
+        const rgb = hexToRgb(color);
+        if (!rgb) return color;
+        
+        return rgbToHex(
+            Math.min(255, Math.round(rgb.r + (255 - rgb.r) * amount)),
+            Math.min(255, Math.round(rgb.g + (255 - rgb.g) * amount)),
+            Math.min(255, Math.round(rgb.b + (255 - rgb.b) * amount))
+        );
+    }
+
+    function darkenColor(color, amount) {
+        const rgb = hexToRgb(color);
+        if (!rgb) return color;
+        
+        return rgbToHex(
+            Math.max(0, Math.round(rgb.r * (1 - amount))),
+            Math.max(0, Math.round(rgb.g * (1 - amount))),
+            Math.max(0, Math.round(rgb.b * (1 - amount)))
+        );
+    }
+
+    function updateAllColors(color, isPrimary) {
+        const prefix = isPrimary ? 'primary' : 'secondary';
+        
+        // Calculate derived colors
+        const lightColor = lightenColor(color, 0.15);
+        const bgLightColor = lightenColor(color, 0.9);
+        const opacity15 = color + '26'; // 15% opacity in hex
+
+        // Calculate chart colors
+        const chartColors = {
+            base: color,
+            light: lightenColor(color, 0.2),
+            lighter: lightenColor(color, 0.4),
+            lightest: lightenColor(color, 0.6),
+            pale: lightenColor(color, 0.8)
+        };
+
+        // Update CSS variables for the entire website
+        document.documentElement.style.setProperty(`--${prefix}-color`, color);
+        document.documentElement.style.setProperty(`--${prefix}-light`, lightColor);
+        document.documentElement.style.setProperty(`--${prefix}-bg-light`, bgLightColor);
+        document.documentElement.style.setProperty(`--${prefix}-opacity-15`, opacity15);
+
+        // Update chart color variables
+        document.documentElement.style.setProperty(`--chart-${prefix}`, chartColors.base);
+        document.documentElement.style.setProperty(`--chart-${prefix}-light`, chartColors.light);
+        document.documentElement.style.setProperty(`--chart-${prefix}-lighter`, chartColors.lighter);
+        document.documentElement.style.setProperty(`--chart-${prefix}-lightest`, chartColors.lightest);
+        document.documentElement.style.setProperty(`--chart-${prefix}-pale`, chartColors.pale);
+
+        // Update derived colors in the preview section
+        const derivedColorsSection = document.getElementById(`${prefix}DerivedColors`);
+        if (derivedColorsSection) {
+            const previews = derivedColorsSection.querySelectorAll('.color-preview');
+            previews.forEach(preview => {
+                const colorType = preview.getAttribute('data-color-type');
+                let previewColor;
+                switch (colorType) {
+                    case 'base':
+                        previewColor = color;
+                        break;
+                    case 'light':
+                        previewColor = lightColor;
+                        break;
+                    case 'bg-light':
+                        previewColor = bgLightColor;
+                        break;
+                    case 'opacity':
+                        previewColor = opacity15;
+                        break;
+                }
+                preview.style.backgroundColor = previewColor;
+            });
+        }
+
+        // Update the color input value
+        if (isPrimary) {
+            primaryColorInput.value = color;
+        } else {
+            secondaryColorInput.value = color;
+        }
+    }
+
+    // Event listeners for color inputs
+    primaryColorInput.addEventListener('change', () => {
+        updateAllColors(primaryColorInput.value, true);
+    });
+
+    secondaryColorInput.addEventListener('change', () => {
+        updateAllColors(secondaryColorInput.value, false);
+    });
+
+    // Also listen for input events for real-time updates
+    primaryColorInput.addEventListener('input', () => {
+        updateAllColors(primaryColorInput.value, true);
+    });
+
+    secondaryColorInput.addEventListener('input', () => {
+        updateAllColors(secondaryColorInput.value, false);
+    });
+
+    // Initialize colors from database values
+    function initializeColors() {
+        // Reset inputs to original database values
+        primaryColorInput.value = primaryColorInput.dataset.originalValue;
+        secondaryColorInput.value = secondaryColorInput.dataset.originalValue;
+
+        // Update all color previews
+        updateAllColors(primaryColorInput.value, true);
+        updateAllColors(secondaryColorInput.value, false);
+    }
+
+    // Initialize colors when the page loads
+    initializeColors();
+});