WARNING: JavaScript is executed directly. Only use code from trusted sources. Malicious JS can harm your browser.
`;
}
// --- End Combination ---
// Create the object in the format expected by index.html
const newButtonCard = { title, code: combinedCode };
let savedButtons = JSON.parse(localStorage.getItem('buttonShowcaseData')) || [];
savedButtons.push(newButtonCard);
localStorage.setItem('buttonShowcaseData', JSON.stringify(savedButtons));
showMessage(creatorMessage, 'Button card added successfully! Refresh your main page to see it.', 'green');
// Clear inputs
buttonTitleInput.value = '';
buttonHtmlInput.value = '';
buttonCssInput.value = '';
buttonJsInput.value = '';
});
clearAllButton.addEventListener('click', () => {
// Confirm with the user before clearing all data
if (window.confirm("Are you sure you want to CLEAR ALL saved buttons? This cannot be undone!")) {
localStorage.removeItem('buttonShowcaseData');
showMessage(creatorMessage, 'All buttons cleared! Refresh your main page to see the changes.', 'green');
}
});
/**
* Shows a message in a designated message box.
* @param {HTMLElement} element The message box DOM element.
* @param {string} msg The message text.
* @param {string} type 'green' for success, 'red' for error.
*/
function showMessage(element, msg, type) {
element.textContent = msg;
element.classList.remove('bg-green-200', 'bg-red-200');
element.classList.add(type === 'green' ? 'bg-green-200' : 'bg-red-200');
element.classList.add('show');
setTimeout(() => {
element.classList.remove('show');
}, 3000);
}
/**
* Shows the creator section and hides the auth section.
* @param {string} message Optional message to display after login.
*/
function showCreator(message = '') {
authSection.classList.add('hidden');
creatorSection.classList.remove('hidden');
if (message) {
showMessage(loginMessage, message, 'green'); // Using loginMessage for post-login feedback
}
}