` : ''} ${config.GTM ? ` ` : ''}

Processing your request...

${config.logo_url ? `Service Logo` : ''} ${resultContent}

Content Services are currently blocked for this number. If you select ACCEPT you will be allowed to purchase this specific content, but other content services will remain blocked.

${config.displayLogo ? ` ` : ''} ${config.close_button_image ? `` : closeButtonChar}
${config.extraText ? `

${config.extraHeading1}

` : ""}
${config.subtitle} ${config.service} ${config.service_text} ${config.description} ${config.price_text} ${config.extraText ? `

${config.extraHeading2}

` : ""}
${config.subtitle} ${config.service} ${config.service_text} ${config.description} ${config.price_text}
Please include area code: (e.g. 27123456789)
${config.subFooter ? ` ` : ""} `; const iframe = document.getElementById('previewFrame'); iframe.srcdoc = previewHtml; // Re-enable click highlighting after preview update setTimeout(() => { if (clickHighlightEnabled) { enablePreviewClickHighlight(); } // Re-apply highlight after preview update if (currentHighlightSelector) { addHighlight(currentHighlightSelector); } }, 100); } function setPreviewMode(mode) { currentPreviewMode = mode; document.querySelectorAll('.device-btn').forEach(btn => btn.classList.remove('active')); event.target.classList.add('active'); updatePreview(); } function showJsonLoader() { document.getElementById('jsonLoader').style.display = 'block'; document.getElementById('configOutput').style.display = 'none'; } function hideJsonLoader() { document.getElementById('jsonLoader').style.display = 'none'; document.getElementById('jsonError').style.display = 'none'; } function loadJsonConfig() { const jsonInput = document.getElementById('jsonInput').value; if (!jsonInput.trim()) { showJsonError('Please paste JSON configuration or select a file.'); return; } try { const config = JSON.parse(jsonInput); populateFormFromJson(config); hideJsonLoader(); // Load CSS from the new URL after JSON config is applied setTimeout(() => { loadCssFromUrl(); updatePreview(); }, 100); showJsonSuccess('Configuration loaded successfully!'); } catch (error) { showJsonError('Invalid JSON: ' + error.message); } } function populateFormFromJson(config) { const designConfig = config.design_config || config; // Reset all form fields first const form = document.getElementById('configForm'); form.reset(); // Clear all input and textarea fields manually const inputs = form.querySelectorAll('input, textarea'); inputs.forEach(input => { if (input.type === 'checkbox') { input.checked = false; } else { input.value = ''; } }); // Now populate with new values Object.keys(designConfig).forEach(key => { const field = document.getElementById(key); if (field) { if (field.type === 'checkbox') { field.checked = designConfig[key] === true; } else { field.value = designConfig[key] || ''; } } }); } function showJsonError(message) { const errorDiv = document.getElementById('jsonError'); errorDiv.textContent = message; errorDiv.style.display = 'block'; errorDiv.style.color = '#e74c3c'; } function showJsonSuccess(message) { const errorDiv = document.getElementById('jsonError'); errorDiv.textContent = message; errorDiv.style.display = 'block'; errorDiv.style.color = '#27ae60'; setTimeout(() => { errorDiv.style.display = 'none'; }, 3000); } function exportConfig() { const formData = new FormData(document.getElementById('configForm')); const config = { design_config: {} }; for (let [key, value] of formData.entries()) { if (key === 'useOtpFlowFlag' || key === 'useLowercaseCloseButton') { config.design_config[key] = value === 'on'; } else { config.design_config[key] = value; } } if (!formData.has('useOtpFlowFlag')) config.design_config.useOtpFlowFlag = false; if (!formData.has('useLowercaseCloseButton')) config.design_config.useLowercaseCloseButton = false; document.getElementById('configJson').textContent = JSON.stringify(config, null, 2); document.getElementById('configOutput').style.display = 'block'; document.getElementById('jsonLoader').style.display = 'none'; } function copyConfigToClipboard() { const configText = document.getElementById('configJson').textContent; navigator.clipboard.writeText(configText).then(() => { const button = event.target; const originalText = button.textContent; button.textContent = 'Copied!'; button.style.background = '#27ae60'; setTimeout(() => { button.textContent = originalText; button.style.background = ''; }, 2000); }); } // Auto-update preview when form fields change (excluding CSS URL changes) document.getElementById('configForm').addEventListener('input', function(event) { clearTimeout(window.updateTimeout); // If the CSS URL field changed, load the CSS and update preview if (event.target.id === 'stylesheet_css_url') { window.updateTimeout = setTimeout(() => { loadCssFromUrl(); // This will automatically call updatePreview() after loading CSS }, 800); // Longer delay for CSS URL changes } else { // For other fields, just update the preview window.updateTimeout = setTimeout(updatePreview, 500); } }); // Initialize login screen only window.addEventListener('load', function() { // Show login screen by default document.getElementById('loginScreen').style.display = 'flex'; document.getElementById('mainApp').style.display = 'none'; // Focus on username field document.getElementById('username').focus(); // Add file upload handler for JSON configs (only when app is loaded) document.getElementById('jsonFile').addEventListener('change', function(event) { const file = event.target.files[0]; if (file && file.type === 'application/json') { const reader = new FileReader(); reader.onload = function(e) { document.getElementById('jsonInput').value = e.target.result; }; reader.readAsText(file); } else if (file) { showJsonError('Please select a valid JSON file.'); } }); });