`;// Show the result in the iframe iframe.srcdoc = output;// Wait for iframe content to fully load before hiding the spinner iframe.onload = function() { hideLoading(); }; }, 300); // Simulate a delay (adjust the delay as needed) }// Add input event listeners to the textareas for real-time updates htmlTextarea.addEventListener('input', compile); cssTextarea.addEventListener('input', compile); jsTextarea.addEventListener('input', compile); // Add click event listeners for tabs tabs.forEach(tab => { tab.addEventListener('click', () => { document.querySelector('.tab.active').classList.remove('active'); tab.classList.add('active'); currentTab = tab.dataset.tab;// Load content for the selected tab loadTabContent(currentTab); }); });function loadTabContent(tab) { // Load the corresponding content for the selected tab if (tab === 'page1') { htmlTextarea.value = "

Welcome to Page 1

"; cssTextarea.value = "body { background-color: lightblue; }"; jsTextarea.value = "console.log('Page 1 Loaded');"; } else if (tab === 'page2') { htmlTextarea.value = "

Welcome to Page 2

"; cssTextarea.value = "body { background-color: lightgreen; }"; jsTextarea.value = "console.log('Page 2 Loaded');"; } compile(); // Compile the content }// Initialize loading state compile();// Image upload handler imageUpload.addEventListener('change', function(event) { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = function(e) { uploadedImage.src = e.target.result; uploadedImage.style.display = 'block'; // Show the uploaded image } reader.readAsDataURL(file); } });