// DOM elements
const htmlEditor = document.getElementById('html-editor');
const cssEditor = document.getElementById('css-editor');
const jsEditor = document.getElementById('js-editor');
const imageUrlInput = document.getElementById('image-url');
const imageFileInput = document.getElementById('image-file');
const previewIframe = document.getElementById('preview-iframe');
const loadingSpinner = document.getElementById('loading-spinner');
const previewTab = document.getElementById('preview-tab');
const filesTab = document.getElementById('files-tab');
const previewView = document.getElementById('preview-view');
const filesView = document.getElementById('files-view');
// State
let currentImageSrc = '';
let updateTimeout;
// Debounce function
function debounce(func, wait) {
return function executedFunction(...args) {
const later = () => {
clearTimeout(updateTimeout);
func(...args);
};
clearTimeout(updateTimeout);
updateTimeout = setTimeout(later, wait);
};
}
// Update preview function
function updatePreview() {
// Show loading spinner
loadingSpinner.classList.remove('hidden');
// Get current code
let html = htmlEditor.value;
const css = cssEditor.value;
const js = jsEditor.value;
// Replace image src in HTML
html = html.replace(/]*id="preview-img"[^>]*>/g, `
`);
// Build complete HTML document
const fullDoc = `
${html}