-
-
-
-
-
-
-
-
+
+
+
+ Subtle tint for menu builder cards and backgrounds. Leave empty for white.
+
+
-
+
`;
this.showModal();
- // Wire up color picker sync
+ // Wire up dark color picker sync
const colorInput = document.getElementById('brandColorInput');
const hexInput = document.getElementById('brandColorHex');
const preview = document.getElementById('brandColorPreview');
@@ -3675,7 +3694,7 @@
}
});
- // Preset buttons
+ // Preset buttons (dark only)
document.querySelectorAll('.color-preset').forEach(btn => {
btn.addEventListener('click', () => {
const color = btn.dataset.color;
@@ -3684,13 +3703,37 @@
updatePreview(color);
});
});
+
+ // Wire up light color picker sync
+ const lightInput = document.getElementById('brandColorLightInput');
+ const lightHex = document.getElementById('brandColorLightHex');
+ const lightPreview = document.getElementById('brandColorLightPreview');
+
+ lightInput.addEventListener('input', (e) => {
+ lightHex.value = e.target.value.toUpperCase();
+ lightPreview.style.background = e.target.value;
+ });
+
+ lightHex.addEventListener('input', (e) => {
+ let val = e.target.value;
+ if (!val.startsWith('#')) val = '#' + val;
+ if (/^#[0-9A-Fa-f]{6}$/.test(val)) {
+ lightInput.value = val;
+ lightPreview.style.background = val;
+ }
+ });
},
// Save brand color
async saveBrandColor() {
const color = document.getElementById('brandColorHex').value.toUpperCase();
if (!/^#[0-9A-Fa-f]{6}$/.test(color)) {
- this.toast('Invalid color format. Use #RRGGBB', 'error');
+ this.toast('Invalid dark color format. Use #RRGGBB', 'error');
+ return;
+ }
+ const lightColor = (document.getElementById('brandColorLightHex')?.value || '').toUpperCase();
+ if (lightColor && !/^#[0-9A-Fa-f]{6}$/.test(lightColor)) {
+ this.toast('Invalid light color format. Use #RRGGBB or leave empty', 'error');
return;
}
@@ -3698,12 +3741,18 @@
const response = await fetch(`${this.config.apiBaseUrl}/businesses/saveBrandColor.cfm`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ BusinessID: this.config.businessId, BrandColor: color })
+ body: JSON.stringify({
+ BusinessID: this.config.businessId,
+ BrandColor: color,
+ BrandColorLight: lightColor
+ })
});
const data = await response.json();
if (data.OK) {
this.brandColor = color;
+ this.brandColorLight = data.BRANDCOLORLIGHT ? '#' + data.BRANDCOLORLIGHT : '';
document.getElementById('brandColorSwatch').style.background = color;
+ this.applyBrandTint();
this.closeModal();
this.toast('Brand color saved!', 'success');
} else {
@@ -3715,6 +3764,16 @@
}
},
+ applyBrandTint() {
+ const canvas = document.getElementById('menuCanvas');
+ if (!canvas) return;
+ if (this.brandColorLight && this.brandColorLight.length >= 4) {
+ canvas.style.setProperty('--brand-tint', this.brandColorLight + '0A');
+ } else {
+ canvas.style.setProperty('--brand-tint', 'transparent');
+ }
+ },
+
// Load menu from API
async loadMenu(menuId = null) {
try {
@@ -3749,12 +3808,14 @@
// Store templates from API (default to empty array if not provided)
this.templates = data.TEMPLATES || [];
- // Load brand color if set
+ // Load brand colors
if (data.BRANDCOLOR && data.BRANDCOLOR.length > 0) {
this.brandColor = data.BRANDCOLOR;
const swatch = document.getElementById('brandColorSwatch');
if (swatch) swatch.style.background = data.BRANDCOLOR;
}
+ this.brandColorLight = data.BRANDCOLORLIGHT || '';
+ this.applyBrandTint();
this.renderTemplateLibrary();
this.render();
} else {